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 相关文章推荐
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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抓即时股票信息
2006/10/09 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
axios的拦截请求与响应方法
2018/08/11 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
Python脚本实时处理log文件的方法
2016/11/21 Python
Python生成器以及应用实例解析
2018/02/08 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
python判断自身是否正在运行的方法
2019/08/08 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
自荐信怎么写呢?
2013/12/09 职场文书
小学生作文评语大全
2014/04/21 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
教师节慰问信
2015/02/15 职场文书
审美与表现自我评价
2015/03/09 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
python 实现体质指数BMI计算
2021/05/26 Python