移除阻止呈现的JavaScript

时间 2019-11-09

标签移除阻止呈现 javascript 栏目 JavaScript 繁體版

原文原文链接

我的原创网址： http://www.phpthinking.com/archives/443javascript

浏览器必须先解析网页，而后才能将其呈现给用户。若是浏览器在解析过程当中遇到系统阻止的外部脚本，必须中止解析而且下载该JavaScript。每次遇到这种状况时，浏览器都会增长一个网络往返过程，这样就会致使首次呈现网页的时间延迟。php

建议

建议您之内嵌方式处理呈现首屏区域所需的JavaScript，并让为网页添加其余功能所需的JavaScript延迟加载，直到首屏内容发送完毕为止。请注意，要经过这种方式缩短加载时间，您还必须优化CSS发送过程。html

内嵌较小的JavaScript

若是外部脚本较小，您能够直接将它们添加到HTML文档。经过这种方式内嵌较小文件可以让浏览器继续呈现网页。例如，若是HTML文档以下所示：java

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

资源small.js以下所示：浏览器

  /* contents of a small JavaScript file */

那么，您便可按以下这样内嵌脚本：安全

<html>  <head>    <scripttype="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，而后在应用加载后使用客户端模板。