[读书笔记]高性能js-DOM优化

我们都知道，在js编程中，很大一部分是和DOM打交道。DOM是和编程语言无关的一个东西，用来映射html文档的，DOM里面包含一些API。在浏览器中，这些API可以被js调用。但是DOM和ECMA又是不同的2个模块，它们之间的沟通需要跨模块。所以，访问DOM就会比较慢。天生的 。。。慢就慢把，总能做一些优化吧。 DOM访问和修改。都说访问DOM耗性能，用循环访问更是如此。所以可以减少DOM访问来优化。比如for(var i=0;i<1000;i++){document.getElementById('a').innerHTML+='a';}这段代码每次循环都访问了2次DOM，读取innerHTML一次，重写innerHTML里面的内容一次。超级耗性能啊。改成var str='';for(var i=0;i<1000;i++){str+='a';}document.getElementById('a').innerHTML=str;for循环的部分不涉及DOM访问，在最后的时候访问一次DOM，重写DOM，ok。（以上是针对一个DOM元素的，下面要讲一堆DOM元素，也就是HTML集合，原理也一样，就是弄成局部变量）html集合用document.getElementsByTagName之类的dom方法获得的都是类数组。只有length属性和可以通过下标查询元素。没有原生数组的一些方法。另外由于html集合是和html文档随时绑定的。所以每次需要html集合里面的内容，哪怕是length，都会重复查询html文档。这就造成了低效。。1.缓存length属性，免得每次查询都要遍历HTML文档来获得length。（在没有增删节点的情况下）。2 利用局部变量访问html集合：var a=document.getElementByName('a');var str='';for(var i=0;i<1000;i++){　　str+=document.getElementByName('a')[i];}改成var a=document.getElementByName('a');var str='';for(var i=0;i<1000;i++){　　str+=a[i];}3 元素节点的获取一般用childnodes，但这个效率低，还或获得文字节点，这些我们一般用不到，还要写代码删去。麻烦。。。建议用children属性，直接获得nodelist的元素节点，效率也高。IE6都支持啊。。另外一些好的节点获取方法，支持性不是很好，就不写了。嘿嘿。4选择器API超好用的选择器api,document.querySelectorAll('#a .a');获得的是non-live的nodelist,也就是不是时时链接html文档的。不用担心访问DOM的性能啦。并且这个API比传统的一些获取DOM集合的方法速度快，还有代码短啊，就一句。棒！檫，别忘了做兼容,这个IE8以下不行。。。重排和重绘页面下载完所有的文件之后，(包括html，css，js，img等等)，开始绘制2棵树了。一棵是DOM树，另一棵是渲染树。DOM树就是把html的文档结构映射到一棵树上。（好像是废话）。。。渲染树用来表示dom怎么在浏览器中显示。所有的DOM节点都在渲染树中有自己的位置（除了隐藏的节点外）。渲染树中的节点可以看成是一个box。当这2棵树弄好了之后，浏览器就开始绘制啦（painting过程）但绘制过程并非这么顺利。有时候突然改变了元素的box，比如宽度啊高度啊，这就影响了另外的DOM元素，浏览器就会找出受影响的部分，重新构造渲染树，这个过程就叫重排（reflow回流）。重排完成后，就会进行重绘(repaint)的过程了。重排会发生在很多情况，比如宽高的改变（渲染树重构），增加元素（DOM树和渲染树都重构了），增加滚动条（整个页面都被重排了）。所以我们要尽可能减少重排和重绘有什么方法呢？1 用cssText改变样式。一般我们改变元素样式都是直接var ul=document.getElementById('ul');ul.style.margin=1px;ul.style.padding=10px;这样会访问DOM2次，触发2次重排，改成ul.style.cssText='margin:1px;padding:10px'访问一次DOM解决事情了！//可以缓存ul在ECMA端。读的时候可以在ECMA读，但是写数据的时候还是要访问DOM。2 批量修改DOM当批量修改DOM的时候，若用传统的方法，每次都会发生重排，但可以通过以下步骤减少重排。1 元素脱离文档。2 改变元素。3 元素添加会文档。怎么让元素脱离文档呢？有3种方法1 先隐藏元素，修改完再显示。2 使用文档碎片。(document fragment)3 先创建一个文档元素的备份，修改备份，再添加会文档中1的栗子

var ul=document.getElementById('ul');
ul.style.display='none';
ul.appendChild(li);
ul.style.display='block';

2的栗子

var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function(e) {
var li = document.createElement("li");
li.textContent = e;
docfrag.appendChild(li);
});

ul.appendChild(docfrag);

3的栗子

var old=document.getElementById('ul');
var clone=document.cloneNode(true);
clone.appendChild(li);
old.parentNode.replaceChild(clone,old);

一般采用第二种方法优化会比较好。事件委托说白了就是直接在父元素上绑定一个事件，其他事件都冒泡到父元素处理。这样子元素就不用绑定事件，程序运行更快了。