[ JS 进阶 ] Repaint 、Reflow 的基本认识和优化 (2)
你是不是经常听师兄或一些前端前辈说不能用
CSS
通配符*
,CSS
选择器层叠不能超过三层,CSS
尽量使用类选择器,书写HTML
少使用table
,结构要尽量简单-DOM
树要小....等这些忠告,以前我就大概知道使用通配符或者CSS
选择器层次过多可能会降低性能,至于为什么不使用table
标签我一直是迷迷糊糊,也就跟着那样做了,但我认识了Repain
和Reflow
之后,原来这些还真不能用太多。 ok,希望这篇文章对你有帮助!
1.什么是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
。
[ JS 进阶 ] Repaint 、Reflow 的基本认识和优化 (2)相关推荐
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr)...
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些?
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- js进阶 12-1 jquery的鼠标事件有哪些
js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...
- js进阶正则表达式方括号(方括号作用)(js正则是在双正斜杠之中:/[a-z]/g)...
js进阶正则表达式方括号(方括号作用)(js正则是在双正斜杠之中:/[a-z]/g) 一.总结 方括号:范围 圆括号:选 大括号:数量 1.js正则是在双正斜杠之中: var reg2=/[a-z]/ ...
- js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键
js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键 一.总结 一句话总结:event.which属性. 1.如何获取事件发生的时间? timeStamp属性 event.timeStamp 属性 ...
最新文章
- YOLOV5的多主干网络backbone实现(Mobilenetv3Small、EagleEye、EfficientNetLite-0、PP-LCNet-1x、SwinTrans-YOLOv5等)
- python统计列表内元素个数
- mysql错误日志/var/log/mariadb/mariadb.log,二进制日志
- 解决Android中无法搜索联系人的问题
- 隐马尔科夫模型-EM模型-混合理解
- 多样化实现Windows Phone 7本地数据访问3——DB4O
- hdoj3351-stack
- c语言 空格_C语言100题集合-ex003
- CString 是一种很有用的数据类型
- ubuntu 16.0 CUDA 10.1卸载 CUDA 10.2 安装
- 好的架构不是设计出来的,而是演进出来的
- 论文笔记_SLAM_Visual SLAM for Driverless Cars: A Brief Survey
- 论文Chinese Relation Extraction with Multi-Grained Information and External Linguistic Knowledge阅读笔记
- Centos7 tomcat优化
- NLP数据标注工具调研
- 为你的掘金和 GitHub 设定个性域名
- Win10防火墙端口设置不起作用
- Android 开发推荐书籍
- msf常用模块功能整理
- python经理培训