前端性能优化篇（常见）

1.DOM篇

1)DOM添加优化：createDocumentFragment()

var oFragment = document.createDocumentFragment();
for(var i = 0 ; i < 10; i ++) {
    var p = document.createElement("p");
    var oTxt = document.createTextNode("段落" + i);
    p.appendChild(oTxt);
    oFragment.appendChild(p);
}
document.body.appendChild(oFragment);//结果是在body中加入10个p标签。

fragment是文档碎片不会放到文档（document）中，所以比createElement少了一个节点，而且使用documentFragment不占用额外的资源，在文档中没有标记。

2)DOM修改优化：cloneNode、replaceChild

var orig = document.getElementById('container');
  var clone = orig.cloneNode(true);
  var list = ['foo', 'bar', 'baz'];
  var content;
  for (var i = 0; i < list.length; i++) {
     content = document.createTextNode(list[i]);
     clone.appendChild(content);
  }
  orig.parentNode.replaceChild(clone, orig);

3)减少DOM数量：document.getElementsByTagName('*').length

4)css修改时会导致repaint /reflow，可以离线操作DOM树。

5)使用事件委托，及时销毁事件

JS篇

6)避免使用eval()，耗时，可读性差，不安全

7)减少ajax请求数量，可以使用预加载、懒加载方式，比如事先写new Image().src='xxx'

8)尽量使用get请求，更快，但post更安全

9)异步加载js脚本

10)慎用全局变量和闭包，闭包容易导致内存泄露、性能消耗、空间浪费

11)尽量使用数组字面量、对象字面量，避免使用构造函数。

文件资源优化：

12)文件合并、压缩

13)使用CDN托管在线资源

14)合理利用缓存