JavaScript性能优化

优化页面加载时间
- HTML标签顺序：把所有能够移动的<script>标签挪至HTML的</body>前。
- JavaScript文件的GZip编码传输
- 缩编、混淆和编译，使用工具进行代码的精简和优化
- 请求时才延迟加载JavaScript文件

优化文档对象的操作

实现对页面元素的最小化访问

以变量保存对DOM元素的引用以便后续使用
通过对单独父元素的引用来访问子DOM元素

var wrapper = document。getElementById("wrapper"),
      header = wrapper.getElementByTagName("header")[0],
      nav = wrapper.getElementByTagName("nav")[0];

View Code

对新建元素实施DOM修改操作后才将其添加当前实时页面

var list = document.createElement("ul"),
item = document.createElement("li");
item.innerHTML="this is a list item";
list.appendChild(item);
document.body.appendChild(list);

View Code　　　　　　

尽量利用已有的元素
- 如果是创建多个有着相似标签特性的元素，可以使用DOM元素的cloneNode()方法来复制该元素及相关特性，减少标准的document.createElement()方法来创建元素。
离线DOM的利用

//演示当直接更新DOM元素的Style属性时所引发的重排
    var nav =document.getElementByTagName("nav");
    nav.style.backgroundColor = "#000";//在浏览器中引发一次重排
    nav.style.color = "#fff";//引发一次重排
    nav.style.opacity = 0.5;//引发一次重排

View Code

//应用CSS类至DOM元素以减少浏览器重排
    var nav = document.getElementByTagName("nav");
    nav.className="selected";//名称为selected的CSS类中包含着多项样式

View Code

//隐藏元素并修改元素的style属性，以此来减少浏览器重排的发生
    var nav = document.getElementByTagName("nav");
    nav.style.display = "none";//隐藏元素，引发一次浏览器重排
    nav.style.backgroundColor = "#000";//因为元素已隐匿，不会引发重排
    nav.style.color = "#fff";//不会引发浏览器重排
    nav.style.opacity = 0.5;//不会引发浏览器重排
    nav.style.display = "block";//使该元素重新显示，引发一次浏览器重排

View Code

提升DOM事件性能
- 委托事件至父元素
- 使用框架化处理频发的事件