浏览器渲染过程解析——从URL到页面显示

最新推荐文章于 2025-07-11 08:07:22 发布

原创

最新推荐文章于 2025-07-11 08:07:22 发布 · 5.7k 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #前端 #页面渲染 #HTML解析 #浏览器性能优化

本文详细解析了浏览器从接收HTML到显示完整页面的渲染流程，包括浏览器简介、渲染流程、HTML解析与DOM树构建、CSS解析、渲染及性能优化。重点介绍了DOM树和CSS Rule Tree的生成、布局与绘制过程，以及如何优化页面加载速度和编写高效的CSS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写了一段时间的前端页面了，对于浏览器中页面的渲染流程和原理还有点一知半解，所以就花时间去学习了解了下浏览器的渲染原理，这边对自己的理解总结一下，如有错误请指正。

一、浏览器简介

浏览器是使用最广泛的软件之一，主要功能是向服务器发出请求，在浏览器窗口中展示用户需要的网络资源。资源的位置由用户的的URI（Uniform Resource Identifier统一资源标识符）来指定，通过DNS查询，将网址转换为IP地址。资源的格式通常是HTML，也包括PDF、image及其他格式。整个浏览器工作的流程，主要如下：

用户输入网址——浏览器查找IP地址——发送HTTP请求——服务器处理请求并响应——服务器发回HTML响应——浏览器开始解析HTML——浏览器发送请求获取HTML中内嵌的对象，如CSS/JS/图片等资源——浏览器展示完整页面

本次介绍的主要就是浏览器从接收到服务器响应的HTML到展示完整页面的整个过程，下面开始——

二、浏览器渲染流程

先来一张浏览器渲染流程图

从这张经典的图中可以看出以下几点：

1，浏览器可以解析的资源，HTML，SVG，XHTML等，解析完会生成DOM Tree。

2，CSS资源会解析成CSS Rule Tree。

3，JS通过DOM API和CSSOM API来操作DOM树和CSS树。

4，解析完成后综合DOM树和CSS树会生成Rendering Tree，计算每个元素（Frame）的位置，这个过程就是layout或者叫reflow过程。

5，调用操作系统Native GUI的API绘制。

注意：上述这个过程是理论上是逐步完成的，但是实际实现中为了更好的用户体验，渲染引擎为了尽可能早的将内容呈现到屏幕上，会在构建DOM树的同时去解析CSS构建CSS树，并且还会去生成Rendering Tree。解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容，这样就可以更快的显示出页面，其中解析后面的内容涉及到布局和样式的改变引起的reflow过程和repaint，我们后面在详细说明。

接下来我们一步步详细说明：