DOM的相关优化

为什么要进行DOM优化?

  DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint)。

首先先说一些浏览器是怎么样把一个页面呈现出来的:

  一个浏览器有许多模块,其中负责呈现页面的是渲染引擎模块。

  这个过程大致如下:

  ·解析HTML,并生成一棵DOM tree
  ·解析各种样式并结合DOM tree生成一棵Render tree(渲染树)
  ·对Render tree的各个节点计算布局信息,比如box的位置与尺寸
  ·根据Render tree并利用浏览器的UI层进行绘制

注意:DOM tree和Render tree上的节点并非一一对应,比如一个"display:none"的节点就只会存在于DOM tree上,而不会出现在Render tree上,因为这个节点不需要被绘制。

Webkit的基本流程:

Gecko的基本流程:

  paint是一个耗时的过程,然而layout是一个更耗时的过程,我们无法确定layout一定是自上而下或是自下而上进行的,甚至一次layout会牵涉到整个文档布局的重新计算。
  关键来了:layout是肯定无法避免的,所以我们主要是要最小化layout的次数。

怎么样进行优化?

  前面提到,layout是肯定无法避免的,所以我们主要是要最小化layout的次数。在考虑如何最小化layout次数之前,要先了解什么时候浏览器会进行layout。
  layout(reflow)一般被称为布局,这个操作是用来计算文档中元素的位置和大小,是渲染前重要的一步。在HTML第一次被加载的时候,会有一次layout之外,js脚本的执行和样式的改变同样会导致浏览器执行layout,这也是本文的主要要讨论的内容。
  一般情况下,浏览器的layout是lazy的,也就是说:在js脚本执行时,是不会去更新DOM的,任何对DOM的修改都会被暂存在一个队列中,在当前js的执行上下文完成执行后,会根据这个队列中的修改,进行一次layout。[浏览器的layout为lazy模式,也就是说,并非每次我们对DOM进行修改时都会layout,而是将这些修改存储在一个队列中,在一定的情况下统一提交队列,进而实现layout操作。

  然而有时希望在js代码中立刻获取最新的DOM节点信息,浏览器就不得不提前执行layout,这是导致DOM性能问题的主因。

  如下的操作会打破常规,并触发浏览器执行layout:
    ·通过js获取需要计算的DOM属性[计算才能得到的属性]
    ·添加或删除DOM元素
    ·resize浏览器窗口大小
    ·改变字体
    ·css伪类的激活,比如:hover
    ·通过js修改DOM元素样式且该样式涉及到尺寸的改变

  所以我们要尽量减少上面layout的次数。

具体怎么做

1.批量读写
  当我们需要获取某一属性,这一属性需要计算才能得到,并且队列中存在尚未提交的DOM修改操作,则此时,DOM修改操作的队列将会被提交。
为了提高效率,减少更新render tree的次数,可以先统一读取属性,然后统一修改DOM,这样,就可以减少更新render tree的次数。

例如:

var h1 = element1.clientHeight;
element1.style.height = (h1 * 2) + ‘px‘;
var h2 = element2.clientHeight;
element2.style.height = (h2 * 2) + ‘px‘;
var h3 = element3.clientHeight;element3.style.height = (h3 * 2) + ‘px‘;

clientHeight,这个属性是需要计算得到的,于是就会触发浏览器的一次layout。

优化后:

var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;

element1.style.height = (h1 * 2) + ‘px‘;
element2.style.height = (h2 * 2) + ‘px‘;
element3.style.height = (h3 * 2) + ‘px‘;

2.虚拟结点
当我们需要对DOM做出大量修改时,可以先创建一个虚拟结点,将所有修改附加在该节点,最后将该虚拟节点一次性提交给在render tree上存在的结点,则相当于只提交了一次修改操作。

var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
  var item = document.createElement("li");
  item.appendChild(document.createTextNode("Option " + i);
  fragment.appendChild(item);
}
list.appendChild(fragment);  

3.动画的每一帧都会导致layout,这是无法避免的,但是为了减少动画带来的layout的性能损失,可以将动画元素绝对定位,这样动画元素脱离文本流,layout的计算量会减少很多。

未完待续...

参考:

http://kb.cnblogs.com/page/534571/

时间: 2024-11-08 18:19:39

DOM的相关优化的相关文章

【Oracle 优化】Oracle数据库提高命中率及相关优化

本文是关于Oracle数据库调试与优化方面的文章,主要介绍Oracle数据库中命中率相关的问题,包括不同的算法之间性能的比对. 关于Oracle中各个命中率的计算以及相关的调优 1)Library Cache的命中率: .计算公式:Library Cache Hit Ratio = sum(pinhits) / sum(pins) SQL>SELECT SUM(pinhits)/sum(pins) FROM V$LIBRARYCACHE; 通常在98%以上,否则,需要要考虑加大共享池,绑定变量,

javascript JavaScript强化教程——DOM编程性能优化

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 ——DOM编程性能优化 DOM的访问与修改访问DOM元素是有代价的——修改元素侧更为昂贵,因为他会导致浏览器重新计算页面的几何变化.当然,最坏的情况是在循环中访问或修改元素,尤其是对HTML元素几何循环操作.为了让你对DOM编程带来的性能问题有个量化的了解,请看下面的简单实例: function innerHTMLLoop(){ for(var count = 0;count<15000;count++)

HttpClient有关方法及相关优化整理

HttpClient4中采用 ThreadSafeClientConnManager来保证线程的安全,优于2.0的 MultiThreadedHttpConnectionManager类.另外Apache官方强烈推荐只使用一个HttpClient的实例,所以我 们可以将以下demo方法写成单例模式. demo将使用StringEntity来完成不指定参数名发送Post,已经采用ThreadSafeClientConnManager来保证线程的安全 ? 1 2 3 4 5 6 7 8 9 10 1

【浅谈DOM事件的优化】

浅谈DOM事件的优化 在 JavaScript程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚轮事件为 DOMMouseScroll). 浏览器为了确保这些事件能够及时响应,触发的频率会比较高,具体的触发频率各浏览器虽然有出入,但出入不大.很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化,下面说说我的一些优化方法. mousemove 在拖拽

Apache的相关优化

Apache的相关优化 一.Apache运行环境优化 1.使用单独的主机运行Apache服务     Apache所运行的硬件环境都是对性能影响最大的因素,即使不能对硬件进行升级,也最好给apache一个单独的主机以免受到其他应用的干扰. 2.给Apache服务器增加内存 所有硬件指标中,对性能影响最大的是内存,对于静态内容(图片.javascript文件.css文件等),它决定了apache可以缓存多少内容,它缓存的内容越多,在硬盘上读取内容的机会就越少,而存取硬盘上的特定文件是一件很费时的操

原生JS中DOM节点相关API合集

节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.nextSibling //返回紧跟在当前节点后面

DOM编程性能优化学习笔记

参考高性能javascript  javascript编程全解 1)DOM 文档对象模型是一种操作xml和html文档的接口(API),我们可以通过javascript(ECMAScript)访问DOM,访问或者修改DOM的时候会产生开销,接下来讨论如何减少这方面的开销 这里面想到了几种方案 1)减少DOM的访问次数 使用局部变量 2)创建新的节点的时候 clone已经存在的节点  使用能区分元素节点和其他节点的属性  使用选择器API(这3种优化了方法,使用了不同于之前的方法) 3)最小化重绘

android dom解析相关理解

DOM解析XML DOM是Document Object Model的缩写,即文档对象模型.DOM解析器是通过将XML文档解析成树状模型并将其放入内存来完成解析工作的,而后对文档的操作都是在这个树状模型上完成.这个在内存中的文档是实际文档大小的几倍.好处是结构清晰,操作方便,坏处是耗费系统资源.要使用DOM方式来解析xml,需引入下面两个包: importjavax.xml.parsers.*;//包含DOM解析器和SAX解析器的具体实现 import org.w3c.dom.*;//定义了W3

Linux 相关优化

lvs 四层 dr 直接返回给用户支持大并发 四层负载均衡 复杂 不能更改端口lvs负载均衡 (大并发) NGINX 实现web动静分离 移动和pc分离 解决 WEB高并发 mysql优化参数调整打开MySQL配置文件my.cnf1 back_log参数值:由默认的50修改为500.(每个连接256kb,占用:125M) back_log=500值指出在MySQL暂时停止回答新请求之前的短时间内多少个请求可以被存在堆栈中.也就是说,如果MySql的连接数据达到max_connections时,新