webkit内核渲染原理

原创于 2019-01-31 00:13:54 发布 · 675 阅读

CC 4.0 BY-SA版权

文章标签：

2 篇文章

订阅专栏

本文详细解析了浏览器从接收URL开始，如何加载HTML文档、构建DOM树、解析CSS生成样式表，直至完成页面渲染的全过程。涉及网络请求、HTML解析、CSS解析、DOM构建、渲染树生成等关键步骤。

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

当用户输入URL之后，浏览器的网络资源模块就会发网络请求并建立连接，从而加载URL对应的html文档
这时Browser进程（浏览器唯一主进程）就会分叉一个Render进程，然后Render进程又会产生一个HTMLParserThread去专门负责html的解析
在网络模块的ResourceLoader类或者CacheRawResource类就会将收到的数据传给HTMLDocumenParsert类创建一个BackgroundHTMLParser对象来做DOM的构建
html文档从字节流 ->解码成->字符流->词法分析器HTMLTokenizer->xss Auditor 对象过滤生成词法token->语法分析器HTMLTreeBuilder调用constructorTree生成节点信息->HTMLConstructionSite 生成DOM树（如果其中有js代码需要执行或者加载，则把行使权交给HTMLScriptRuner类去负责，于此同时就会阻塞后面的资源加载）
内核调用Bison加载CSSGrammer.y.in文件生成css解析器来解析css文件将生成的结果设置到document.styleSheets中
CSSOM+DOM => RenderObject （呈现树）
RenderOject + 网页的层次结构 => RenderLayer树 + 绘图上下文
内核根据绘图上下文 + 一些2d ,3d图形库生成最终的图像