Defer, Async и PageSpeed Insights

Question

Defer, Async и PageSpeed Insights

0

Я пытаюсь оптимизировать скорость загрузки страницы, используя рекомендации по параметрам PageSpeed Insights, в частности, отложить сценарии JavaScripts, чтобы не блокировать отображение содержимого страницы.

Таким образом, похоже, что HTML5 представил функцию preatty cool, async атрибут, который позволяет загружать скрипты асинхронно в "хаотичном" режиме. Существует еще один атрибут, defer, который загружает их также асинхронно, но в "упорядоченном" режиме (как я понял из этой статьи).

Итак, я пришел к выводу, что

Всегда используйте (для каждого <script src='//////my.js'>) в defer атрибута.
В случае, если сценарий не является критическим для нагрузки (например, jQuery или jQuery-ui), можно использовать атрибут async.

Это правильный вывод?

PS.

Бесплатный вопрос:
Является ли факт добавления сценариев в конце документа, автоматически "разблокирует" оформление документа? Как я мог понять, некоторые скрипты блокируют рендеринг, без различия их местоположения в документе (<head> или непосредственно перед </body>)...

serhio 25 апр. 2014, в 16:03

Источник

0

Почему бы jQuery не быть «критичным к нагрузке», если вы используете $ а он не загружен, мне это кажется довольно критичным?
adeneo 25 апр. 2014, в 13:36
0

нагрузка критическая, как у jQuery :)
serhio 25 апр. 2014, в 13:37
0

@serhio Я прочитал это как "не критично, как jquery"
Jason P 25 апр. 2014, в 13:39
0

О, хорошо, тогда что неправильно прочитал? Почему бы просто не добавить сценарии в правильном порядке непосредственно перед </body> , проблема решена?
adeneo 25 апр. 2014, в 13:39
0

Defer может быть использован для предотвращения блокировки загрузки страницы, когда скрипт загружен, это правильный подход. Лично я думаю, что вы должны использовать только асинхронные сценарии, которые добавляют функции на страницу, когда она уже загружена, но никогда не используйте ее в сценарии, который необходим для запуска других сценариев. Также обратите внимание, что не каждый браузер поддерживает эту функцию.
user3417400 25 апр. 2014, в 13:40
0

@serhio Если возможно, уточните требование? а) Загрузка (скрипт) элементов в документ в синхронном порядке? б) Загрузка (скрипт) элементов в асинхронном порядке? в) оба а) и б), в зависимости от сценария? Спасибо
guest271314 25 апр. 2014, в 21:37

Показать ещё 4 комментария

Теги:

javascript

jquery

html5

asynchronous

1 ответ

Ещё вопросы

Почему бы jQuery не быть «критичным к нагрузке», если вы используете $ а он не загружен, мне это кажется довольно критичным?
нагрузка критическая, как у jQuery :)
@serhio Я прочитал это как "не критично, как jquery"
О, хорошо, тогда что неправильно прочитал? Почему бы просто не добавить сценарии в правильном порядке непосредственно перед </body> , проблема решена?
Defer может быть использован для предотвращения блокировки загрузки страницы, когда скрипт загружен, это правильный подход. Лично я думаю, что вы должны использовать только асинхронные сценарии, которые добавляют функции на страницу, когда она уже загружена, но никогда не используйте ее в сценарии, который необходим для запуска других сценариев. Также обратите внимание, что не каждый браузер поддерживает эту функцию.
@serhio Если возможно, уточните требование? а) Загрузка (скрипт) элементов в документ в синхронном порядке? б) Загрузка (скрипт) элементов в асинхронном порядке? в) оба а) и б), в зависимости от сценария? Спасибо

zzzzBov · Answer 1 · 2014-04-25T10-43-00.000Z

1. Всегда используйте (для каждого <script src='//////my.js'>) атрибут <script src='//////my.js'>.

Вы должны только откладывать сценарии, которые можно отложить. В некоторых случаях вам может потребоваться гарантировать порядок выполнения или полагаться на функции, которые должны выполняться в строке. Например, скрипты, вызывающие document.write не должны откладываться.

2. В случае, если сценарий не является критическим для нагрузки (например, jQuery или jQuery-ui), может использоваться атрибут async.

"критическая нагрузка" не имеет какого-либо конкретного значения, поэтому это плохой выбор фразировки. async следует использовать для скриптов, которые могут выполняться в любом порядке и не зависят от других скриптов.

как я понял, 'defer' гарантирует порядок выполнения "между различными сценариями" ... Я согласен, что если это "явно встроенный" сценарий, defer не должен использоваться ... но иногда его сложно узнать априори ...
@serhio, то, что я имел в виду под «порядком гарантированного выполнения», заключается в том, что скрипт может полагаться на состояние DOM до того, как DOM завершит загрузку. Даже если другие сценарии будут выполняться в том же порядке, DOM будет находиться в другом состоянии из-за отсрочки.
Сценарии defer гарантированно выполняются в том порядке, в котором они встречаются на странице. Это выполнение начинается после того, как синтаксический анализ полностью завершен, но до события DOMContentLoaded документа. как в webkit.org/blog/1395/running-scripts-in-webkit
К счастью, есть довольно много сценариев, которые используют document.write (по крайней мере, в моих проектах). Но jQuery, я могу использовать с отложенным?