移除阻止呈现的JavaScript

本页内容
当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阻止网页加载，建议您在加载JavaScript时使用HTML异步属性。例如：

<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 the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.