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实现控制台控件的代码
Sep 04 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
vue-cli3 热更新配置操作
Sep 18 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 中的批处理的实现
2007/06/14 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP四大安全策略
2014/03/12 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JS面向对象编程详解
2016/03/06 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
js实现一键复制功能
2017/03/16 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
简单了解Python中的几种函数
2017/11/03 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python3 map函数和filter函数详解
2019/08/26 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
企业行政文员岗位职责
2013/12/03 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
素质教育学习心得体会
2016/01/19 职场文书
化工生产实习心得体会
2016/01/22 职场文书