Chrome内核解析 -- 背景篇：Chromium/Blink的工作流程

最新推荐文章于 2024-11-06 22:53:38 发布

原创

最新推荐文章于 2024-11-06 22:53:38 发布 · 6.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#Chromium #Blink #工作流程 big picture #Architecture

本文详细介绍了Chromium/Blink浏览器渲染页面的过程，包括启动、资源加载、HTML/CSS/JS解析、DOM和RenderObject Tree构建、布局计算、绘制与合成等步骤，以及事件驱动的main loop如何处理动态更新和用户交互。

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

转载请注明出处：http://blog.youkuaiyun.com/yunchao_he/article/details/41697489

本节简单介绍下Chromium/Blink绘制页面的基本工作流程。用户点击链接或输入网址，到最终显示网页内容，经历了以下几个重要步骤：

1. Chromium的启动和资源加载

用户输入URL（如www.163,com）并回车，Chrome会立即调用资源加载器，加载网页本身（比如index.html)。解析HTML时，如果发现某个节点还指向的其它的HTML文件，以及JS文件，CSS文件，图片，音视频文件等其它资源，也会加载这些资源。解析新加载的HTML，JS文件，CSS文件时，如果还指向其它需要加载的资源，则继续加载。整个过程类似于深度优先算法，伴随着HTML, CSS和JS的解析与执行而不断发现新的资源需要加载，如此往复，直到所有的资源全部加载完成。

2. 解析HTML, CSS, 执行Javascript

从网络接收到的HTML文件（实际上是字符流），会被解析成一个个Token，并构建Dom tree。同时还会解析CSS并构建RenderObject Tree，解析并执行JS。它和资源加载过程有重叠，因为解析HTML/CSS/JS过程可能发现当前结点或文件指向一个或多个新的HTML/CSS/JS文件。那么问题来了，当前HTML/CSS/JS解析过程中发现需要加载新资源，是否会打断当前的解析过程呢？这得看情况，如果新加载的文件是HTML/CSS/JS，这时的新加载是同步的，会暂停当前文件的解析，先加载新的文件。待加载完成后再解析当前文件。而如果新加载的文件是图片或音视频文件，则发起异步加载请求（通常有单独的加载线程），而无需打断