Как JavaScript в блоках HTML-рендеринга, и это хорошая практика держать JavaScript внизу, перед закрытием тега body, не так ли и с CSS?Как javascript в <head> блокирует рендеринг HTML, не так ли и с CSS?
Я знаю, что мы не можем хранить внешний CSS вне.
CSS не блокирует таким же образом JavaScript делает
Цитирую Yahoo's Developer Network Blog
с таблицами стилей, прогрессивный рендеринг блокируется, пока все таблицы стилей не были загружены. Вот почему лучше всего перемещать таблицы стилей в документ HEAD, поэтому они сначала загружаются, а рендеринг не блокируется. С помощью сценариев прогрессивный рендеринг блокируется для всего содержимого ниже сценария. Перемещение сценариев как можно меньше на странице означает, что над сценарием появляется больше контента, который выполняется раньше.
Кроме того, когда CSS добавляется в голову, он сначала анализируется и приводит к стилю HTML, даже если он загружается. Это позволяет избежать Flash Unstyled Content, что происходит, если вы помещаете теги стиля в нижней части большой страницы HTML.
Почему было бы хорошей практикой держать Javascript внизу?
Я бы сказал, что лучше всего разместить CSS, а также Javascript в отдельных файлах и включить их в свой HTML-документ, используя раздел <head>.
Поскольку блоки JavaScript дополнительная нагрузка - см: HTTP: // developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/ –
Это трехлетний источник, который вы публикуете. В то же время многое изменилось. Особенно с движками javascript. – Rhapsody
'
Таблицы стилей CSS загружаются с использованием элемента
<link>, этот элемент действителен только в том случае, если он находится в начале документа. Что касается CSS-блокировки HTML-рендеринга, это не так, потому что CSS применяется после загрузки браузера так же, как и другие элементы<link>. JS блокирует HTML, потому что браузер предполагает, что JS хочет взять под свой контроль и фактически что-то сделать перед загрузкой DOM полностью, в основном JS выполняется, а затем остается в покое.Подумайте об этом, если CSS был загружен так же, как JS, ни один элемент не был бы стилизован, потому что он будет ссылаться на еще не загруженные элементы, поэтому он применяется впоследствии и не блокирует загрузку.
источник
2010-10-26 17:27:56
JS
С JS может изменить вашу веб-страницу (изменить DOM) браузеры ждать всех внешних JS для загрузки (паралельно), интерпретируется и выполняется перед продолжением остальной части HTML, который приходит после того, как
<script src="..." >Поэтому рекомендуется установить все внешние JS в нижней части<body>.Таким образом, ваш HTML получает разобраны и визуализации, а пользователь имеет ощущение, что что-то происходит ...CSS
CSS с другой стороны, не может изменить DOM, не может делать какие-либо «тяжелые» изменения на на странице, и поэтому браузер не блокирует загрузку, разбор остальной части HTML и прогрессивную визуализацию, как в случае с JS. Кажется, что он блокирует рендеринг, но лучше поместить его наверху и избежать длинного FOUC. Он не блокирует загрузку, хотя
Теперь кажется, что с ростом мобильных устройств, помещающих ваш CSS в ваш
HEAD, а JS на дне недостаточно ... Вам нужно будет поместить ATF (выше складки) CSS инлайн и остальная часть вашего огромного свернутом CSS вместе с JS - в нижней/defered и асинхроннойВзгляните на это: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/
источник
2014-09-01 09:14:56 luigi7up