当前位置: 首页 > news >正文

浏览器渲染原理

浏览器在接收到HTML文档后,会通过一系列步骤将其转换为用户可见的网页。这个过程包括:解析、样式计算、布局(reflow)、分层、绘制(Repaint)、分块和光栅化、合成和显示。每个阶段都紧密相连,上一阶段的输出成为下一阶段的输入。

HTML解析与预解析
  • HTML解析:主线程解析HTML文档,构建DOM树
  • CSS解析:预解析线程下载并解析CSS,构建CSSOM树
  • JS执行:遇到<script>标签时,HTML解析暂停,直到脚本下载并执行完毕。这是因为JavaScript可能修改DOM结构,除非标记为async/defer
  • 预解析:为了提高效率,浏览器使用预解析线程预先加载外部资源(如CSS、JS文件),避免阻塞主线程。
样式计算
  • 在DOM树和CSSOM树的基础上,计算出每个节点的具体样式(Computed Style),这个过程包括:继承样式、层叠样式、单位转换(em→px,百分比→绝对值等)、浏览器默认样式。
布局(Reflow、回流)
  • 计算每个元素的几何信息(宽高、位置等),生成布局树(Layout Tree或Render Tree)。此过程如果被触发(例如,页面尺寸改变或内容更新),称为回流(reflow)。为了避免频繁的回流操作影响性能,浏览器通常会批量处理这些请求。
  • DOM树与布局树的差异:display: none的元素不会出现在布局树中,伪元素会出现在布局树中。
分层
  • 依据复杂的策略将页面分成多个图层,分层目的是优化渲染性能(独立层可以单独重绘),比如滚动条、堆叠上下文、transform、opacity等。
绘制(Repaint、重绘)
  • 对每个图层生成绘制指令集,描述如何渲染。当需要重新绘制某部分(例如颜色变化)但不影响布局时,这被称为重绘(repaint)。绘制工作由主线程完成,但实际绘制由合成线程处理
光栅化与合成
  • 将图层分割成小块,并快速地转化为位图形式(光栅化)。合成线程负责管理这些位图的显示顺序和变换(如旋转、缩放),然后提交给GPU完成最终的屏幕渲染。

Transform 的高效性

  1. 独立合成层:transform属性通常会创建一个新的合成层,这个层可以独立于其他层进行处理。
  2. GPU加速:现代浏览器会将transform动画交给GPU处理,GPU擅长并行处理这类计算。
  3. 避免回流和重绘:transform动画不会影响文档流,因此不会触发昂贵的回流计算。
  4. 合成线程处理:transform变化发生在合成阶段,不需要主线程参与,避免了JavaScript和样式计算的阻塞。
  5. 16ms优化:浏览器针对transform和opacity变化进行了特殊优化,能更好地配合60fps(每帧16ms)的渲染节奏。
  6. 最小化重绘区域:transform变化只需要重绘受影响图层,而不是整个页面。
http://www.xdnf.cn/news/452413.html

相关文章:

  • 【苍穹外卖-管理端部分-学习笔记】
  • AI智能体的现状和应用前景
  • 深入解析 PostgreSQL 外部数据封装器(FDW)的 SELECT 查询执行机制
  • typeof运算符和深拷贝
  • primitive创建图像物体
  • 界面控件DevExpress WinForms v24.2 - 数据处理功能增强
  • Oracle where条件执行先后顺序
  • OpenUCX 库介绍与使用指南
  • 深度解析国际数字影像产业园产校融合的协同发展模式​
  • CMake入门与实践:现代C++项目的构建利器
  • CST软件机箱屏蔽效能仿真案例
  • SAR 原始数据预处理的理解
  • 源码交付+可控部署:用户行为分析系统的落地经验
  • 【Pandas】pandas DataFrame describe
  • 16S18S基础知识(1)
  • Leetcode209做题笔记
  • SCAICH(Scientific AI Search Engine)
  • spring boot 注解
  • 【征稿通知】OCSA 2025投稿享早鸟优惠
  • 如何通过数据集成实现金蝶云星空高效对接
  • Flink CDC—实时数据集成框架
  • [已解决] VS Code / Cursor / Trae 的 PowerShell 终端 conda activate 进不去环境的常见问题
  • JAVA实战开源项目:校园网上店铺系统 (Vue+SpringBoot) 附源码
  • 用 wireshark 解密 SIP over TLS 以及 SRTP 解密
  • libmemcached库api接口讲解三
  • 速来体验丨MaxKB v1.10.7 LTS版本发布,支持接入Qwen3
  • 嵌入式学习笔记DAY20(链表,gdb调试)
  • vue2 头像上传+裁剪组件封装
  • FFplay 音视频同步机制解析:以音频为基准的时间校准与动态帧调整策略
  • 动态稀疏化训练系统设计:从算法到GPU硬件协同优化