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

简介: 《高性能javascript》 领悟随笔之-------DOM编程篇二   序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而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.使用事件委托

 

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

 

======================================================== 转载请注明出处。
目录
相关文章
|
16天前
|
JavaScript 前端开发 编译器
解锁JavaScript模块化编程新纪元:从CommonJS的基石到ES Modules的飞跃,探索代码组织的艺术与科学
【8月更文挑战第27天】随着Web应用复杂度的提升,JavaScript模块化编程变得至关重要,它能有效降低代码耦合度并提高项目可维护性及扩展性。从CommonJS到ES Modules,模块化标准经历了显著的发展。CommonJS最初专为服务器端设计,通过`require()`同步加载模块。而ES Modules作为官方标准,支持异步加载,更适合浏览器环境,并且能够进行静态分析以优化性能。这两种标准各有特色,但ES Modules凭借其更广泛的跨平台兼容性和现代语法逐渐成为主流。这一演进不仅标志着JavaScript模块化的成熟,也反映了整个JavaScript生态系统的不断完善。
33 3
|
1月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
12 1
js之DOM 文档对象模型
|
11天前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
13 2
|
17天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
38 1
|
22天前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
21天前
|
JavaScript 前端开发 安全
揭秘TypeScript的魔力:它是如何华丽变身为JavaScript的超能英雄,让您的代码飞入全新的编程维度!
【8月更文挑战第22天】在Web开发领域,JavaScript是最主流的编程语言之一。但随着应用规模的增长,其类型安全和模块化的不足逐渐显现。为解决这些问题,微软推出了TypeScript,这是JavaScript的一个超集,通过添加静态类型检查来提升开发效率。TypeScript兼容所有JavaScript代码,并引入类型注解功能。
25 2
|
1月前
|
XML JavaScript 前端开发
JavaScript中的DOM解析器DOMParser api的讲解
`DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例,使用`.parseFromString(string, type)`方法进行解析,其中`string`为待解析的字符串,`type`指定解析类型如`text/html`或`text/xml`等,返回一个`Document`对象。例如,可解析包含`<p>666</p>`的字符串并获取其文本内容`666`。
64 1
|
12天前
|
JavaScript 前端开发 Oracle
|
20天前
|
JavaScript 前端开发 开发者
震撼揭秘!JS模块化进化史:从混沌到秩序,一场代码世界的华丽蜕变,你怎能错过这场编程盛宴?
【8月更文挑战第23天】在 Web 前端开发领域,JavaScript 模块化已成为处理日益复杂的 Web 应用程序的关键技术。通过将代码分解成独立且可重用的模块,开发者能够更有效地组织和管理代码,避免命名冲突和依赖混乱。从最早的全局函数模式到 IIFE,再到 CommonJS 和 AMD,最终进化到了 ES6 的原生模块支持以及 UMD 的跨环境兼容性。本文通过具体示例介绍了这些模块化规范的发展历程及其在实际开发中的应用。
27 0
|
21天前
|
JavaScript 前端开发 数据库
编程小白到高手:掌握null与undefined、JavaScript中隐藏的技巧曝光!
编程小白到高手:掌握null与undefined、JavaScript中隐藏的技巧曝光!