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实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
详解VUE前端按钮权限控制
Apr 26 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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&java(三)
2006/10/09 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP实现简单日历类编写
2020/08/28 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
Angularjs---项目搭建图文教程
2016/07/08 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
python+opencv实现动态物体追踪
2018/01/09 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
金融专业应届生求职信
2013/11/02 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
消防先进事迹材料
2014/02/10 职场文书
药剂专业求职信
2014/06/20 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
党建工作整改措施
2014/10/28 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
关于mysql中string和number的转换问题
2022/06/14 MySQL