没有合适的资源?快使用搜索试试~ 我知道了~
首页探索前端性能关键:重排与重绘详解
"重排和重绘是前端开发中两个至关重要的概念,它们直接影响页面的性能和用户体验。本文首先阐述了浏览器的渲染流程,这是一个复杂的过程,主要包括JavaScript驱动的视觉变化、样式计算、布局和绘制等多个步骤。布局阶段,元素的尺寸和位置变动会触发重排,而样式更新不涉及几何变化的则是重绘。 重排,也被称为布局调整,指的是当DOM结构或CSS样式发生变化,导致浏览器需要重新计算元素的位置、尺寸和层级关系,从而更新渲染树的过程。这可能涉及到元素的移动、尺寸改变或插入/删除操作,对性能的影响主要体现在需要重新计算和构建整个布局。 重绘,则是浏览器在完成重排后,将新的渲染树呈现到用户可见区域的过程。这意味着只涉及元素的样式更新,如颜色、字体、边框等,不会引起几何结构的变化。虽然样式更新相对轻量级,但如果频繁发生,也可能成为性能瓶颈,特别是当涉及到大量计算或复杂的动画效果时。 理解并优化重排和重绘至关重要,开发者可以通过减少不必要的DOM操作、使用CSS的position属性精确控制元素位置、避免使用table布局等方式,降低重排和重绘的频率,从而提高页面渲染速度和整体性能。掌握这些技巧,有助于提升网站的响应性和用户体验。" 文章深入探讨了浏览器渲染流程中的关键环节,强调了重排和重绘在其中的作用,并提供了一些实用的优化策略,这对于前端开发者来说是一份宝贵的参考资源。通过学习和实践,开发者可以更好地控制页面性能,确保网页的流畅运行。
资源详情
资源推荐
你真的了解重排和重绘吗?你真的了解重排和重绘吗?
做过前端开发的小伙伴就算不是非常理解重排与重绘,但是肯定都听过这两个词。那为什么这两个东西这么重要?因为他与我们的页面性能息息相关,今天,我们就来好好研究一下
这两个东西。
浏览器的渲染流程浏览器的渲染流程
在讲解重排和重绘之前,我们有必要说一下浏览器的渲染流程。下面是浏览器渲染过程中最关键的几个部分。如果想了解完整的浏览器渲染流程,推荐大家去阅读李兵老师的浏览器
工作原理实践,需要付费阅读。后期我也会整理一下再出一篇博客详细介绍浏览器的渲染过程。
JavaScript:一般来说,我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里添加一些 DOM 元素
等。当然,除了 JavaScript,还有其他一些常用方法也可以实现视觉变化效果,比如:CSS Animations、Transitions 和 Web Animation API。
样式计算样式计算:此过程是根据匹配选择器(例如 .headline 或 .nav > .nav__item)计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后,将应用规则并计算每个元素的最终样
式。
布局布局:在知道对一个元素应用哪些规则之后,浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素,例如 元素的宽度一般
会影响其子元素的宽度以及树中各处的节点,因此对于浏览器来说,布局过程是经常发生的。
绘制绘制:绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影,基本上包括元素的每个可视部分。绘制一般是在多个表面(通常称为层)上完成的。
合成合成:由于页面的各部分可能被绘制到多层,由此它们需要按正确顺序绘制到屏幕上,以便正确渲染页面。对于与另一元素重叠的元素来说,这点特别重要,因为一个错误可能使一
个元素错误地出现在另一个元素的上层。
其中,重排和重绘影响的就是其中的布局和绘制过程。
什么是重排和重绘制什么是重排和重绘制
重排重排:当DOM的变化引发了元素几何属性的变化,比如改变元素的宽高,元素的位置,导致浏览器不得不重新计算元素的几何属性,并重新构建渲染树,这个过程称为“重排”。
重绘重绘:完成重排后,要将重新构建的渲染树渲染到屏幕上,这个过程就是“重绘”。
简单来说,涉及元素的几何更新时,叫重排。而只涉及样式更新而不涉及几何更新时,叫重绘。对于两者来说,重排必定引起重绘,但是重绘并不一定引起重排。所以,当涉及重排
时,浏览器会将上述的步骤再次执行一遍。当只涉及重绘时,浏览器会跳过Layout步骤,即:
而如果既不需要重排,也不需要重绘,那么就是下面这样:
浏览器会直接跳到合成阶段。显然,对于页面性能来说,不重排也不重绘 > 重绘 > 重排。
什么操作会引起重排和重绘什么操作会引起重排和重绘
显然,触发重排的一般都是几何因素,这是比较好理解的:
页面第一次渲染 在页面发生首次渲染的时候,所有组件都要进行首次布局,这是开销最大的一次重排
浏览器窗口尺寸改变
元素位置和尺寸发生改变的时候
新增和删除可见元素
内容发生改变(文字数量或图片大小等等)
元素字体大小变化
还有其他一些操作也可能引发重排
查询某些属性或调用某些方法
offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()
我们可能不太理解为什么这些操作也能引起重排,这里我先简单解释一下。因为现在的浏览器已经非常完善了,会自动帮我们做一些优化。当我们用js操作DOM的时候,浏览器并不
是立马执行的,而是将操作存储在一个队列中。当达到一定数量或者经过一定时间以后浏览器再统一的去执行队列中的操作。那么回到我们刚才的问题,为什么查询这些属性也会导
致重排?因为当你查询这些属性时,浏览器就会强制刷新队列,因为如果不立马执行队列中的操作,有可能得到的结果就是错误的。所以相当于你强制打断了浏览器的优化流程,引
发了重排。下面我们通过一些小例子来进一步理解这段话:
首先我们来一个显然会引发重排的操作
#test {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
click
function reflow() {
var div = document.querySelector("#test");
下载后可阅读完整内容,剩余8页未读,立即下载
weixin_38651365
- 粉丝: 3
- 资源: 922
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 十种常见电感线圈电感量计算公式详解
- 军用车辆:CAN总线的集成与优势
- CAN总线在汽车智能换档系统中的作用与实现
- CAN总线数据超载问题及解决策略
- 汽车车身系统CAN总线设计与应用
- SAP企业需求深度剖析:财务会计与供应链的关键流程与改进策略
- CAN总线在发动机电控系统中的通信设计实践
- Spring与iBATIS整合:快速开发与比较分析
- CAN总线驱动的整车管理系统硬件设计详解
- CAN总线通讯智能节点设计与实现
- DSP实现电动汽车CAN总线通讯技术
- CAN协议网关设计:自动位速率检测与互连
- Xcode免证书调试iPad程序开发指南
- 分布式数据库查询优化算法探讨
- Win7安装VC++6.0完全指南:解决兼容性与Office冲突
- MFC实现学生信息管理系统:登录与数据库操作
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功