Когда выполняется динамически загружаемый CSS в голову

Если я уже ответил, я был бы признателен за ссылку, которую я просто не могу найти.Когда выполняется динамически загружаемый CSS в голову

загружает .php страницы либо <?php include 'header.php'; ?> непосредственно или на действия кнопки/ссылок с

<a href="#" data-toggle="modal" role="button" data-target="#genericModal" onclick="loadModalContent(\'profil.php\',\'genericModal\')">.

Некоторые из нагруженных детей нуждаются в такой же .CSS & других файлах, как их родители, так что, хотя я бы используйте следующий код для загрузки

function loadStyleSheet(uri){ 
    //jquery might not be loaded yet, so do long form 
    var ss = document.styleSheets; 
    for (var i = 0, max = ss.length; i < max; i++) { 
     if (ss[i].href.indexOf(uri) > -1){ 
      return; 
     } 
    } 
    var styleSheet = document.createElement("link"); 
    styleSheet.href = uri; 
    styleSheet.rel = "stylesheet"; 
    styleSheet.type = "text/css"; 
    document.getElementsByTagName("head")[0].appendChild(styleSheet); 
};

, а затем я, то есть два файла:

parent.ph р

<html> 
    <head> 
     <link rel="stylesheet" href="css/bootstrap.css"/> 
     <link....something else and more.... 
    </head> 
    <body> 
     load in one way or another the child.php 
    </body> 
</html>

child.php (без HTML, без головы или тела)

<script> 
    loadStyleSheet("css/bootstrap.css"); 
    loadStyleSheet("css/child.css"); 
</script> 
<div class="xyz"> 
    something more here 
</div>

Но мой вопрос теперь, как браузеры реагируют на него. Потому что в основном родитель уже прошел через его <head></head> и строит страницу, а где-то посередине, я скажу ему загрузить какой-то другой код и, кстати, добавлю .css с javascript к его <head> (у меня нет <head> s в дочерних файлах). Как браузеры реагируют на это?

Я понимаю, что я, вероятно, мог бы использовать загрузчики, но хотел бы избежать их пока.

Я также мог бы добавить все дети .css в родитель, но для ясности и нагрузок на конструкции спроса хотели бы, чтобы держать их в детских .phps

Заранее спасибо!

источник

2016-10-21 TheRealPir

Я бы рекомендовал, чтобы все css, которые ваш родитель и ребенок нуждались в добавлении сначала. Если вам нужна ясность, вы можете разделить его на два файла и добавить их оба.

Но если вы не можете, возможно, вы можете загрузить правила стиля внутри тега <style> вместо <link>

Конечно, если вы положили CSS внутри <style> вы не воспользовавшись кэшированию браузер, но если вы беспокоитесь о том, не используя его, почему бы не загрузить все CSS в первую очередь

посмотрите на this сайте

источник

2016-10-21 17:36:33

, добавляя их сначала, означает, что если у меня есть несколько родителей, я всегда должен убедиться, что точно знаю, какие дети могут быть потенциально загружены, чего я действительно не хочу отслеживать. Как стиль vs link помогает мне. Вы имеете в виду, что я должен поместить CSS-код в php напрямую. Я действительно надел – TheRealPir

не хочу этого делать, поскольку я повторно использую файлы. Есть ли что-то конкретное, вы имели в виду, что я должен посмотреть на предлагаемую страницу. Мне кажется, что это просто стандартная обработка CSS с помощью javascript, который я уже использую в своем коде выше. – TheRealPir

или вы имели в виду стиль, а не ссылку, чтобы добавить стиль элемента. Если это так, мой вопрос по-прежнему, когда/как этот элемент получает (загружается) анализируется. – TheRealPir

браузер должен реагировать на DOM изменения - который будет включать в себя добавление таблица стилей - сразу.

Однако «прямо сейчас» ограничен, потому что браузер работает с однопоточными, и потому что он должен действительно загружать таблицу стилей (возможно, из удаленного места).

В целом повторный рендер будет происходить, когда любой скрипт, который изменил DOM, заканчивается. (Это может означать, по существу, в теге </script> для встроенного скрипта или когда обработчик события возвращается, если событие вызвало сценарий ...)

Так что если вы пошагово с отладчиком, вы бы увидели, что <link> элемент появляется под голову, как только вы выполните следующую строку:

document.getElementsByTagName("head")[0].appendChild(styleSheet);

Но страница не будет повторно пока еще.

Но даже если DOM перерисовывается, если новый ресурс стилей не успел загрузить, то отображаемая страница не будет обновляться. Пользователю будет показано, что таблица стилей применяется в какое-то неуказанное время, не раньше, чем завершение скрипта, создавшего элемент <link>.

источник

2016-10-21 18:00:37

Страница на самом деле повторно отображается некоторое время после завершения скрипта, так как для таблицы стилей потребуется время для загрузки. Это будет иметь заметное различие для медленных подключений к Интернету или больших таблиц стилей. – tcooc

Правда; думал о ресурсах как местных, что, конечно, глупо. То, что я написал, было бы ближе к true, если бы скрипт построил тег