css的repaint和reflow

浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow。

由于 reflow 是一种浏览器中的用户拦截(user-blocking)操作,所以了解如何减少 reflow 次数,及不同的文档属性(DOM 层级(DOM depth),CSS 效率,不用类型的 style 变化)对 reflow 次数的影响对开发者来说非常必要。有时 reflow 页面中的一个元素会 reflow 它的父元素(译注:这里是复数)以及所有子元素。

一个元素的外观被改变,但没有改变布局叫做repaint(重绘),如改变visibility、outline、前景色。

"According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree."
当repaint发生时,浏览器会验证DOM树上的所有其它结点的visibility属性。 repaint是昂贵的

reflow(回流)是导致DOM脚本执行低效的关键因素之一。页面上任何一个结点触发reflow,都会导致它的子结点及祖先结点重新渲染。

Nicole总结了在哪些情况下会导致reflow发生:

  • 改变窗囗大小
  • 改变文字大小
  • 添加/删除样式表
  • 内容的改变,如用户在输入框中敲字(这样也会-_-||)
  • 激活伪类,如:hover (IE里是一个兄弟结点的伪类被激活)
  • 操作class属性
  • 脚本操作DOM(增加删除元素或元素的内容)
  • 计算offsetWidth和offsetHeight
  • 设置style属性

reflow是不可避免的,只能将reflow对性能的影响减到最小。Nicole提出6点建议:

  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. 避免css中使用expression (IE only)

有多种用户操作和 DHTML 变化可能会触发 reflow。调整浏览器窗口的大小,用 javascript 计算样式(computed styles),在 DOM 中创建删除元素,改变元素的 class 都会触发 reflow。值得注意的是,有些操作会多次触发 reflow,超出你的想象。

下面是一些减小 reflow 的原则:

  • 减少不必要的 DOM 层级(DOM depth)。
    改变 DOM 树中的一级会导致所有层级的改变,上至根部,下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
  • 尽量减少 CSS 规则,去除未用到的 CSS。
    如果做复杂的表现变化,如动画,让它脱离文档流。用绝对定位或 fixed 定位来完成。
  • 避免不必要的复杂的 CSS 选择器,尤其是后代选择器(descendant selectors),因为为了匹配选择器将耗费更多的 CPU。

css的repaint和reflow的更多相关文章

  1. 探讨css中repaint和reflow

    (个人blog迁移文章.) 前言: 页面设计中,不可避免的需要浏览器进行repaint和reflow.那到底什么是repaint和reflow呢.下面谈谈自己对repaint和reflow的理解,以及 ...

  2. javascript性能优化-repaint和reflow

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

  3. [ JS 进阶 ] Repaint 、Reflow 的基本认识和优化

    你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *,CSS选择器层叠不能超过三层,CSS尽量使用类选择器,书写HTML少使用table,结构要尽量简单-DOM树要小....等这些忠告,以前我就大 ...

  4. repaint和reflow的相关知识

    一个页面由两部分组成: DOM:描述该页面的结构 render渲染:描述 DOM 节点 (nodes) 在页面上如何呈现 repaint重绘: 当 DOM 元素的属性发生变化 (如 color) 时, ...

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

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

  6. 【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

    原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“R”吓到?今天,我们来讨论一下浏览器的渲 ...

  7. 关于repaint和reflow的笔记

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,box-shadow不 ...

  8. 前端性能优化-减少http请求,dns预解析,减少repaint和reflow

    前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...

  9. 前段性能----repaint和reflow

    在前面小节,我们对网页渲染过程做了介绍,其中最后两步就是layout与paint,当渲染对象被创建并添加到树中,它们并没有位置和大小,计算这些值的过程称为layout或reflow.绘制阶段,遍历渲染 ...

随机推荐

  1. C++学习笔录3

    1.隐藏:存在于派生类和基类中.只要成员名字相同就叫做隐藏.参数和函数名都相同时,是一种特殊的隐藏,叫做重写,重写只出现在函数中.若需要访问基类中被隐藏的成员,必须访问这种方法:“对象名:类名::隐藏 ...

  2. php mysql_insert_id() 获取为空

    mysql_insert_id() 获取插入数据后的最新的id 遇到问题和解决的步骤如下: 1. 使用后总是返回空的字符串,网上查了一番有人说是id要AUTO_INCREMENT,并且mysql_in ...

  3. Linux学习之nl命令

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  4. Jexus下配置多个站点

    一.在jexus中一个配置文件就是一个站点,有多少个配置文件就可以创建多少个站点 配置文件所在的位置 在siteconf中有一个最基本的配置 default ##################### ...

  5. iOS定位与地图

    定位: 手机上定位的实现主要有三种方式:基站(附近基站的位置),wifi(所连接路由器的位置),卫星(最准确,也最耗能). iOS的定位功能主要是由CLLocationManager类来完成的.这个类 ...

  6. Python进阶之模块与包

    模块 .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB","S ...

  7. Android Studio常用插件续

    这个月因为各种事情在忙,包括赶项目,回老家,还有准备旅游的事,所以应该写不了四篇博客了.今天介绍一下关于Android Studio 的几个好用的插件,都是我在用的,它们或能帮你节省时间,或者让你心情 ...

  8. python 文本编辑基础记录

    不熟悉编码方式,同时python的编码方式折磨我了很长时间,记录下,以免忘记,本文内容存在错误,是自己理解,看到仅当参考 Unicode 是字符集,有点像一本字典,utf-8是在unicode这本字典 ...

  9. [问题解决] initAndListen: 10309 Unable to create/open lock file: /data/db/mongod.lock

    错误: 在linux下开启mongoDB的 $ >bin: ./mongod 时报错:initAndListen: 10309 Unable to create/open lock file: ...

  10. [Drools]JAVA规则引擎 -- Drools

    Drools是一个基于Java的规则引擎,开源的,可以将复杂多变的规则从硬编码中解放出来,以规则脚本的形式存放在文件中,使得规则的变更不需要修正代码重启机器就可以立即在线上环境生效. 本文所使用的de ...