《高性能javascript》 领悟随笔之-------DOM编程篇(二)

《高性能javascript》 领悟随笔之-------DOM编程篇二

　　序：在javaSctipt中，ECMASCRIPT规定了它的语法，BOM实现了页面与浏览器的交互，而DOM则承载着整个页面文档。DOM编程性能一直以来都是非常受开发者关注的话题，如何编写高性能的DOM是前端开发必不可少的技能。

---

 1.重绘与重排

　　当浏览器加载完页面所有的元素、js、css、图片之后会自动生成两个数据结构：

1.dom树

（图片为转载）

如图所示，dom树表示了整个页面文档的结构，通过访问dom树我们可以得到某个元素，并且操作这个元素；

2.渲染树

　　表示dom节点如何显示；

《高性能javascript》一书中是这么描述的：dom树中每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的dom元素在渲染树中没有对应的节点）。渲染树中的节点被称为 “帧（frams）” 或 “盒（boxes）”，符合css模型的定义，理解页面元素为一个具有内边距（padding），外边距（margins），边框（borders）和位置（position）的盒子。一旦dom和渲染树构建完成，浏览器就开始显示页面元素。

　　参考　　http://blog.csdn.net/greenqingqingws/article/details/19822139  详细阐述了【浏览器渲染原理】渲染树构建之渲染树和DOM树的关系；

 

当我们去修改元素的属性，比如宽度、高度、动态增加文字、就会引起浏览器的“重排 与 重绘”，减少它发生的次数是提高dom性能的关键之一；

 

那么如何减少 “重排 与 重绘” 发生的次数呢？

3.合并多次对dom和样式的修改，然后一次性处理掉；

一个栗子：

 

var el = document.getElementById('mydiv');
el.style.color='red';
el.style.padding='5px';
el.style.borderLeft = "1px solid red";

 

这个栗子中div有三个元素样式的改变，每一个都会影响元素的结构，这种情况会导致在某些浏览器下页面触发三次重排，这么做效率是非常低下的；

将css集中修改：csstext 方法，它可以以字符串的形式一次性修改css样式信息，需要注意的是它会覆盖已存在的行间样式信息；

一个栗子：

var el = document.getElementById('mydiv');
var csstext = "color:red;border-right:1px solid red;padding:5px;";


//集中一次性修改样式 
el.style.cssText += csstext;

还可以使用添加删除class名称达到同样的效果，通过class名得到的性能会更好，在不同的应用场景应首先考虑增删class名的修改方法；

4.批量修改dom；

 

当我们通过ajax请求得到一个列表数据的时候，我们需要循环将数据插入到页面中。如果每次循环插入一个节点的话，那页面很可能会直接崩溃掉，我们要避免这个问题的发生；

文档片段（document.createDocumentFragment()）;

创建一个隐式的副本，看栗子

 

//创建一个fragment临时dom存储空间
var fragment= document.createDocumentFragment()；

for(......){
 var div =  document.createElement("div");
........
//将div存储在fragment临时空间中
          fragment.appendChild(div);
}
//将组装好的dom塞进body
document.body.appendChild(fragment);

 

此方法只插入一次，完成所有的dom更新工作，是dom操作性能的关键之一  （innerHTML同理）

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

2.事件委托

每多绑定一个事件处理程序都会加重页面的性能负担，简单优雅的操作应该使用 “事件委托”。 它基于事件冒泡机制；通过监听父级元素的事件，判断出事件的来源元素；

当我们点击div，div触发click事件，事件被冒泡到body body触发click事件直到文档根document；

假如要给页面中的每一个a元素添加一个点击事件，我们可以这样做：

document.addEventListener("click",function(ev){
        var Event = ev||window.event;
        if(Event.target.nodeName=="A"){
            alert("点击了a标签");
        }
    },false);

当a点击被冒泡到document的时候，判断它的来源，如果是a则执行相应的代码，这就是事件委托的概念；

在jQuery中事件冒泡被封装在.on（）方法里 ， 可以更简单的使用它：

$(document).on("click","a",function(){
        alert("这是一个a标签");
 });

更多关于事件委托  参考：http://www.cnblogs.com/leejersey/p/3801452.html  js中的事件委托

3.dom篇总结

1.最小化访问dom的次数，尽可能使用javascript处理；

2.如果多次访问一个dom节点，需要保存局部变量中；

3.处理html集合最好的方法是将他们复制到一个临时的数组中，数组的访问速度要比dom快的多；

4.使用事件委托

--------------学无止境，站在巨人的肩上才能看的更高、更远--------------