Javascript性能优化（一）

一、加载

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 }

7. 使用原生的querySelector和querySelectorAll将比遍历获得更好的效率（ie8+）

8. 当DOM的变化影响了几何属性（盒模型），其他元素的几何属性和位置也会因此受到影响（normal flow）。浏览器会使渲染树种受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。完成重排后，浏览器会重新绘制受到影响的部分到屏幕中，这个过程称为“重绘”。以下情况会发生重排：

添加或删除可见的DOM元素
元素位置改变
元素盒模型改变（padding、margin、width、height、border）
内容改变，如文字或图片路径
页面渲染器初始化
浏览器窗口尺寸改变

　　有些改动会触发整个页面的重排，例如，当滚动条出现时

9. 重排会产生计算消耗，多数浏览器会通过队列化修改并批量执行来优化重排过程。获取布局信息的操作会导致列队刷新，比如以下方法：

offsetTop，offsetLeft，offsetWidth，offsetHeight
scrollTop，scrollLeft，scrollWidth，scrollHeight
clientTop，clientLeft，clientWidth，clientHeight
getComputedStyle()

　　在修改样式的过程中最好避免使用上述属性

10. 将多次改动合并为一次，可以大幅提高效率。另一种一次性修改样式的方式是修改class属性，这种方法更利于维护和复用，虽然可能带来轻微性能影响（改变类时需要检查级联样式）

11. 有三个方法可以使DOM脱离文档流

隐藏元素，应用修改，重新显示
使用文档片段，在当前DOM树外构建一个子树，再拷贝回文档
将原始元素拷贝到一个脱离文档的节点中，修改副本，再替换原始元素

12. 在IE 7-8上大范围使用hover会降低响应速度

13. 通过事件委托可以减少事件的绑定数量，从而提升效率。通过子元素冒泡触发父元素的事件，可能更加简单和优雅

14. 将需要大量修改的DOM节点（动画元素）设置为绝对定位，使其脱离文档流以减少影响