页面重绘(repaint)和回流(reflow)
2018-06-24 02:06:18来源:未知 阅读 ()
前言
页面显示到浏览器上的过程:
1.1、生成一个DOM树。
浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点。
1.2、生成样式结构体。
浏览器将所有样式解析成样式结构体,解析过程中会去掉浏览器不能识别的。
2、DOM树和样式结构体结合生成render树。
render树类似于DOM树,render树每个节点有自己样式(盒子模型,margin、border、padding、content),但不包含display:none和head节点,却包含visibility:hidden节点。
3、浏览器根据render树渲染页面。
重绘(repaint)和回流(reflow)
回流:当render tree中的一部分(或全部)因为元素的尺寸,布局,隐藏等改变而需要重新构建,就是回流。回流后会进行重绘。
重绘:当只是元素的外观,风格变化,不影响布局的,重新渲染的过程就叫重绘。
PS:这样重绘的代价会比回流小。
什么时候出现回流?
1、页面渲染初始化
2、添加、删除可见的DOM元素
3、元素尺寸、位置变化
4、窗口resize
浏览器对回流、重绘优化
浏览器都会优化重绘和回流的操作。浏览器会把所有会引起回流、重绘的操作放入1个队列中,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
另外,当我们取一些属性值时,类似offsetWidth、clientWidth、width等,会导致浏览器提前flush队列,只为了取到正确的值,即便是队列里的操作不影响所取的值。
减少回流、重绘
1、修改样式和添加DOM元素时,批量处理。
2、取offsetWidth等属性值,缓存到变量,少去取值。
3、将元素脱离文档流。
PS:第3点我并未查找到相关证据,持保留态度。
总结
现在写前端代码的,大多很随心所欲,还一般都不出问题,因为一旦糟糕到程序异常,通常也就醒悟了。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:Web前端体系的脉络结构
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash