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

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

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

 1.重绘与重排

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

1.dom树

《高性能javascript》 领悟随笔之-------DOM编程篇(二)_第1张图片(图片为转载)

如图所示,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.事件委托

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

《高性能javascript》 领悟随笔之-------DOM编程篇(二)_第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.使用事件委托

 

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

 

你可能感兴趣的:(《高性能javascript》 领悟随笔之-------DOM编程篇(二))