当前位置:网站首页>浏览器渲染原理以及重排与重绘
浏览器渲染原理以及重排与重绘
2022-07-05 16:14:00 【爱划水de鲸鱼哥~】
浏览器渲染原理
浏览器渲染分为五个阶段。
第一阶段:HTML解析 --> DOM树
浏览器不能够直接理解 HTML文档,首先对其进行解析,并在解析过程中发出页面渲染所需的各种外部资源请求生成DOM树。
第二阶段: CSS解析 --> CSSOM树
同样浏览器也办法直接理解 CSS 代码,需要将识别并加载的CSS 代码处理成自己理解的 CSSOM 树。
第三阶段: 样式与结构合并 --> 渲染树
浏览器将DOM 树和 CSSOM 树结合在一起生成渲染树(:after :before 等伪元素会在这个环节被构建到 DOM 树中)。
渲染树特点:只包含渲染网页所需的节点。
构建渲染树的过程
- 第一步:从 DOM 树的根节点开始遍历,筛选出所有可见的节点;
- 第二步:对可见节点为其匹配 CSSOM树;
第四阶段: 页面布局 --> 布局渲染树
浏览器对渲染树进行遍历,将元素间嵌套关系以盒子模型的形式写入文档流盒模型,并在布局过程中会计算出元素确切的大小和定位。计算完毕后,将相应的信息写回渲染树上形成“布局渲染树”。
第五阶段: 页面绘制 --> 显示页面
在这一阶段浏览器终于拿到了绘制页面的所有信息,将渲染树上的每一个节点转换成肉眼可见的像素点,最终将页面呈现在我们面前。
重排
当我们修改DOM节点的宽、高或进行隐藏操作时,浏览器就需要重新计算节点的几何属性,然后再将计算的结果绘制出来的过程叫做重排(也叫回流)。
浏览器重排过程
触发重排的条件
- 改变 DOM 树的结构:节点的增减、移动等
- 获取一些需要通过"即时计算"得到值的属性:offsetWidth、offsetHeight、offsetTop、offsetLeft、 scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 等属性以及调用 getComputedStyle 方法,或者 IE 的 currentStyle 方法。
重绘
当我们修改DOM的样式(未影响其几何属性)时,浏览器需要重新为元素绘制新的样式过程叫做重绘。
浏览器重绘过程
触发重绘的条件
修改DOM的样式,但未影响其几何属性会发生重绘。
优化
重排和重绘是比较消耗性能的,因此在开发过程中,我们应该避免重排和减少重绘。
本文到此结束
如果大家还有什么其他想法,欢迎在评论区交流!
边栏推荐
猜你喜欢
Android privacy sandbox developer preview 3: privacy, security and personalized experience
If you can't afford a real cat, you can use code to suck cats -unity particles to draw cats
解决CMakeList find_package找不到Qt5,找不到ECM
【组队 PK 赛】本周任务已开启 | 答题挑战,夯实商品详情知识
Scratch colorful candied haws Electronic Society graphical programming scratch grade examination level 3 true questions and answers analysis June 2022
Games101 notes (I)
【729. 我的日程安排表 I】
Win11如何给应用换图标?Win11给应用换图标的方法
二叉树相关OJ题
Data access - entityframework integration
随机推荐
Cheer yourself up
What is the difference between EDI license and ICP business license
Quelques réflexions cognitives
Flet tutorial 12 stack overlapping to build a basic introduction to graphic and text mixing (tutorial includes source code)
Sentinel flow guard
JSON转MAP前后数据校验 -- 自定义UDF
国产芯片产业链两条路齐头并进,ASML真慌了而大举加大合作力度
Enterprise backup software Veritas NetBackup (NBU) 8.1.1 installation and deployment of server
DenseNet
【刷題篇】鹅廠文化衫問題
File operation --i/o
Raspberry pie 4B installation pytorch1.11
网站页面禁止复制内容 JS代码
挖财股票开户安全吗?怎么开股票账户是安全?
Apple 已弃用 NavigationView,使用 NavigationStack 和 NavigationSplitView 实现 SwiftUI 导航
Jarvis OJ Webshell分析
Pspnet | semantic segmentation and scene analysis
Google Earth Engine(GEE)——Kernel核函数简单介绍以及灰度共生矩阵
Jarvis OJ webshell analysis
[es6] 模板字符串内添加if判断或添加三元运算符判断