В качестве JavaScript в блокирует рендеринг HTML, это не так и с CSS?

StackOverflow https://stackoverflow.com/questions/4026183

  •  26-09-2019
  •  | 
  •  

Вопрос

Как JavaScript In Blocks HTML-рендеринга, и это хорошая практика, чтобы сохранить JavaScript внизу, незадолго до закрытия тегов тела, не так ли не так с CSS?

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

Это было полезно?

Решение

CSS не блокирует так же, как JavaScript делает

Цитировать Сетевой блог разработчика Yahoo

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

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

Другие советы

Не только CSS не блокирует способ JavaScript, но и некоторые браузеры будут делать странные вещи, если вы поместите CSS в любом месте, кроме <head>, как игнорировать это или применить его не полностью. HTML5 на самом деле запрещает <style> от появления снаружи <head> (За исключением функции «Scoped», которую еще никто не реализует).

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

Подумайте об этом, если CSS был загружен так же, как JS, ни один элемент не будет создан, потому что он будет ссылаться на элементы, которые еще не загружены, поэтому он применяется впоследствии и не блокирует загрузку.

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

В случае JavaScript вы можете сохранить скрипт в чтении, так как вы заставляете его работать после всех HTML-нагрузок, таких как:

window.onload = function (){

//here we start
}

Js.

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

CSS.

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

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

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

Почему это будет хорошая практика, чтобы держать JavaScript на дне?

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top