Google использует отсрочку неправильно?

См.: https://developers.google.com/maps/documentation/javascript/tutorial< /а>

Google использует здесь:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>

Мой вопрос: почему Google использует «отложить», потому что, по моему мнению, он ничего не делает в приведенном выше сценарии?

Давайте сравним это (1):

<script src="script.js" defer></script>
</body>
</html>

С этим (2):

<script src="script.js"></script>
</body>
</html>

Единственное отличие состоит в том, что при выполнении «script.js» в случае: (1) вы будете уверены, что «конец тега body» и «конец тега html» еще не находятся в DOM. В случае (1) эти теги уже находятся в DOM при выполнении «script.js». Но конец тега body / html ничего не изменит на вашем экране (рендеринг), поэтому эти теги фактически не влияют на «рендеринг». Таким образом, теоретически между этими двумя примерами есть небольшая разница, но на практике разницы нет вообще.

Итак, что может быть причиной использования отсрочки? Вернемся в историю. Если бы вы использовали в старых браузерах:

<script src="script.js"></script>
</body>
</html>

Проблема заключалась в том, что у вас не было «сканеров предварительной загрузки». Они могут сканировать документ (параллельно), искать загрузки для начала уже. Старый браузер впервые увидит «script.js», когда «анализатор HTML» достигнет этой части документа. Это довольно поздно, чтобы начать загрузку и пустая трата времени. Вот почему они придумали «отложить», чтобы вы могли разместить тег скрипта в начале документа, но выполнение происходило бы, когда парсер html будет делать со всем документом (чтобы он не блокировал парсер html ).

Для более новых браузеров «отложить» в любом случае не имеет смысла, потому что вы можете просто использовать «тег сценария синхронизации» непосредственно перед концом страницы. «Сканер предварительной загрузки» начнет загрузку почти сразу. И поскольку вы размещаете его в конце документа, выполнение скрипта не будет блокировать анализатор html (за исключением end body/html, но эти теги в любом случае не будут влиять на рендеринг).

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

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

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

Так что мне кажется, что Google не очень понимает значение слова «отложить», потому что зачем им его добавлять? Это ничего не делает. Или это неправильное мнение обо мне?

Это еще несколько вопросов/сообщений от меня, где у меня все равно есть сомнения относительно того, что Google говорит о рендеринге и использовании отсрочки/асинхронности и так далее:

Google ошибается насчет отсрочки?

Почему браузер не всегда завершаете рендеринг предшествующего HTML перед выполнением javascript?

Принудительные внешние блокирующие сценарии браузеру ждать, прежде чем страница сможет быть отображена?

Последствия javascript могут иметь document.write в коде?

Динамически создаваемые скрипты не блокируют рендеринг?

Загрузка внешнего javascript через асинхронный скрипт тег в конце веб-страницы

Вот почему я хотел проверить, как Google создает свои собственные скрипты, и после одного поиска в Google я уже нашел этот пример со странным для меня использованием «отложить».

В любом случае, может быть причина для его использования, но Google не может указать правильную причину. В документации Google рассказывает историю, которую я рассказывал вам в этом посте/вопросе. Но это не причина использовать "отсрочку" таким образом.

Я знаю, что разные браузеры по-разному обрабатывают «отложить», поэтому, возможно, именно поэтому Google использует его. Но тогда их документация не дает правильных причин. И тогда мой вопрос в том, что это за причина?

Так кто знает об этом больше? Или "отсрочка" действительно ни к чему в скрипте гугла?


person Maarten Bruins    schedule 02.11.2017    source источник


Ответы (1)


Я думал об этом, и я попытаюсь ответить на свой вопрос;). Вероятно, Google думает, что люди будут копировать/вставлять этот код:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

... и просто добавьте его где-нибудь на странице. Так что в таком случае "отсрочка" имеет смысл.

На самом деле, если у вас есть 1 тег сценария в конце документа, и вы используете для него «асинхронность», это также не имеет смысла. Но это имеет смысл, если тег скрипта не находится в конце документа.

Но если бы я был Google, я бы все равно добавил об этом примечание, потому что, если вы крупная компания, люди проверяют примеры и ценят это. Я сам знаю вебмастеров, которые просто добавляют async/defer в тег скрипта, в конец документа, пока он единственный. Вы можете подумать: но он ничего не делает, так в чем же проблема? Например, асинхронность может просто добавить небольшую дополнительную задержку перед выполнением JavaScipt (по сравнению с синхронизацией). Поэтому в таком случае может быть лучше использовать синхронизацию с точки зрения скорости страницы, а не асинхронность в вашем теге скрипта.

person Maarten Bruins    schedule 02.11.2017