Удалить JavaScript, блокирующий рендеринг

On this page
Это правило срабатывает, когда PageSpeed Insights обнаруживает, что ваш HTML ссылается на заблокированный системой внешний файл JavaScript (расположенный в разделе первого экрана веб-страницы).

Обзор

浏览器必须先解析网页，然后才能将其呈现给用户。如果浏览器在解析过程中遇到系统阻止的外部脚本，必须停止解析并且下载该JavaScript。每次遇到这种情况时，浏览器都会增加一个网络往返过程，这样就会导致首次呈现网页的时间延迟。

建议

Рекомендуется обрабатывать JavaScript, необходимый для отображения области первого экрана, встроенным способом, и задерживать загрузку JavaScript, необходимый для добавления дополнительных функций для веб-страницы, пока содержимое первого экрана не будет отправлено. Отметим, что для сокращения времени загрузки таким образом вам также придется Оптимизация процесса передачи CSS.

Встроенный JavaScript меньшего размера

Если внешние скрипты меньше, вы можете добавить их прямо в HTML-документ. Вставка меньших файлов таким образом позволяет браузеру продолжать представлять веб-страницы. Например, если HTML-документ выглядит так:

< html > < head > < script type="text/javascript "src="small.js" > < /script > < /head > < body > < div > Hello, world! < /div > < /body > < /html >

资源small.jsЭто выглядит следующим образом:

/* contents of a small JavaScript file */

Тогда вы можете встроить скрипт следующим образом:

< html > < head > < script type = "text/javascript" > /* contents of a small JavaScript file */ < /script > < /head > < body > < div > Hello, world! < /div > < /body > < /html >

这样，您就可以将small.js内嵌在HTML文档中，从而消除对它的外部请求。

延迟加载JavaScript

Чтобы JavaScript не блокировал загрузку веб-страниц, рекомендуется использовать асинхронное свойство HTML при загрузке JavaScript. Например:

< script async src = "my.js" >

如果您的JavaScript资源使用的是document.write，则使用异步加载就会不安全。我们建议您重写使用document.write的脚本，以改用其他技术。

此外，异步加载JavaScript时，如果您的网页加载互相依赖的脚本，请务必谨慎，以确保您的应用以合适的依赖顺序加载脚本。

常见问题解答

Что делать, если я использую библиотеку JavaScript (например, jQuery)?
Многие библиотеки JavaScript (например, jQuery) могут быть использованы для улучшения веб-страниц, что добавляет им дополнительную интерактивность, анимацию и другие эффекты. Однако большинство из этих действий можно безопасно добавлять после того, как контент на первом экране будет представлен. Рассмотрим, можно ли отложить выполнение и загрузку таких JavaScript до загрузки веб-страницы.
如果我使用JavaScript框架来构造网页，该如何操作？
如果网页内容由客户端JavaScript构造，那么您应考虑一下是否可以嵌入相关的JavaScript模块，从而避免产生额外的网络往返过程。同样，利用服务器端呈现可显著提升首次网页加载的效果，方式如下：在服务器上呈现JS模板，并将结果内嵌到HTML，然后在应用加载后使用客户端模板。有关服务器端呈现的详情，请参见http://youtu.be/VKTWdaupft0?t=14m28s。

 

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.