).

м посте:

Почему Google использует термин «блокировка рендеринга JavaScript»?

@ jaffa-the-cake просит кого-то в комментарии:

"Какую часть документации вы считаете неправильной?"

Давайте возьмем для примера эту документацию:

https://developers.google.com/speed/docs/insights/BlockingJS

А теперь давайте возьмем, к примеру, то, что они говорят о «отсрочке»:

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

Обратите внимание, что статья посвящена теме «Удалить блокировку рендеринга JavaScript», поэтому слово «может» означает, что вы МОЖЕТЕ использовать defer.

Используя «defer» для тега скрипта, вы НЕ будете откладывать «выполнение до окончания начальной загрузки страницы». Это может быть так, но не обязательно.

«Defer» будет откладывать выполнение до тех пор, пока начальный html не окажется в DOM, но это нечто иное, чем «render». Выполнение будет происходить после (предыдущего) html в DOM и перед DOMContentLoaded, но это не означает: «рендеринг страницы завершил загрузку». Было бы правильно, если бы они использовали термин «html-анализ страницы завершен».

Пример, который подтверждает теорию выше:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
    Some HTML line and this is above the fold
    <script src="script.js" defer></script>
</body>
</html>

SCRIPT.JS (из кеша!)

// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime(); 
while( new Date().getTime() - timeWhile < 5000 );

В случае, если браузер возьмет script.js из кэша, ПОСЛЕ 5 секунд будет отображаться «Некоторая строка HTML, и это выше сгиба»! Таким образом, это означает, что начальный рендер страницы еще не закончил загрузку (при использовании defer). Так что, на мой взгляд, это означает, что документация неверна.

постскриптум Без script.js из кэша браузер успеет закончить рендеринг предыдущего html. Сначала необходимо скачать файл script.js, что дает браузеру дополнительное время. Что касается кэширования, то между «выполненным анализом html» и началом «выполнения javascript» остается меньше времени, поэтому существует вероятность того, что «выполнение javascript» уже начинается до «завершения рендеринга предыдущего html». Так что в случае увеличения скорости вы можете даже рассмотреть в этом примере отключение кэширования, чтобы рендеринг предыдущего html был быстрее.

У меня есть намного больше тестов / примеров, которые доказывают, что другие части в другой документации (о рендеринге) Google неверны (по моему мнению), но я буду держать это ясно в этом посте, используя 1 пример.

Если вы не согласны со мной, пожалуйста, не указывайте только отрицательную репутацию, но, по крайней мере, прокомментируйте, почему вы считаете, что это неверно, и какой тест вы провели, чтобы подтвердить это. Я уже пытаюсь убедить некоторых людей в Google, что они неверны, на мой взгляд, но они как бы обижаются на это. Конечно, я бы не сказал, что они неверны, если бы я не потратил на это много времени / энергии / испытаний и был бы уверен в этом. До сих пор они говорят мне: «Считай, что это недоразумение может быть твоим», поэтому я чувствую себя маленьким мальчиком, «сражающимся» против большой стены. Для меня это не совсем правильно, но я вижу, как много людей вокруг меня (они уже много лет работают в IT) борются с предметным рендерингом, и я могу это понять, потому что документация по нему очень сбивает с толку. Именно поэтому я углубился в это, потому что это также становилось слишком запутанным для меня, поэтому я хотел понять это лучше. И если я ошибаюсь, просто убедите меня с аргументами, и я первый, кто скажет, что я был неправ.

 Maarten Bruins31 окт. 2017 г., 21:17
@dandavivs Вы также говорите: «что это не остановит рендеринг страницы». Просто посмотрите мой пример, и вы увидите, что он остановит рендеринг страницы. Так что, видимо, это сбивает с толку, потому что иначе вы бы этого не сказали.
 Maarten Bruins31 окт. 2017 г., 21:31
@Spencer Wieczorek Я читал это снова и снова, но я читаю это, как следует. Слово «МОЖЕТ» я вижу так, что вы МОЖЕТЕ использовать отсрочку. Позже они также говорят «Делать так». Другая документация подтверждает, что они имеют это в виду, но я должен искать это снова, поэтому я вернусь к этому.
 Maarten Bruins31 окт. 2017 г., 21:14
@Spencer Wieczorek Я также подумал, что они так думали, но потом я не понимаю, почему они не предлагают, например, решение «отключить кэширование», потому что, как вы можете видеть в примере, оно будет рендериться на 5 секунд раньше. в случае отсутствия кеширования. Поэтому существуют ситуации, когда подобное решение может ускорить рендеринг.
 dandavis31 окт. 2017 г., 21:09
приятно быть правым, но правильнее быть хорошим. Я не вижу никаких проблем с объяснением Google, не получаю жалобу. возможно это могло бы быть более явным, но я не думаю, что это неправильно, вообще. Кроме того, знаете ли вы, что тег defer'd может срабатывать через 5 минут после загрузки страницы и при этом оставаться в пределах спецификации проекта? Он срабатывает, когда прибывает. Все, что следует понимать, означает, что это нестой рендеринг страницы, что означает, что вы не можете использоватьdocument.write() и так далее.
 Spencer Wieczorek31 окт. 2017 г., 20:59
Вам нужно пойти и перечитать вашу цитату. Чтобы было ясно, я выделю то, что вам здесь не хватает:«Загрузка и выполнение сценариев, которые не нужны для начальной визуализации страницымай быть отложено до тех пор, пока не закончится загрузка начального рендера или других важных частей страницы. Это может помочь уменьшить конфликт ресурсов и повысить производительность »., Вы пытаетесь доказать утверждение, которое никогда не было сделано. Вы упоминаете«Это может быть так, но не обязательно», что буквально то, что цитата только что сказала.

Ответы на вопрос(1)

откуда вы и почему эта цитата может вводить в заблуждение. Для справки приведу приведенную ниже цитату с включенным названием:

Отложить загрузку JavaScript

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

Вы уже поняли это, но я свяжу это для ссылки накакdefer работает.

Как вы упомянули, да выполнение JavaScript вdefer и вообще блокировка рендера всегда, а точнееdefer не блокирует анализатор DOM.

Причина, по которой цитата вводит в заблуждение / сбивает с толку, заключается в том, что разделы выделены жирным шрифтом:

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

Секция«Загрузка и выполнение сценариев, которые не являются необходимыми для начального рендеринга страницы, могут быть отложены до окончания первоначального рендеринга», Хотя это и не неправильное утверждение, оно вводит в заблуждение, потому что прирост производительности действительно связан с тем, что синтаксический анализатор не блокируется.

Это можно четко показать, используяофициальная документация поdefer

Более прямой и более понятный способ описать это будет, как вы упомянули:

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

Это дает понять, что выигрыш в производительности связан с отложенным анализатором. Это также больше соответствует тому, какdefer спецификации описывают это и приличияdefer:

Еслиasync атрибут отсутствует, ноdefer атрибут присутствует, тогда классический скрипт будет извлечен параллельно и оценен после завершения анализа страницы. Если ни один из атрибутов не присутствует, сценарий извлекается и оценивается немедленно, блокируя синтаксический анализ до тех пор, пока они не будут завершены. (W3C)

 Maarten Bruins01 нояб. 2017 г., 16:57
Итак, вы хотите сделать из него: «Загрузка сценариев откладывается до момента первоначального рендеринга». В моем примере html является частью начального рендеринга, и загрузка script.js должна быть завершена до начального рендеринга, потому что выполнение блокирует его в моем примере. Это невозможно, если он еще не был загружен. Или я вас неправильно понял?
 Maarten Bruins01 нояб. 2017 г., 17:00
И вы говорите, что термин «блокировать рендеринг Javascript» относится к: и так далее. Я знаю, к чему это относится, но сам термин может быть неправильным. Javascript! = Загрузка Javascript ... яблоко - это фрукт, но фрукт - это не яблоко.
 Maarten Bruins01 нояб. 2017 г., 16:39
Это метафора: Google на самом деле говорит: я буду избегать, чтобы солнце светило / горит (блокировка рендеринга javascript). Тогда они перенесут вас в ночь и скажут: теперь мы избежали, чтобы солнце светило / жгло (отложите). Это неправильно, потому что солнце "всегда" светит / горит. Так что это действительно неправильно, если вы спросите меня. Вы не можете избежать того, что всегда так.
 Maarten Bruins01 нояб. 2017 г., 16:37
Теперь мы хотя бы говорим;), спасибо! У меня есть некоторые мысли об этом, но сначала, прежде чем дать ответ, я хочу получить от вас кое-что ясное, поэтому я знаю, как вы это имеете в виду. Как вы определяете нагрузку и как она связана с загрузкой? Но в любом случае, я также хочу сказать, что они начинают говорить о «отсрочке» как о решении избежать «блокирования рендеринга Javascript». Затем они должны были сказать «Render blocking loading». Вы можете увидеть мою метафору об этом в комментариях к вопросу на этой странице. В любом случае я повторю это для вас в моем следующем комментарии.
 Spencer Wieczorek01 нояб. 2017 г., 17:00
@MaartenB. Это означает, что после того, как этот источник был загружен и может быть выполнен, например, если вы загрузили файл, и вы не можете запустить его, пока он не будет полностью загружен. Что касается вашей метафоры да, выполнение JavaScript всегда будет отображать блок (солнце всегда светит). Хотя срок«Убрать рендер, блокирующий Javascript» на самом деле относится к самим файлам JavaScript и их загрузке, а не к тому, что выполняется JavaScript, который не блокирует рендеринг (что не соответствует действительности).

Ваш ответ на вопрос