栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

Repaint 、Reflow 的基本认识和解析

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Repaint 、Reflow 的基本认识和解析

浏览器的大概解析流程
在说这两只之前,有必要说一下浏览器的解析的大概流程,其实很多时候前端都在跟浏览器打交道,熟知这些东西还是很有必要的。
可以大概的分为4个步骤:
1.构建dom树——浏览器通过解析html/svg/xhtml以得到don树
2.构建渲染树(rendring tree)——解析css城css rule tree 通过css计算节点样式
3.布局渲染树——从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标
4.通过调用操作系统Native GUI的API绘制
经常被人提及的repaint和reflow就在以上的第三和第四步中,网上可以找到一张讲解很清晰的图,有兴趣可以搜搜看。
repaint
对应中文大概的意思就是重绘,重画。
触发条件:当改变dom元素的视觉效果时(例如:opacity,background-color,outline等等)
reflow
对应中文回流,落潮。
触发条件:增删改某个元素的可见性时;增删改css样式;css动画等等


感想
这两只在面试或则日常工作当中会经常遇见,跟一些性能相关的问题挂钩,至少目前移动端还是很需要注意这些东西的,尤其是reflow造成的性能问题。在这里就不写怎么去避免或者说怎么去减少这些问题,网上实在太多了。
很多时候我们都是为了解决问题而解决问题,而忘了为什么问题会出现,所以一些原理性,基础性的东西还是要掌握起来。奋斗在前端线上的童鞋们共勉。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243562.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号