JavaScript中的Repaint和Reflow用…
来源:互联网 发布:中信证券开户交易软件 编辑:程序博客网 时间:2024/06/11 20:58
你是不是经常听师兄或一些前端前辈说不能用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 分别出现在了第三和第四步。因此我们给出下面的定义:
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对性能的影响减到最小,给出下面几条建议:
认识了这些是不是对浏览器的原理有更大兴趣了?OK,后面会更新关于浏览器原理的文章,或者你们可以先去搜搜别人的,因为我觉得理解浏览器的原理确实是很重要,可以帮助我们写出性能更好的website。
- JavaScript中的Repaint和Reflow用…
- JavaScript中的Repaint和Reflow
- javascript性能优化-repaint和reflow
- javascript性能优化-repaint和reflow
- javascript性能优化-repaint和reflow
- javascript性能优化-repaint和reflow
- 关于reflow和repaint
- Web页面Repaint和Reflow
- reflow和repaint理解总结
- repaint和reflow理解总结
- Reflow Repaint
- reflow&repaint
- 如何减少浏览器repaint和reflow
- 如何减少浏览器的repaint和reflow?
- 页面重构应注意的repaint和reflow
- 如何减少浏览器的repaint和reflow?
- repaint和reflow的相关知识
- 如何减少浏览器repaint和reflow
- https协议和Http协议的区别
- 谈谈本地存储利弊Cookie、localSto…
- 详说 Cookie, LocalStor…
- Cookie 与session 通熟…
- 我的编程之路-2
- JavaScript中的Repaint和Reflow用…
- css3的calc()实现自适应布局
- js 作用域的问题
- Java 对象锁和类锁 死锁(多线程synchronized关键字)
- 弹窗(关闭按钮一直保持在底部)布…
- Git 和 SVN 之间的五个基本区别
- svn 常用操作命令
- Git常用命令总结
- 冷月的超神之路