Поскольку javascript в <head>блокирует рендеринг HTML, разве это не относится и к CSS? - PullRequest
Новая
       21

Поскольку javascript в <head>блокирует рендеринг HTML, разве это не относится и к CSS?

0 голосов
/ 26 октября 2010

Как JavaScript в блоках рендеринга HTML, и рекомендуется держать JavaScript в самом низу, непосредственно перед закрытием тега body, не так ли это и с CSS?

Я знаю, что мы не можем сохранить внешний CSSвне .

Ответы [ 6 ]

6 голосов
/ 26 октября 2010

CSS не блокируется таким же образом, как JavaScript

Цитируя Блог сети разработчиков Yahoo

В таблицах стилей прогрессивный рендеринг блокируется до тех пор, пока все таблицы стилейбыли загружены.Вот почему лучше всего перемещать таблицы стилей в документ HEAD, чтобы они сначала загружались, а рендеринг не блокировался.В сценариях прогрессивный рендеринг блокируется для всего содержимого ниже сценария.Перемещение сценариев на страницу как можно ниже означает, что над сценарием отображается больше контента, который отображается быстрее.

Кроме того, когда CSS добавляется в заголовок, он анализируется первым и приводит кСтиль HTML, даже когда он загружен.Это позволяет избежать флеш-содержимого без стиля, которое происходит, если вы размещаете теги стиля внизу большой страницы HTML.

2 голосов
/ 26 октября 2010

Мало того, что CSS не блокирует то, что делает Javascript, но и некоторые браузеры будут делать странные вещи, если вы поместите CSS где-нибудь, кроме <head>, например, игнорируете его или примените его не полностью. HTML5 фактически запрещает <style> появляться вне <head> (за исключением функции «scoped», которую AFAIK еще никто не реализует).

1 голос
/ 26 октября 2010

Таблицы стилей CSS загружаются с использованием элемента <link>, этот элемент действителен только в том случае, если он находится в заголовке документа.Что касается CSS, блокирующего рендеринг HTML, то это не так, потому что CSS применяется, когда браузер загружается так же, как и другие элементы <link>.JS блокирует HTML, потому что браузер предполагает, что JS хочет получить контроль и фактически что-то сделать перед полной загрузкой DOM, в основном JS выполняется, а затем остается один., ни один элемент не будет стилизован, потому что он будет ссылаться на элементы, которые еще не загружены, поэтому он применяется впоследствии и не блокирует загрузку.

0 голосов
/ 01 сентября 2014

JS

Поскольку JS может изменить вашу веб-страницу (изменить DOM), браузеры ждут, пока все внешние JS будут загружены (параллельно), интерпретированы и выполнены перед продолжением работы с остальной частью HTML, которая следует после <script src="..." > Поэтому рекомендуется размещать все внешние JS внизу <body>. Таким образом, ваш HTML анализируется и обрабатывается, и у вашего пользователя возникает ощущение, что что-то происходит ...

CSS

С другой стороны, CSS не может изменить DOM, не может вносить какие-либо «тяжелые» изменения на страницу, и поэтому браузер не блокирует загрузку, анализ остальной части HTML и прогрессивный рендеринг, как в случае с JS. Кажется, что он блокирует рендеринг, но все же лучше поставить его сверху и избегать длинных FOUC . Это не блокирует загрузку, хотя

Теперь, похоже, что с ростом количества мобильных устройств размещение вашего CSS на вашем HEAD и JS внизу не достаточно ... Вы захотите поместить ATF (выше сгиба) встроенным CSS, а остальные ваш огромный свернутый CSS вместе с вашим JS - внизу / defred и async

Взгляните на это: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

0 голосов
/ 26 октября 2010

Нет, css применяется к элементу DOM сразу после того, как браузер прочитал css.

В случае javascript вы можете держать скрипт на прочтении, так как вы заставляете его запускаться после всех загрузок html, например: 

window.onload = function (){

//here we start
}
0 голосов
/ 26 октября 2010

Почему было бы неплохо держать Javascript внизу?

Я бы сказал, что рекомендуется размещать CSS и Javascript в отдельных файлах и включать их в ваш HTML-документ, используя раздел <head>.

...