repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。

reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。

何时发生:

1. DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
2. 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
3. 应用新的样式或者修改任何影响元素外观的属性
4. Resize浏览器窗口、滚动页面
5. 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))

6.当你修改网页的默认字体时当,你修改 CSS 样式的时候

注:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现位置变化。

如何避免:

1. 把DOM离线后修改:

  • 先将元素从document中删除,完成修改后再把元素放回原来的位置
  • 将元素的display设置为”none”(有一次 repaint),然后你想怎么改就怎么改。比如修改 100 次,然后再把他显示出来
  • clone 一个 DOM 节点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下
  • 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document   

var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);

2. 集中修改样式
  2.1尽可能少的修改元素style上的属性
  2.2尽量通过修改className来修改样式

// 不好的写法
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
// 推荐写法
el.className += " theclassname";

  2.3通过cssText属性来设置样式值
    element.style.width=”80px”; //reflow
    element.style.height=”90px”; //reflow
    element.style.border=”solid 1px red”; //reflow
    以上就产生多次reflow,调用的越多产生就越多
    element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow 
  2.4缓存Layout属性值
    var left=elem.offsetLeft; 多次使用left也就产生一次reflow
  2.5设置元素的position为absolute或fixed
    元素脱离标准流,也从DOM树结构中脱离出来,在需要reflow时只需要reflow自身与下级元素
  2.6尽量不要用table布局
    table元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
  2.7避免使用expression,他会每次调用都会重新计算一遍(包括加载页面)

3.为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是会大大减小 reflow

4.尽可能的修改层级比较低的 DOM节点。当然,改变层级比较底的 DOM节点有可能会造成大面积的 reflow,但是也可能影响范围很小。

参考:

Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Verdana; color: #223355 }
span.s1 { }

javascript性能优化-repaint和reflow

javascript性能优化-repaint和reflow的更多相关文章

  1. 【转】javascript性能优化-repaint和reflow

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...

  2. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  3. 摘:JavaScript性能优化小知识总结

    原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...

  4. Javascript 性能优化的一点技巧

    把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.

  5. DOM性能瓶颈与Javascript性能优化

    这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(<JS特性性能缺陷及JIT的解决方案>,<Javascript垃圾回收浅析>),主要描述了untyped,GC带来的问题 ...

  6. JavaScript 性能优化技巧分享

    JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...

  7. JavaScript性能优化 DOM编程

    最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...

  8. javascript性能优化:创建javascript无阻塞脚本

    javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使 ...

  9. javascript性能优化总结一(转载人家)

    一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于 ...

随机推荐

  1. 利用 filter 机制 给 静态资源 url 加上时间戳,来防止js和css文件的缓存,利于开发调试

    直接上代码: public class WeiXinFilter implements Filter{ private static Logger logger = LoggerFactory.get ...

  2. 使用简单NGUI加载进度条

    1.在Panel上添加Slider,GNUI--Open--Widget Wizard--Slider,设置Empty和Full 2.在Panel上添加Label,GNUI--Open--Widget ...

  3. 问题1:Mybatis 中 Signature中的参数args 问题2:MetaObject中 forObject方法中的参数

    1.@Intercepts({@Signature(type =StatementHandler.class, method = "prepare", args ={Connect ...

  4. [JS] 使用RequireJS引用UMeditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 而UMeditor则是UEditor删减版. ...

  5. asp.net开发中常见公共捕获异常方式总结(附源码)

    本文实例总结了asp.net开发中常见公共捕获异常方式.分享给大家供大家参考,具体如下: 前言:在实际开发过程中,对于一个应用系统来说,应该有自己的一套成熟的异常处理框架,这样当异常发生时,也能得到统 ...

  6. iOS-- 重要的链接

    面试题: http://www.jianshu.com/p/6a57c6e902e8 富文本: http://www.cnblogs.com/jys509/p/5018027.html

  7. ubuntu安装cacti错误

    安装cacti时,明明mysql信息都配置正确了,权限也分配好了,可是仍然报错,如下: 这时可以试试到/etc/cacti目录下,修改debian.php中的mysql配置信息,问题应该就能解决了.

  8. 34. Convert Sorted List to Binary Search Tree &amp;&amp; Convert Sorted Array to Binary Search Tree

    Convert Sorted List to Binary Search Tree OJ: https://oj.leetcode.com/problems/convert-sorted-list-t ...

  9. iOS开发--基于AFNetWorking3.0的图片缓存分析

    图片在APP中占有重要的角色,对图片做好缓存是重要的一项工作.[TOC] 理论 不喜欢理论的可以直接跳到下面的Demo实践部分 缓存介绍 缓存按照保存位置可以分为两类:内存缓存.硬盘缓存(FMDB.C ...

  10. Delphi XE5 安卓手机要求

    1 ARMv7 的 CPU v6 的肯定不支持. 2 黑屏是因为你的手机 CPU 不支持 NEON 特性.或者是 T2 海思 CPU .这 2 个不支持. 3 系统版本  2.3.3 到 2.3.9 ...