JavaScript中的Repaint和Reflow用法详解


Posted in Javascript onJuly 27, 2015

你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *,CSS选择器层叠不能超过三层,CSS尽量使用类选择器,书写HTML少使用table,结构要尽量简单-DOM树要小....等这些忠告,以前我就大概知道使用通配符或者CSS选择器层次过多可能会降低性能,至于为什么不使用table标签我一直是迷迷糊糊,也就跟着那样做了,但我认识了Repain和 Reflow之后,原来这些还真不能用太多。 ok,希望这篇文章对你有帮助!

1.什么是Repaint/Reflow?

好,先上一张图:浏览器解析大概的工作流程

JavaScript中的Repaint和Reflow用法详解

这张图应该可以很好理解,归纳为四个步骤:

1、解析HTML以构建DOM树:渲染引擎开始解析HTML文档,转换树中的html标签或js生成的标签到DOM节点,它被称为 -- 内容树。
2、构建渲染树:解析CSS(包括外部CSS文件和样式元素以及js生成的样式),根据CSS选择器计算出节点的样式,创建另一个树 —- 渲染树。
3、布局渲染树: 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标。
4、绘制渲染树: 遍历渲染树,每个节点将使用UI后端层来绘制。

好,我们可以看到Repain 和 Reflow 分别出现在了第三和第四步。因此我们给出下面的定义:

    对于DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow;当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。
    可见这两个东东对浏览器渲染页面是很重要的啊,都是会影响性能的,因此我们需要了解一些常见的会引起repaint和reflow的一些操作,并且应该尽量减少以提高渲染速度。

2.引起Repain和Reflow的一些操作

Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法,一个结点的 reflow 很有可能导致子结点,甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么,但是如果 reflow 发生在手机上,那么这个过程是非常痛苦和耗电的。
所以,下面这些动作有很大可能会是成本比较高的。

  •     当你增加、删除、修改 DOM 结点时,会导致 Reflow 或 Repaint。
  •     当你移动 DOM 的位置,或是搞个动画的时候。
  •     当你修改 CSS 样式的时候。
  •     当你 Resize 窗口的时候(移动端没有这个问题),或是滚动的时候。
  •     当你修改网页的默认字体时。

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

Reflow是不可避免的,只能将Reflow对性能的影响减到最小,给出下面几条建议:

    不要一条一条地修改 DOM 的样式。与其这样,还不如预先定义好 css 的 class,然后修改 DOM 的 className:

   

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

    把 DOM 离线后修改。如:
    a> 使用 documentFragment 对象在内存里操作 DOM。
    b> 先把 DOM 给 display:none (有一次 repaint),然后你想怎么改就怎么改。比如修改 100 次,然后再把他显示出来。
    c> clone 一个 DOM 节点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下。

    不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

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

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

    千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

认识了这些是不是对浏览器的原理有更大兴趣了?OK,后面会更新关于浏览器原理的文章,或者你们可以先去搜搜别人的,因为我觉得理解浏览器的原理确实是很重要,可以帮助我们写出性能更好的website。

Javascript 相关文章推荐
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
react中使用swiper的具体方法
May 15 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 #Javascript
AngularJS的一些基本样式初窥
Jul 27 #Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 #Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 #Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 #Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 #Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
详解vue axios二次封装
2018/07/22 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
对Django中内置的User模型实例详解
2019/08/16 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
养成教育经验材料
2014/05/26 职场文书
大专生求职信
2014/06/29 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年度思想工作总结
2014/11/27 职场文书
教师个人考察材料
2014/12/16 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android