Javascript性能优化（一）

浏览数：27 / 时间：2015年06月08日

一、加载

1. 依据HTML 4规范，script标签可以放置在head和body标签中的任意位置

2. 下载js脚本会阻塞其他页面文件下载，所以应尽可能将script标签放置在body底部

3. HTML 4为script标签增加了一个defer属性，表明延迟执行，但这并不是标准做法

4. 将多个script合并后压缩，放置在body标签底部，是引入多个外链javascript文件的最佳实践

5. 通过动态创建标签，可以异步引入js文件，代码如下：

 1 function loadScript(url, callback) {
 2     
 3     var script = document.createElement(‘script‘)
 4     script.type = ‘text/javascript‘
 5 
 6     // IE
 7     if (script.readyState) {    
 8         script.onreadystatechange = function() {
 9             if (script.readyState == ‘loaded‘ || script.readyState == ‘complete‘) {
10                 script.onreadystatechange = null
11                 callback()
12             }
13         }
14 
15     // other browser
16     } else {
17         script.onload = function() {
18             callback()
19         }
20     }
21 
22     script.src = url
23     document.getElementByTagName(‘head‘)[0].appendChild(script)
24 }

6.使用xhr对象，同样可以异步引入js。与上面不同的是，你可以获得准确的加载进度，并且，脚本并不是一下载好就执行（取决于script标签添加到页面中的时间）

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

二、数据

1. javascript数据类型：直接量、变量、数组、对象

2. 直接量和局部变量的访问速度优于数组项和对象成员，变量访问性能与作用域嵌套有直接关系

3. 闭包比非闭包函数需要更多内存开销（变量的生命周期延长，并且最后不一定能释放）

4. 使用hasOwnProperty只对实例进行查找，而使用for in遍历对象成员可以访问prototype

5. 每次使用 "." 操作符时，会导致javascript引擎搜索所有对象成员，对象成员嵌套越深，速度越慢。尤其是当访问的属性（方法）在原型链中时

6. 使用 "." 操作符，在safari下会比[key]更快，但[key]的写法更通用（属性为保留字）

7. 命名空间是导致频繁访问嵌套属性的起因之一，对命名空间进行缓存，可以有效减少对象访问次数

1 // 对命名空间进行缓存
2 var load = ME.core.load
3 
4 // 对resource.length进行缓存，避免每次遍历都访问resource
5 for (var i = 0, length = resource.length; i < length; i++) {
6 
7     load.LoadResource(resource[i].url)
8 }

三、DOM

1. 文档对象模型（DOM）是一个语言无关的，用于操作XML和HTML文档的应用程序接口

2. DOM和ECMAScript是两个独立的功能，当他们通过接口相互访问，就会产生消耗。访问DOM元素要被收取“过桥费”，修改元素则更为昂贵，因为它会导致浏览器重新计算页面的几何变化

3. 使用dom方式生成html（body.appendChild）与使用innerHTML效率大致相同，在旧版本浏览器上innerHTML更胜一筹

4. 在大多数浏览器上，克隆节点（cloneNode）比生成节点（createElement）更有效率

5. HTML集合一直与文档保持着链接，每次访问时，都会重复执行查询的过程，哪怕只是获取集合里的元素个数。以下方法和属性会造成这种低效率情况

1 document.getElementsByName()
2 document.getElementsByClassName()
3 document.getElementsByTagName()
4 
5 document.images
6 document.forms
7 document.links
8 document.forms[0].elements

6. 遍历元素子节点，ie下使用nextSibling比childNodes更快

 1 // nextSibling
 2 function testNextSibling() {
 3     var el = document.getElementById(‘father‘),
 4         ch = el.firstChild,
 5         name = ‘‘
 6 
 7     do {
 8         name = ch.nodeName
 9 
10     } while(ch = ch.nextSibling)
11 
12     return name
13 }
14 
15 // childNodes
16 function testChildNodes() {
17     var el = document.getElementById(‘father‘),
18         ch = el.childNodes,
19         len = ch.length,
20         name = ‘‘
21 
22     for (var i = 0; i < len; i++) {
23         name = ch[i].nodeName
24     }
25 
26     return name
27 }