移除会阻止内容呈现的 JavaScript

<ph type="x-smartling-placeholder">。 当 PageSpeed Insights 检测到以下情形时，就会触发此规则：您的 HTML 引用了 将外部 JavaScript 文件添加到网页的首屏部分中。

概览

浏览器必须先通过解析 HTML 标记来构建 DOM 树，然后才能呈现网页。 在此过程中，每当解析器遇到脚本时，都必须停止并执行该脚本。 然后才能继续解析 HTML。如果是外部脚本，解析器也会 系统必须等待资源下载完毕，这可能会引发一次或多次网络往返，并且 延迟网页首次呈现的时间 请参阅 使用 JavaScript 添加互动功能，详细了解 JavaScript 对 呈现路径

建议

您应该避免使用会阻止内容呈现的 JavaScript，尤其是 必须先提取，然后才能执行。用于呈现网页内容的脚本可内嵌到网页中，以避免产生额外的网络请求，但内嵌的内容不能太大，而且必须可被快速执行以提供良好的性能。对初次呈现不重要的脚本应设为异步加载，或推迟到首次呈现完毕后再开始加载。请注意 为了缩短加载时间，您还必须 优化 CSS 发送。

内嵌 JavaScript

阻止访问的外部脚本会强制浏览器等待获取 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 会阻止 DOM 构建，因而会导致首次渲染的时间延迟。接收者 防止 JavaScript 阻止解析器，我们建议使用 HTML async 属性。例如：
<script async src="my.js">
请参阅 解析器阻止 JavaScript 与异步 JavaScript，详细了解异步脚本。 请注意，异步脚本不保证会按指定顺序执行，因此不应使用 document.write。依赖于执行顺序或需要访问或修改的脚本 考虑到这些限制，可能需要重写页面的 DOM 或 CSSOM。

延迟加载 JavaScript

首次呈现网页时并不需要的脚本的加载和执行 推迟到初始呈现或网页的其他关键部分完成后 正在加载。这样做有助于减少资源争用并提高性能。

常见问题解答

如果我使用的是 JavaScript 库（例如 jQuery），该怎么做？
很多 JavaScript 库（例如 JQuery）都用于增强网页， 提供额外的互动性、动画和其他效果然而，其中许多 行为，便可以在首屏内容呈现后安全地添加。 请考虑将此类 JavaScript 设为异步加载或延迟其加载。
如果我使用 JavaScript 框架来构建网页，该如何操作？
如果网页内容由客户端 JavaScript 构建， 那么您应考虑内联相关的 JavaScript 模块，以避免产生额外的 网络往返次数同样，利用服务器端呈现可显著提升网页的首次加载速度，具体方法如下：在服务器上呈现 JavaScript 模板以加快首次呈现速度，然后在网页加载完毕后使用客户端模板。有关 有关服务器端呈现的信息，请参见 http://youtu.be/VKTWdaupft0?t=14m28s.

反馈

此页内容对您有帮助吗？

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">