《高性能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.使用事件委托

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

时间: 2024-11-05 11:33:13

《高性能javascript》 领悟随笔之-------DOM编程篇(二)的相关文章

轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都 是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是

前端开发之JavaScript HTML DOM理论篇二

主要内容: 1.HTML DOM元素 2.HTML DOM事件 3.HTML DOM实例 一.DOM元素 主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素 (1)方法一: appendChild() 追加 如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上. 实例和解析: <div id="box1"> <p id="p1">This is first paragraph.</p>

Dom编程(二)

document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document  document的方法: (1)write:向文档中写入内容.writeln,和write差不多,只不过最后添加一个回车  <input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')

高性能JavaScript笔记一(加载和执行、数据访问、DOM编程)

写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但真的是打心底里仰慕,希望自己有朝一日能过到他那个高度) 既然现在还达不到那个层次,就好好堆砖吧,当砖堆到一定高度也自然会上一个小台阶. 脚本位置 脚本会阻塞页面渲染,直到它们全部下载并执行完成,页面才会继续渲染.页面只有加载并执行完前面一个script外部文件才会去加载下面一个script标签. 在

高性能JavaScript DOM编程

转自(学习之用) 作者:韩子迟 网址:http://www.cnblogs.com/zichi/p/4713031.html 我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMA

高性能Javascript(2) DOM编程

第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM APIs主要用于访问这些文档中的数据.尽管DOM是与语言无关的API,在浏览器中的接口却是以JavaScript实现的.客户端大多数脚本程序与文档打交道,DOM就成为JavaScript代码日常行为中重要的组成部分. 2.1 DOM Access and Modification  DOM访问和修改

高性能javascript读书笔记(三.DOM 编程1)

第三章DOM Script DOM编程 读书笔记 访问和修改DOM元素 浏览器通常要求DOM实现和JavaScript保持相互独立. <!-- 例如IE中,被称为JScript的JavaScript实现位于库文件jscript.dll中,而DOM实现位于另一个库mshtml.dll(内 部代号Trident).这种分离技术允许其他技术和语言,如VBScript,受益于Trident所提供的DOM功能和渲染功能.Safari使用Webkit的WebCore处理DOM和渲染,具有一个分离的JavaS

JavaScript性能优化 DOM编程

最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的程序接口(API). 浏览器通常会把DOM和JavaScript独立实现.例如Chrome中使用Webkit的WebCore库渲染页面,用V8作为JavaScript引擎. 访问DOM天生就慢,将DOM和JavaScript比喻为两个岛屿,两处同行要收过桥费,ECMAScript访问DOM的次

高性能JavaScript 编程实践

前言 最近在翻<高性能JavaScript>这本书(2010年版 丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效.但是有些章节的有些内容还是相当不错的,譬如第八章编程实践,为了方便以后的查阅,对此做个总结.失效的代码也会在以后做更进一步的探索. 避免双重求值 这个优化策略很好理解,我们可能都已经不知不觉地运用在了实际的编程中: // not use this setTimeout('alert("hello world&qu