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. MAVEN入门(一)

    一.Maven的基本概念 Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.1.项目构建 项目构建过程包括[清理项目]→[编译项目]→[测试项目]→ ...

  2. 基于nginx+lua简单的灰度发布系统

    upstream.conf upstream grey_1 { keepalive 1000; server localhost:8020; } upstream grey_2 { keepalive ...

  3. Windows Server 2008防火墙问题及Sql Server2005用户登录问题

    一.Windows Server 2008防火墙问题 1.  问题: 1.在 Windows 安全中心中单击“立即打开”以打开 Windows 防火墙时,会收到以下错误消息:安全中心无法打开 Wind ...

  4. 数字证书管理工具keytool常用命令介绍

    需要给一个apk加签名,用到了keytool这个工具,下面转载一篇介绍keytool的文章 http://blog.chinaunix.net/uid-17102734-id-2830223.html ...

  5. KETTLE使用入门

    一.准备文件 1.安装java虚拟机 2.安装kettle安装文件 二.使用步骤 1.点击Spoon.bat,启动kettle,弹出DOS窗口如下: 2.进入主界面 3.新建资源库

  6. C 中注意的小问题

    输入:char ch[100],gets(ch); scanf("%d",&in); char ch,ch=getchar(); VC:  所有变量声明放在所有操作前面: ...

  7. Oracle EBS-SQL (SYS-20):职责使用菜单2.sql

    select frt.responsibility_name,         fr.menu_id,         fm.menu_name,         fr.request_group_i ...

  8. docker exec 运行命令

    docker:/root/sbin# docker exec -it 17aaf60ee3a1 /sbin/ifconfig -a eth1 Link encap:Ethernet HWaddr 22 ...

  9. 传智播客C/C++学院年薪24-50万招聘C/C++讲师

    C/C++技术讲师 6名 (北京,年薪:24-50万) 传智播客C/C++课程培训体系如下: 1.C语言,世界五百强C语言面试训练 2.C++语言,世界五百强C++语言面试训练 3.数据结构与算法,世 ...

  10. openstack 的 policy 问题。

    想写nova的policy的实现, 但是发现网上,有人写的很不错了. ref: http://blog.csdn.net/hackerain/article/details/8241691 但是,po ...