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 → 合并 → 渲染树 → 布局 → 绘制 → 合成 → 屏幕显示
相关推荐
前端进阶者几秒前
js通知提醒
前端·javascript
拖孩6 分钟前
微信群太多,管理麻烦?那试试接入AI助手吧~
前端·后端·微信
乌兰麦朵23 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Code季风23 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾23 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿25 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸25 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic26 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮27 分钟前
vite打包的简单配置
前端
Codebee27 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试