HTML解析 → DOM树 CSS解析 → CSSOM → 合并 → 渲染树 → 布局 → 绘制 → 合成 → 屏幕显示

一、关键渲染流程

  1. 解析 HTML → 生成 DOM 树

    • 浏览器逐行解析 HTML,构建**DOM(文档对象模型)**树状结构

    • 遇到 <link><style> 标签时会暂停 HTML 解析,开始加载 CSS

  2. 解析 CSS → 生成 CSSOM

    • 将 CSS 规则解析为**CSSOM(CSS 对象模型)**树

    • 浏览器处理选择器优先级(权重计算)、继承和层叠规则

  3. 合并 DOM + CSSOM → 构建渲染树(Render Tree)

    • 结合 DOM 和 CSSOM,过滤不可见元素(如 display: none

    • 保留可见节点及其计算后的样式信息

  4. 布局(Layout/Reflow)

    • 计算每个节点的几何信息(位置、尺寸)

    • 确定视口(viewport)内元素的精确坐标

    • 首次布局称为「回流」

  5. 绘制(Painting)

    • 将布局结果转换为屏幕上的像素

    • 分图层绘制(如处理 z-index

    • 可能触发重绘(Repaint)

  6. 合成(Compositing)

    • 将不同图层合并为最终界面

    • 利用 GPU 加速处理动画等效果


二、CSS 解析细节

  1. 选择器匹配

    • 浏览器从右向左匹配选择器(优化性能)

    • 例:div .box a 先查找 <a> 标签,再向上匹配

  2. 层叠规则

    • 优先级顺序:!important > 内联样式 > ID > 类/伪类 > 标签

    • 相同权重时,后定义的样式覆盖前者

  3. 继承机制

    • 部分属性(如 font-family, color)会继承到子元素

    • 显式设置 inherit 可强制继承


三、性能优化要点

  1. 减少回流(Layout Thrashing)

    • 避免频繁读取布局属性(如 offsetWidth

    • 使用 transform/opacity 等触发合成层(跳过布局和绘制)

  2. 选择器优化

    • 避免过度嵌套(如 .nav ul li a

    • 减少通用选择器 * 的使用

  3. 渲染阻塞

    • <link> 标签默认会阻塞渲染,可使用 media 属性优化加载

    • 关键 CSS 可内联以加速首屏渲染


四、调试工具

  1. Chrome DevTools:

    • Performance 面板:分析完整渲染流程

    • Layers 面板:查看合成层信息

    • Rendering 选项卡:高亮重绘区域


总结流程图

复制

复制代码
HTML解析 → DOM树
       ↓
CSS解析 → CSSOM → 合并 → 渲染树 → 布局 → 绘制 → 合成 → 屏幕显示
相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9493 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_3 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路5 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔6 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang6 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔6 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任6 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴6 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔6 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js