浏览器架构与渲染原理

浏览器采用多进程架构与渲染进程多线程协作机制，通过资源加载策略和渐进式渲染优化性能，核心流程包括解析构建DOM/CSSOM、合并渲染树、布局绘制，并受脚本执行与CSS解析的阻塞关系影响。

一、浏览器多进程架构

二、渲染进程的关键线程

GUI渲染线程：
解析HTML构建DOM树，解析CSS构建CSSOM树。
合并DOM与CSSOM生成渲染树，计算布局并绘制页面。
与JS引擎线程互斥：执行JavaScript时挂起GUI线程，避免竞态条件。
JS引擎线程：
解析并执行JavaScript代码，修改DOM或CSSOM时需等待GUI线程空闲。
其他线程：
事件触发线程：管理事件队列（如点击、滚动），事件触发时通知GUI线程处理。
定时器线程：执行setTimeout/setInterval，时间到后将回调函数推入任务队列。
异步HTTP请求线程：处理网络请求，响应完成后触发回调。

三、资源加载与解析

HTML解析：
边下载边解析，构建DOM树时：
遇到CSS：继续解析HTML，CSS异步下载后解析。
遇到图片：继续解析HTML，图片资源异步加载。
遇到<script>：根据类型处理（普通脚本阻塞解析，async/defer异步加载）。
CSS解析：
异步下载，不阻塞HTML解析，但解析过程在GUI线程进行。
阻塞渲染与JS：必须等待CSSOM构建完成才能渲染页面；JS若访问CSSOM需等待CSS解析。
被JS阻塞：JS执行时挂起GUI线程，暂停CSS解析。
JavaScript执行：
普通脚本：
下载时阻塞HTML解析，执行前需等待HTML和CSS解析完成。
执行时阻塞后续HTML解析和CSS解析。
async脚本：
异步下载，下载完成后立即执行（不等待HTML解析），但需等待之前CSS解析。
执行时阻塞HTML解析，多个async脚本执行顺序不确定。
defer脚本：
异步下载，在HTML解析完成后、DOMContentLoaded事件前按顺序执行。
执行时阻塞解析，但不影响HTML下载。

四、渲染流程

五、阻塞关系总结

HTML解析阻塞：
被普通脚本的下载和执行阻塞。
被async/defer脚本的执行阻塞（下载不阻塞）。
不被CSS加载和解析阻塞。
CSS解析阻塞：
不阻塞HTML解析，但阻塞页面渲染和JS执行。
被JS执行阻塞（GUI线程挂起）。
JavaScript执行阻塞：
普通脚本：等待HTML和CSS解析完成，阻塞后续解析。
async脚本：等待CSS解析完成，不等待HTML，执行时阻塞HTML解析。
defer脚本：等待HTML和CSS解析完成，按顺序执行，执行时阻塞解析。

六、渐进式渲染

基本原理：
DOM树分块构建：优先解析首屏关键DOM。
CSSOM必须完整：渲染树依赖完整CSSOM，但可仅包含部分DOM。
渲染时机：
首次渲染：CSSOM完成且DOM有足够内容显示。
后续渲染：积累DOM节点、遇到特定标签（如</table>）、达到时间阈值或系统资源允许时。
渲染阻塞：JS执行或CSS未完成时暂停渲染。
优化策略：
内容组织：
首屏关键内容前置（如内联关键CSS、<link rel="preload>）。
非关键内容懒加载或分块加载。
CSS优化：
关键CSS内联，非关键CSS异步加载（如onload切换rel属性）。
使用媒体查询按需加载CSS（如打印样式）。
渲染优化：
使用骨架屏提供占位布局。
通过font-display: swap控制字体加载行为。
避免大型DOM操作（如使用DocumentFragment批量更新）。

热门标签