1. 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种:
(1). 先将元素从document中删除,完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”,完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document
function appendEveryTime(){ for( var i = 5000; i--; ){ var n = document.createElement('div'); n.innerHTML = 'node ' + i; document.body.appendChild(n);/*每次创建的新节点都append到文档*/ } } function appendLast(){ var frag = document.createDocumentFragment(); for( var i = 5000; i--; ){ var n = document.createElement('div'); n.innerHTML = 'node ' + i; frag.appendChild(n);/*每次创建的节点先放入DocumentFragment中*/ } document.body.appendChild(frag); }
用dynaTrace观察的结果如下,appendLast的性能无论是在Javascript的执行时间以及浏览器渲染时间方面都优于appendEveryTime。
appendEveryTime:
appendLast:
2. 集中修改样式
(1). 尽可能少的修改元素style上的属性
(2). 尽量通过修改className来修改样式
(3). 通过cssText属性来设置样式值
如下的代码中,每一次赋值都会造成浏览器重新渲染,可以采用cssText或者className的方式
el.style.color = 'red; el.style.height = '100px'; el.style.fontSize = '12px'; el.style.backgroundColor = 'white';
3. 缓存Layout属性值
对于Layout属性中非引用类型的值(数字型),如果需要多次访问则可以在一次访问时先存储到局部变量中,之后都使用局部变量,这样可以避免每次读取属性时造成浏览器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;
4. 设置元素的position为absolute或fixed
在元素的position为static和relative时,元素处于DOM树结构当中,当对元素的某个操作需要重新渲染时,浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间,这在当今越来越多的Javascript动画方面尤其值得考虑。
HTML代码:
Javascript代码:
var t = $('test'); ~function(){ t.style.left = t.offsetLeft + 5 + 'px'; t.style.height = t.offsetHeight + 5 + 'px'; setTimeout(arguments.callee,500); }();
通过修改#test元素的postion为relative和postion分别得到如下两个测试结果
position: relative
position: absolute
在postion:relative的测试当中,浏览器在重新渲染时做的工作比position:absolute多了不少。
相关推荐
本文主要是结合自己的一些项目经验,给大家提出了几点减少浏览器reflow和repaint的方法和注意事项,希望对大家能有所帮助。
本篇文章,小编将为大家介绍,有关javascript的性能优化(repaint和reflow),有需要的朋友可以参考一下
你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *...1.什么是Repaint/Reflow? 好,先上一张图:浏览器解析大概的工作流程 这张图应该可以很好理解,归纳为四个步骤: 1、解析HTML以构建DOM树:渲染引擎开始解析H
我深感性能优化实在是前端知识树中特别的一环——当你需要学习前端框架时,文档和源码几乎可以告诉你所有问题的答案,当你需要学习 Git 时,你也可以找到放之四海皆准的实践方案。但性能优化却不一样,它好像只能是...
Adobe Edge Reflow Preview下载
1. 浏览器渲染机制 2. 重绘 3. 回流 4. 浏览器优化 5. 减少重绘与回流
Standard Reflow Profile for Standard and Lead-Free Packages ACTEL
重排段落的宽度在您的user.behaviors文件中设置: { :+ { :editor [( :lt.plugins.reflow/set-width 72 )]}} 您可以通过添加到user.keymap文件来为 reflow 命令添加键绑定: { :+ { :editor { " ctrl-j " [ :lt....
DIY reflow oven code for arduino
Ersa Reflow oven变频器文档
Reflow Text Animator A port of Plaid's ReflowText that allows easily transitioning between sibling TextViews - no matter their size or style. Usage To move and transform fromView into toView: new ...
Symbion S36 Post-Reflow AOI Systemsymbion S36后回流AOI系统
frame主要的动作有三个: ...比如,未指定图片宽高的话,图片的载入会使页面 reflow, 因为要根据图片宽高来更新frame。这里就有一个提高页面性能的小技巧:如果事先能够确定图片宽高的话,最好在HTML里写上。
RTI-033-97 Datapaq Reflow Tracker System 窄形六通道系统 包含下列内容 SW5366A Insight炉温跟踪仪中文分析软件 DQ1862 Q18 数据记录器,K 型电极, 6个通道, -200°to 1370℃ 精度± 0.5℃,每通道可储存18,...
回流Reflow 是一个非常基本的工作流助手,它需要一个状态 getter/setter 函数和一个工作流定义,并返回一个转换函数,该函数将在状态之间转换对象,遵循工作流规则并调用提供的任何工作流状态转换逻辑。人为的例子:...
Objective-C单向数据流方案,灵感来自于Flux, Redux and Vue。