爱淘FE

Posted by:
Mickey

每件事最后都会是好事,如果不是好事,说明还没到最后

1,312

主要记下reflow吧

主要记下reflow

repaint(重绘)在元素的外观经过改变,但没改变页面layout布局的情况下发生,如改变visibility、background、color、前景色等;
当repaint发生时,浏览器会验证DOM树上的所有其它结点的visibility属性。

reflow(回流)则是引起DOM操作相关脚本执行时低性能的一个关键点。页面上任一节点触发reflow,都会导致它的子节点、祖先节点重新渲染。

Nicole在一篇老文里总结了在哪些情况下会导致reflow发生:

  1. 窗囗大小改变
  2. 文字的font各样式属性改变
  3. stylesheet添加/删除
  4. 改变内容,如用户在输入框中敲字
  5. 激活伪类,如:hover (IE里是一个兄弟结点的伪类被激活)
  6. 操作class属性
  7. JS操作DOM
  8. 读取offsetWidth和offsetHeight等layout属性
  9. 设置style属性

降低影响的基本途径有以下几点

  1. 尽可能限制reflow的影响范围。以上面的代码为例,要改变p的样式,class不要加在div上,通过父级元素影响子元素不好。最好直接加在p上。
  2. 通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow。所以最好通过设置class的方式。
  3. 实现元素的动画,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局。
  4. 权衡速度的平滑。比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁,CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
  5. 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。
  6. 很多情况下都会触发reflow,如果css里有expression,每次都会重新计算一遍。

本文有评论 2 条

  1. 内容的改变,如用户在输入框中敲字(这个应该是重绘吧

    Raku Lumix 2015/08/15 10:51 下午 回复
    • reflow发生的条件之一是影响render tree的DOM tree发生变化。
      你打开useragent的shadow DOM可以看到,浏览器内置控件input反馈用户输入的空间是一个固定区域的div。响应输入只是改变div的文本节点。
      而文本节点属于nodeType为3的DOM节点,改变他的内容等于重置了某一区域的DOM tree,故而产生reflow,不过因为是在浏览器内置控件控制的区域,范围很小,影响不大,可以放心~

      Mickey- 2015/08/17 9:32 上午 回复

发表评论


back up ↑