高性能Javascript(1)

时间  2019-11-10
标签 高性能 javascript 栏目 JavaScript 繁體版
原文   原文链接

第一部分 加载与运行

<html> 
 <head> 
 <title>Script Example</title> 
 </head> 
 <body> 
 <p> 
 <script type="text/javascript"> 
document.write("The date is " + (new Date()).toDateString());
 </script> 
 </p> 
 </body> 
</html>

 　　当浏览器遇到一个<script>标签时，正如上面HTML页面中那样，没法预知JavaScript是否在<p>标签中添加内容。所以，浏览器停下来，运行此JavaScript代码，而后再继续解析、翻译页面。一样的事情发生在使用src属性加载JavaScript的过程当中。浏览器必须首先下载外部文件的代码，这要占用一些时间，而后解析并运行此代码。此过程当中，页面解析和用户交互是被彻底阻塞的。javascript

为了保持代码的类似性，咱们尽可能将相同的代码组织在一块儿，例如：css

<html> 
 <head> 
 <title>Script Example</title> 
<-- Example of inefficient script positioning --> 
<script type="text/javascript" src="file1.js"></script> 
<script type="text/javascript" src="file2.js"></script> 
 <script type="text/javascript" src="file3.js"></script> 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head> 
 <body> 
 <p>Hello world!</p> 
 </body> 
</html>

这些看起来比较规整的代码有一个明显的性能问题就是：在<head>部分加载了三个JavaScript文件。由于每一个<script>标签阻塞了页面的解析过程，直到它完整地下载并运行了外部JavaScript代码以后，页面处理才能继续进行。用户必须忍受这种能够察觉的延迟。请记住，浏览器在遇到<body>标签以前，不会渲染页面的任何部分。用这种方法把脚本放在页面的顶端，将致使一个能够察觉的延迟，一般表现为：页面打开时，首先显示为一幅空白的页面，而此时用户即不能阅读，也不能与页面进行交互操做。为了更好地理解此过程，咱们使用瀑布图来描绘每一个资源的下载过程。图1-1显示出页面加载过程当中，每一个脚本文件和样式表文件下载的过程。html

第一个JavaScript文件开始下载，并阻塞了其余文件的下载过程。进一步，在file1.js下载完以后和file2.js开始下载以前有一个延时，这是file1.js彻底运行所需的时间。每一个
文件必须等待前一个文件下载完成并运行完以后，才能开始本身的下载过程。当这些文件下载时，用户面对一个空白的屏幕。这就是今天大多数浏览器的行为模式。Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2容许并行下载JavaScript文件。这个好消息代表，当一个<script>标签正在下载外部资源时，没必要阻塞其余<script>标签。不幸的是，JavaScript的下载仍然要阻塞其余资源的下载过程，例如图片。即便脚本之间的下载过程互不阻塞，页面仍旧要等待全部JavaScript代码下载并执行完成以后才能继续。因此，当浏览器经过容许并行下载提升性能以后，该问题并无彻底解决。由于脚本阻塞其余页面资源的下载过程，因此推荐的办法是：将全部<script>标签放在尽量接近<body>标签底部的位置，尽可能减小对整个页面下载的影响。例如java

<html> 
 <head> 
 <title>Script Example</title> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
 </head> 
 <body> 
 <p>Hello world!</p> 
<-- Example of recommended script positioning --> 
<script type="text/javascript" src="file1.js"></script> 
<script type="text/javascript" src="file2.js"></script> 
<script type="text/javascript" src="file3.js"></script>
 </body> 
</html>

 此代码展现了所推荐的<script>标签在HTML文件中的位置。尽管脚本下载之间互相阻塞，但页面已经下载完成而且显示在用户面前了，进入页面的速度不会显得太慢。这正是“Yahoo! 优越性能小组”关于JavaScript的第一条定律：将脚本放在底部。git

另外，浏览器请求4个25K的外部JS文件的速度要慢于请求1个100K的js文件，所以，咱们应该尽可能将JS文件包含在一个中加载。（每一个HTTP请求都会产生额外的性能负担，下载
一个100KB的文件比下载四个25KB的文件要快）。github

1.1 Nonblocking Scripts 非阻塞脚本

Deferred Scripts 延期脚本shell

HTML 4为<script>标签订义了一个扩展属性：defer。这个defer属性指明元素中所包含的脚本不打算修改DOM，所以代码能够稍后执行。defer属性只被Internet Explorer 4和Firefox 3.5更高版本的浏览器所支持，它不是一个理想的跨浏览器解决方案。在其余浏览器上，defer属性被忽略，<script>标签按照默认方式被处理（形成阻塞）。若是浏览器支持的话，这种方法还是一种有用的解决方案。示例以下：浏览器


<script type="text/javascript" src="file1.js" defer></script>缓存

一个带有defer属性的<script>标签能够放置在文档的任何位置。对应的JavaScript文件将在<script>被解时启动下载，但代码不会被执行，直到DOM加载完成（在onload事件句柄被调用以前）。当一个defer的JavaScript文件被下载时，它不会阻塞浏览器的其余处理过程，因此这些文件能够与页面的其余资源一块儿并行下载.(须要理解的是一个<script>脚本的执行时间包含两部分，（1）请求加载时间（2）JS执行时间。defer的做用是延迟JS的执行时间。任何带有defer属性的<script>元素在DOM加载完成以前不会被执行，不管是内联脚本仍是外部脚本文件，都是这样。下面的例子展现了defer属性如何影响脚本行为。服务器

<html> 
 <head> 
 <title>Script Defer Example</title> 
 </head> 
 <body> 
 <script defer> 
 alert("defer"); 
 </script> 
 <script> 
 alert("script"); 
 </script> 
 <script> 
 window.onload = function(){ 
 alert("load"); 
 }; 
 </script>
 </body> 
</html>

 这些代码在页面处理过程当中弹出三个对话框。若是浏览器不支持defer属性，那么弹出对话框的顺序是“defer”，“script”和“load”。若是浏览器支持defer属性，那么弹出对话框的顺序是“script”，“defer”和“load”。注意，标记为defer的<script>元素不是跟在第二个后面运行，而是在onload事件句柄处理以前被调用。

Dynamic Script Elements 动态脚本元素

文档对象模型（DOM）容许你使用JavaScript动态建立HTML的几乎所有文档内容。其根本在于，<script>元素与页面其余元素没有什么不一样：引用变量能够经过DOM进行检索，能够从文档中移动、删除，也能够被建立。一个新的<script>元素能够很是容易地经过标准DOM函数建立

 

var script = document.createElement ("script"); 
script.type = "text/javascript"; 
script.src = "file1.js"; 
document.getElementsByTagName_r("head")[0].appendChild(script);

 

新的<script>元素加载file1.js源文件。此文件当元素添加到页面以后马上开始下载。此技术的重点在于：不管在何处启动下载，文件的下载和运行都不会阻塞其余页面处理过程。

你甚至能够将这些代码放在<head>部分而不会对其他部分的页面代码形成影响（除了用于下载文件的HTTP链接）

大多数状况下，你但愿调用一个函数就能够实现JavaScript文件的动态加载。下面的函数封装了标准实现和IE实现所需的功能：

function loadScript(url, callback){ 
 var script = document.createElement ("script") 
 script.type = "text/javascript"; 
 if (script.readyState){ //IE 
  script.onreadystatechange = function(){ 
  if (script.readyState == "loaded" || script.readyState == "complete"){ 
  script.onreadystatechange = null; 
  callback(); 
  } 
}; 
 } else { //Others 
  script.onload = function(){ 
  callback(); 
}; 
 } 
 script.src = url; 
 document.getElementsByTagName_r("head")[0].appendChild(script); 
}

 1.2 XMLHttpRequest Script Injection  XHR脚本注入

另外一个以非阻塞方式得到脚本的方法是使用XMLHttpRequest(XHR)对象将脚本注入到页面中。此技术首先建立一个XHR对象，而后下载JavaScript文件，接着用一个动态<script>元素将JavaScript代码注入页面。下面是一个简单的例子：

var xhr = new XMLHttpRequest(); 
xhr.open("get", "file1.js", true); 
xhr.onreadystatechange = function(){ 
 if (xhr.readyState == 4){ 
 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ 
 var script = document.createElement ("script"); 
 script.type = "text/javascript"; 
 script.text = xhr.responseText; 
 document.body.appendChild(script); 
 } 
 } 
}; 
xhr.send(null);

 此代码向服务器发送一个获取file1.js文件的GET请求。onreadystatechange事件处理函数检查readyState是否是4，而后检查HTTP状态码是否是有效（2XX表示有效的回应，304表示一个缓存响应）。若是收到了一个有效的响应，那么就建立一个新的<script>元素，将它的文本属性设置为从服务器接收到的responseText字符串。这样作实际上会建立一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档，代码将被执行，并准备使用。

这种方法的主要优势是，你能够下载不当即执行的JavaScript代码。因为代码返回在<script>标签以外（换句话说不受<script>标签约束），它下载后不会自动执行，这使得你能够推迟执行，直到一切都准备好了。另外一个优势是，一样的代码在全部现代浏览器中都不会引起异常。此方法最主要的限制是：JavaScript文件必须与页面放置在同一个域内，不能从CDNs下载（CDN指“内容投递网络（Content Delivery Network）”，前面002篇《成组脚本》一节提到）。正由于这个缘由，大型网页一般不采用XHR脚本注入技术。

1.3 Recommended Nonblocking Pattern 推荐的非阻塞模式

推荐的向页面加载大量JavaScript的方法分为两个步骤：第一步，包含动态加载JavaScript所需的代码，而后加载页面初始化所需的除JavaScript以外的部分。这部分代码尽可能小，可能只包含loadScript()函数，它下载和运行很是迅速，不会对页面形成很大干扰。当初始代码准备好以后，用它来加载其他的JavaScript。
例如：

 

<script type="text/javascript" src="loader.js"></script> 
<script type="text/javascript"> 
 loadScript("the-rest.js", function(){ 
 Application.init(); 
 }); 
</script>

 

 将此代码放置在body的关闭标签</body>以前。这样作有几点好处：首先，像前面讨论过的那样，这样作确保JavaScript运行不会影响页面其余部分显示。其次，当第二部分JavaScript文件完成下载，全部应用程序所必须的DOM已经建立好了，并作好被访问的准备，避免使用额外的事件处理（例如window.onload）来得知页面是否已经准备好了

1.4 The LazyLoad library && The LABjs library

 

做为一个更通用的工具，Yahoo! Search的Ryan Grove建立了LazyLoad库（参见http://github.com/rgrove/lazyload/）。LazyLoad是一个更强大的loadScript()函数。LazyLoad精缩以后只有大约1.5KB（精缩，而不是用gzip压缩的）。具体用法再也不赘述，请参考详细文档说明。

另外一个非阻塞JavaScript加载库是LABjs（http://labjs.com/），Kyle Simpson写的一个开源库，由Steve Souders赞助。此库对加载过程进行更精细的控制，并尝试并行下载尽量多的代码。LABjs也至关小，只有4.50KB（精缩，而不是用gzip压缩的），因此具备最小的页面代码尺寸

Summary

管理浏览器中的JavaScript代码是个棘手的问题，由于代码执行阻塞了其余浏览器处理过程，诸如用界面绘制。每次遇到<script>标签，页面必须停下来等待代码下载（若是是外部的）并执行，而后再继续处理页面其余部分。可是，有几种方法能够减小JavaScript对性能的影响：

 

[1] 将全部<script>标签放置在页面的底部，紧靠body关闭标签</body>的上方。此法能够保证页面在脚本运行以前完成解析。

[2] 将脚本成组打包。页面的<script>标签越少，页面的加载速度就越快，响应也更加迅速。不论外部脚本文件仍是内联代码都是如此.

[3] 有几种方法可使用非阻塞方式下载JavaScript：
　　——为<script>标签添加defer属性（只适用于Internet Explorer和Firefox 3.5以上版本）
　　——动态建立<script>元素，用它下载并执行代码
　　——用XHR对象下载代码，并注入到页面中

 

MORE REFERANCE

http://coolshell.cn/articles/9749.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程