发布网友 发布时间:2022-05-07 08:49
共2个回答
懂视网 时间:2022-04-21 10:07
1.避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种:热心网友 时间:2022-04-21 07:15
页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂,其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow;当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。以上提到的只是在页面加载时必然会出现的repaint和reflow,除此之外,在页面加载完成后,用户的一些操作、脚本的一些操作都会导致浏览器发生这种行为,具体在后文阐述。另外,关于浏览器渲染的更为详细的资料可以参考以下,涵盖了IE以及Firefox:Understanding Internet Explorer Rendering BehaviourNotes on HTML Reflow 二、什么情况下会触发浏览器的repaint/reflow?除了页面在首次加载时必然要经历该过程之外,还有以下行为会触发这个行为:DOM元素的添加、修改(内容)、删除( Reflow + Repaint) 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局) 应用新的样式或者修改任何影响元素外观的属性 Resize浏览器窗口、滚动页面 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 在继续下面的文章之前,先介绍一款强大的性能分析工具-dynaTrace,借助该功能能够清晰的得到页面中的资源消耗情况,从而对症下药。另外,更细节的方面是它可以跟踪每个函数调用所造成的CPU消耗、Repaint/Reflow。接下来就借助该工具来测试一下以上描述的几点情况。 DOM元素的增删改先看代码HTML:这里是第1个节点这里是第2个节点这里是第3个节点Javascript: function $(id){ return document.getElementById(id); } function addNode(){ var n = document.createElement('div'); n.innerHTML = 'New Node'; $('test1').appendChild(n); } function modNode(){ $('test2').innerHTML = 'hello'; } function delNode(){ $('test3').parentNode.removeChild($('test3')); } 在依次点击完每一个按钮后,我们来看看dynaTrace的情况,首先是一目了然的点击事件分布 放大之后来看一下每个事件的repaint/reflow情况: 增加节点: 修改节点:删除节点:图中的绿色部分表示的是reflow和repaint过程,其中比较短的绿条标示的reflow过程,后面长条部分表示的是repaint过程。