).
м посте:
Почему 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) борются с предметным рендерингом, и я могу это понять, потому что документация по нему очень сбивает с толку. Именно поэтому я углубился в это, потому что это также становилось слишком запутанным для меня, поэтому я хотел понять это лучше. И если я ошибаюсь, просто убедите меня с аргументами, и я первый, кто скажет, что я был неправ.