Author:小欧2013-09-17

随着科技的发展，如今的网站和五六年前相比，现在的人们对web的要求越来越高了，用户体验，交互效果，视觉效果等等都有很高的要求，要实现这些功能我们最就需要用到javascript，这时候JS的性能优化就越来越重要了，今天在这里给大家转载一篇IBM开发人员写的怎么优化javascript文章，我觉得写的挺好，希望对大家有所帮助。

无论当前JavaScript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或JavaScript的命名空间，它们对后面页面内容造成影响。一个典型的例子就是在页面中使用document.write()。

JavaScript 代码内嵌示例

  1. <html>
  2. <head>
  3. <title>Source Example</title>
  4. </head>
  5. <body>
  6. <p>
  7. <script type="text/javascript">
  8. document.write("Today is " + (new Date()).toDateString());
  9. </script>
  10. </p>
  11. </body>
  12. </html>

当浏览器遇到script标签时，当前 HTML 页面无从获知 JavaScript 是否会向<p> 标签添加内容，或引入其他元素，或甚至移除该标签。因此，这时浏览器会停止处理页面，先执行 JavaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。

脚本位置

HTML 4 规范指出 script 标签可以放在 HTML 文档的head或body中，并允许出现多次。Web 开发人员一般习惯在 head 中加载外链的 JavaScript，接着用 <link> 标签用来加载外链的 CSS 文件或者其他页面信息。

  1. <html>
  2. <head>
  3. <title>Source Example</title>
  4. <script type="text/javascript" src="script1.js"></script>
  5. <script type="text/javascript" src="script2.js"></script>
  6. <script type="text/javascript" src="script3.js"></script>
  7. <link rel="stylesheet" type="text/css" href="styles.css">
  8. </head>
  9. <body>
  10. <p>Hello world!</p>
  11. </body>
  12. </html>

然而这种常规的做法却隐藏着严重的性能问题。在清单 2 的示例中，当浏览器解析到 script 标签（第 4 行）时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的 styles.css 样式文件和body标签都无法被加载，由于body标签无法被加载，那么页面自然就无法渲染了。因此在该 JavaScript 代码完全执行完之前，页面都是一片空白。

图 1 描述了页面加载过程中脚本和样式文件的下载过程。

从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件。这是个好消息，因为script标签在下载外部资源时不会阻塞其他script标签。遗憾的是，JavaScript 下载过程仍然会阻塞其他资源的下载，比如样式文件和图片。尽管脚本的下载过程不会互相影响，但页面仍然必须等待所有 JavaScript 代码下载并执行完成才能继续。因此，尽管最新的浏览器通过允许并行下载提高了性能，但问题尚未完全解决，脚本阻塞仍然是一个问题。

我们可以发现一个有趣的现象：第一个 JavaScript 文件开始下载，与此同时阻塞了页面其他文件的下载。此外，从 script1.js 下载完成到 script2.js 开始下载前存在一个延时，这段时间正好是 script1.js 文件的执行过程。每个文件必须等到前一个文件下载并执行完成才会开始下载。在这些文件逐个下载过程中，用户看到的是一片空白的页面。

由于脚本会阻塞页面其他资源的下载，因此推荐将所有script标签尽可能放到body标签的底部，以尽量减少对整个页面下载的影响。请看下面推荐的代码放置位置示例

  1. <html>
  2. <head>
  3. <title>Source Example</title>
  4. <link rel="stylesheet" type="text/css" href="styles.css">
  5. </head>
  6. <body>
  7. <p>Hello world!</p>
  8. <!-- Example of efficient script positioning -->
  9. <script type="text/javascript" src="script1.js"></script>
  10. <script type="text/javascript" src="script2.js"></script>
  11. <script type="text/javascript" src="script3.js"></script>
  12. </body>
  13. </html>

这段代码展示了在 HTML 文档中放置script标签的推荐位置。尽管脚本下载会阻塞另一个脚本，但是页面的大部分内容都已经下载完成并显示给了用户，因此页面下载不会显得太慢。这是优化 JavaScript 的首要规则：将脚本放在底部。

组织脚本

由于每个script标签初始下载时都会阻塞页面渲染，所以减少页面包含的script标签数量有助于改善这一情况。这不仅针对外链脚本，内嵌脚本的数量同样也要限制。浏览器在解析 HTML 页面的过程中每遇到一个script标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。

这个问题在处理外链 JavaScript 文件时略有不同。考虑到 HTTP 请求会带来额外的性能开销，因此下载单个 100Kb 的文件将比下载 5 个 20Kb 的文件更快。也就是说，减少页面中外链脚本的数量将会改善性能。

通常一个大型网站或应用需要依赖数个 JavaScript 文件。您可以把多个文件合并成一个，这样只需要引用一个script标签，就可以减少性能消耗。文件合并的工作可通过离线的打包工具或者一些实时的在线服务来实现。

需要特别提醒的是，把一段内嵌脚本放在引用外链样式表的link之后会导致页面阻塞去等待样式表的下载。这样做是为了确保内嵌脚本在执行时能获得最精确的样式信息。因此，建议不要把内嵌脚本紧跟在link标签后面。

无阻塞的脚本

减少 JavaScript 文件大小并限制 HTTP 请求数在功能丰富的 Web 应用或大型网站上并不总是可行。Web 应用的功能越丰富，所需要的 JavaScript 代码就越多，尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载 JavaScript 文件，这样做在某种程度上来说不会阻塞浏览器。

无阻塞脚本的秘诀在于，在页面加载完成后才加载 JavaScript 代码。这就意味着在 window 对象的 onload事件触发后再下载脚本。有多种方式可以实现这一效果。

延迟加载脚本

HTML 4 为script标签定义了一个扩展属性：defer。Defer 属性指明本元素所含的脚本不会修改 DOM，因此代码能安全地延迟执行。defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer 属性会被直接忽略，因此script标签会以默认的方式处理，也就是说会造成阻塞。然而，如果您的目标浏览器支持的话，这仍然是个有用的解决方案。请看代码：

  1. <script type="text/javascript" src="script1.js" defer></script>

带有 defer 属性的script标签可以放置在文档的任何位置。对应的 JavaScript 文件将在页面解析到script标签时开始下载，但不会执行，直到 DOM 加载完成，即onload事件触发前才会被执行。当一个带有 defer 属性的 JavaScript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。

任何带有 defer 属性的script元素在 DOM 完成加载之前都不会被执行，无论内嵌或者是外链脚本都是如此。清单 5 的例子展示了defer属性如何影响脚本行为：

  1. <html>
  2. <head>
  3. <title>Script Defer Example</title>
  4. </head>
  5. <body>
  6. <script type="text/javascript" defer>
  7. alert("defer");
  8. </script>
  9. <script type="text/javascript">
  10. alert("script");
  11. </script>
  12. <script type="text/javascript">
  13. window.onload = function(){
  14. alert("load");
  15. };
  16. </script>
  17. </body>
  18. </html>

这段代码在页面处理过程中弹出三次对话框。不支持 defer 属性的浏览器的弹出顺序是：“defer”、“script”、“load”。而在支持 defer 属性的浏览器上，弹出的顺序则是：“script”、“defer”、“load”。请注意，带有 defer 属性的script元素不是跟在第二个后面执行，而是在 onload 事件被触发前被调用。

如果您的目标浏览器只包括 Internet Explorer 和 Firefox 3.5，那么 defer 脚本确实有用。如果您需要支持跨领域的多种浏览器，那么还有更一致的实现方式。

HTML 5 为script标签定义了一个新的扩展属性：async。它的作用和 defer 一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。但是有一点需要注意，在有 async 的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。

动态脚本元素

文档对象模型（DOM）允许您使用 JavaScript 动态创建 HTML 的几乎全部文档内容。script元素与页面其他元素一样，可以非常容易地通过标准 DOM 函数创建：

  1. var script = document.createElement ("script");
  2. script.type = "text/javascript";
  3. script.src = "script1.js";
  4. document.getElementsByTagName("head")[0].appendChild(script);

新的script元素加载 script1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在head部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了 Firefox 和 Opera，他们将等待此前的所有动态脚本节点执行完毕）。当脚本是“自运行”类型时，这一机制运行正常，但是如果脚本只包含供页面其他脚本调用调用的接口，则会带来问题。这种情况下，您需要跟踪脚本下载完成并是否准备妥善。可以使用动态 script 节点发出事件得到相关信息。

Firefox、Opera, Chorme 和 Safari 3+会在script节点接收完成之后发出一个 onload 事件。您可以监听这一事件，以得到脚本准备好的通知：

  1. var script = document.createElement ("script")
  2. script.type = "text/javascript";
  3. //Firefox, Opera, Chrome, Safari 3+
  4. script.onload = function(){
  5. alert("Script loaded!");
  6. };
  7. script.src = "script1.js";
  8. document.getElementsByTagName("head")[0].appendChild(script);

Internet Explorer 支持另一种实现方式，它发出一个 readystatechange 事件。script元素有一个 readyState 属性，它的值随着下载外部文件的过程而改变。readyState 有五种取值：

“uninitialized”：默认状态

“loading”：下载开始

“loaded”：下载完成

“interactive”：下载完成但尚不可用

“complete”：所有数据已经准备好

微软文档上说，在script元素的生命周期中，readyState 的这些取值不一定全部出现，但并没有指出哪些取值总会被用到。实践中，我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个 readyState 值所表示的最终状态并不一致，有时script元素会得到“loader”却从不出现“complete”，但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在 readystatechange 事件中检查这两种状态，并且当其中一种状态出现时，删除 readystatechange 事件句柄（保证事件不会被处理两次）：

通过检查 readyState 状态加载 JavaScript 脚本：

  1. var script = document.createElement("script")
  2. script.type = "text/javascript";
  3. //Internet Explorer
  4. script.onreadystatechange = function(){
  5. if (script.readyState == "loaded" || script.readyState == "complete"){
  6. script.onreadystatechange = null;
  7. alert("Script loaded.");
  8. }
  9. };
  10. script.src = "script1.js";
  11. document.getElementsByTagName("head")[0].appendChild(script);

大多数情况下，您希望调用一个函数就可以实现 JavaScript 文件的动态加载。下面的函数封装了标准实现和 IE 实现所需的功能：

通过函数进行封装：

  1. function loadScript(url, callback){
  2. var script = document.createElement ("script")
  3. script.type = "text/javascript";
  4. if (script.readyState){ //IE
  5. script.onreadystatechange = function(){
  6. if (script.readyState == "loaded" || script.readyState == "complete"){
  7. script.onreadystatechange = null;
  8. callback();
  9. }
  10. };
  11. } else { //Others
  12. script.onload = function(){
  13. callback();
  14. };
  15. }
  16. script.src = url;
  17. document.getElementsByTagName("head")[0].appendChild(script);
  18. }

此函数接收两个参数：JavaScript 文件的 URL，和一个当 JavaScript 接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步，设置 src 属性，并将script元素添加至页面。此 loadScript() 函数使用方法如下：

  1. loadScript("script1.js", function(){
  2. alert("File is loaded!");
  3. });

您可以在页面中动态加载很多 JavaScript 文件，但要注意，浏览器不保证文件加载的顺序。所有主流浏览器之中，只有 Firefox 和 Opera 保证脚本按照您指定的顺序执行。其他浏览器将按照服务器返回它们的次序下载并运行不同的代码文件。您可以将下载操作串联在一起以保证他们的次序，如下：

  1. loadScript("script1.js", function(){
  2. loadScript("script2.js", function(){
  3. loadScript("script3.js", function(){
  4. alert("All files are loaded!");
  5. });
  6. });
  7. });

此代码等待 script1.js 可用之后才开始加载 script2.js，等 script2.js 可用之后才开始加载 script3.js。虽然此方法可行，但如果要下载和执行的文件很多，还是有些麻烦。如果多个文件的次序十分重要，更好的办法是将这些文件按照正确的次序连接成一个文件。独立文件可以一次性下载所有代码（由于这是异步进行的，使用一个大文件并没有什么损失）。

动态脚本加载是非阻塞 JavaScript 下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

使用 XMLHttpRequest(XHR)对象

此技术首先创建一个 XHR 对象，然后下载 JavaScript 文件，接着用一个动态 script 元素将 JavaScript 代码注入页面。

通过 XHR 对象加载 JavaScript 脚本：

  1. var xhr = new XMLHttpRequest();
  2. xhr.open("get", "script1.js", true);
  3. xhr.onreadystatechange = function(){
  4. if (xhr.readyState == 4){
  5. if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
  6. var script = document.createElement ("script");
  7. script.type = "text/javascript";
  8. script.text = xhr.responseText;
  9. document.body.appendChild(script);
  10. }
  11. }
  12. };
  13. xhr.send(null);

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

这种方法的主要优点是，您可以下载不立即执行的 JavaScript 代码。由于代码返回在script标签之外（换句话说不受script标签约束），它下载后不会自动执行，这使得您可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。

此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内，不能从 CDN 下载（CDN 指"内容投递网络（Content Delivery Network）"，所以大型网页通常不采用 XHR 脚本注入技术。

总结

减少 JavaScript 对性能的影响有以下几种方法：

1.将所有的

2.尽可能地合并脚本。页面中的

3.采用无阻塞下载 JavaScript 脚本的方法：

3.1.使用

3.2.使用动态创建的

3.3.使用 XHR 对象下载 JavaScript 代码并注入页面中。

3.4.通过以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 网站和应用的实际性能。

http://www.520ued.com/article/index/arcid/31.html

js加载优化三的更多相关文章

  1. js加载优化-二

    http://www.cnblogs.com/radom/archive/2011/04/26/2028886.html ontrolJS 主要为了是解决网页加载中Js文件的性能问题,ControlJ ...

  2. js加载优化

    阻塞特性:       JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 脚本位置:       浏览器在碰到一个引入外部JS 文件的 ...

  3. 优化JS加载时间过长的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...

  4. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

  5. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  6. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  7. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

  8. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  9. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

随机推荐

  1. JVM中可生成的最大Thread数量

    最近想测试下Openfire下的最大并发数,需要开大量线程来模拟客户端.对于一个JVM实例到底能开多少个线程一直心存疑惑,所以打算实际测试下,简单google了把,找到影响线程数量的因素有下面几个: ...

  2. Win8.1专业版、核心板和企业版有什么区别

    Win8.1核心版(一般就称之为Windows 8.1) + Win8.1 专业版(称之为Windows 8.1 Pro),根据用户输入的序列号(就是Win8密钥)来区分安装.Win8.1企业版(称之 ...

  3. QMessageBox 中的 OK 按钮改为中文“确定”

    有很多资料用于将 QMessageBox 的 OK 改为中文.但大多很麻烦.本文提供一个简便方法,用于定制 QMessageBox 的按钮,包括将其翻译成中文显示.   QMessageBox  对其 ...

  4. Intel 凌动 D525 产品参数Intel 凌动 Z3735F 产品参数

    https://item.taobao.com/item.htm?spm=a230r.1.14.8.kauehT&id=40450541158&ns=1&abbucket=19 ...

  5. 4Sum 解答

    Question Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c  ...

  6. Android图形合成和显示系统---基于高通MSM8k MDP4平台

    介绍了Android SurfaceFlinger层次以下的图形合成和显示系统,主要基于高通MSM8k MDP4x平台. 做为Android Display专题.SurfaceFlinger的详细介绍 ...

  7. Unity 单元测试(NUnit,UnityTestTools)

    在软件开发中单元测试是非常重要的一个环节, =.=盘子脸去了几家公司都没有单元测试这个概念. 我们的系统虽然从代码看上是分离的, 在多数情况下都需要依赖于其他模块来运行.(单元测试部分内容教我解决这个 ...

  8. Android开源库集锦

    一.兼容类库 ActionBarSherlock : Action Bar是Android 3.0后才开始支持的,ActionBarSherlock是让Action Bar功能支持2.X后的所有平台, ...

  9. easyUI的combobox设置隐藏和显示

    今天遇到一个需求,需要在combobox选择不同选项时,分别切换另一个控件为text或者combobox. 当时想了各种办法,想将combobx和text切换隐藏,但是都没得到自己想要的效果.最终还是 ...

  10. Linux 内核开发 - 进程空间

    1.1 虚拟内存 Linux 的系统.假设每一个任务都独立的占用内存,则实际的物理内存将非常快消耗殆尽.实际上对于前台正在执行的任务来说,所须要要的内存并不多,非常多任务基本不须要执行,也就没有必要一 ...