HTML页面重绘和重排(回流)

本文深入探讨了浏览器如何解析HTML和CSS构建DOM树和渲染树,解释了布局渲染树和绘制渲染树的过程,以及重绘和重构的概念。同时,提供了优化网页性能的策略,帮助开发者减少不必要的重排和重绘。

HTML页面重绘和重排(回流)

##浏览器运行机制
1.构建DOM树( parse )

渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树

2.构建渲染树(construct)

解析对应的CSS样式文件信息,构建渲染树,每一个NODE都有自己的style,render tree不包含隐藏的节点,因为这些节点不会用于呈现。

3.布局渲染树(reflow/layout)

从根节点递归调用,计算每一个元素的大小、位置等,给出每个节点所应该在屏幕上的精确坐标.

4.绘制渲染树(paint/repaint)

遍历渲染树,使用UI层来绘制每个节点.

重绘(repaint redraw)

当盒子的位置、大小及其他属性确定下来之后,浏览器便将这些原色都按照各自的特性再次绘制,将内容呈现在页面上,
 重绘是指一个元素外观的改变所触发的浏览器行为。
触发条件:改变元素外观

重构

因为规模尺寸大小、布局、隐藏等改变而重新构建,就为重构。

重构与重绘的关系
重排必定触发重构

##优化
减少对渲染树的操作,合并多次的DOM和样式的修改,并减少对style样式多的请求
1.直接改变元素的className
2.先设置display:none,进行页面布局,设置后再设置为block
3.使用cloneNode 和 replaceChild 触发一次回流和重绘
4.将多次重排的元素 position设置为absolute \fixed 使其脱离文档流
5.创建多个DOM节点,可以使用DocumentFragment创建后一次性加入document

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值