HTML/CSS/JS是如何在浏览器中渲染成你看到的页面?【图解Chrome】

Chrome 算是程序员的标配了,从全球的市场份额来看,它在全球市场的份额已经超过 60%。

成都创新互联公司服务项目包括铜仁网站建设、铜仁网站制作、铜仁网页制作以及铜仁网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,铜仁网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到铜仁省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

在 Chrome 10 周年之际,官方发布了一个系列文章,用图解的方式,很清晰的讲解了现代浏览器的运行原理。

渲染器进程涉及到 Web 性能相关的多个方面,由于渲染器进程中处理了很多的逻辑,不是一篇文章可以全面讲解的,因此本文仅作为一个概述。如果你有兴趣深入研究,可以在《Why Performance Matters》这篇文章里找到更多的资料。

渲染器进程处理Web内容

所有选项卡内发生的逻辑,都由渲染器进程负责。在渲染器进程中,主线程处理了服务器发送给用户的大部分代码。如果你使用到 Web Workder 或者Service Worker,那 JavaScript 中的这部分代码,将由工作线程处理。Compositor(合成器) 和 Raster(光栅) 线程也在渲染器内运行,从而实现高效、流畅的渲染页面。

渲染器进程的核心工作是将 HTML,CSS 和 JavaScript 转换为用户可以与之交互的网页。

HTML/CSS/JS 是如何在浏览器中渲染成你看到的页面?【图解Chrome】
image.png

上图中,描述了具有主线程、工作线程、Compositor 线程、Raster 线程的渲染器进程,以及他们之间的关系。

解析

构建 DOM

当渲染器进程收到一个导航请求,并开始接收 HTML 数据,主线程将开始处理文本字符串(HTML),将其解析成 DOM(Document Object Model)。

DOM 是 Web 页面的内部的逻辑树文档结构,Web 开发人员可以通过 JavaScript 脚本与之交互数据,以及通过标准 API 来操作 DOM 节点。

将 HTML 文档解析成 DOM 是完全依照于 HTML 协议。并且在 HTML 协议中,浏览器不会对错误的 HTML 进行错误提示。例如,缺少结束的 

标签时,这依然是一个有效的 HTML。类似 Hi! I'm Chrome!  中, b 标签在 i 标签之前关闭这样的错误,会被 HTML 理解为 Hi! I'm Chrome!  。这是因为 HTML 规范的主要原则是优雅的处理这些错误,而不是严格检查。

如果你对这些规范感到好奇,可以阅读 HTML 规范中的 “解析器中的错误处理和奇怪案例介绍” 部分。

解析器中的错误处理和奇怪案例介绍:

https://html.spec.whatwg.org/multipage/parsing.html#an-introduction-to-error-handling-and-strange-cases-in-the-parser

子资源加载

一个完整的 Web 站点通常会包含图片、CSS 和 JS 等外部资源,这些文件都需要从网络或者本地缓存中加载。主线程可以在解析构建 DOM 的时候,将他们逐个请求,但是为了加快速度,会同时使用 “预加载扫描(Preload Scanner)”。

如果 “预加载扫描” 发现有类似  或  这样的标签时,会由 HTML 解析器对该资源生成一个 Tokens,然后在浏览器进程中,通过网络或者本地缓存来加载资源。

HTML/CSS/JS 是如何在浏览器中渲染成你看到的页面?【图解Chrome】
image.png

上图描述了,主线程解析 HTML 并构建 DOM 树的过程。

自己是一个五年的前端工程师

这里推荐一下我的前端学习交流群:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入。 点击:  加入

JS 可以阻止解析

当 HTML 解析器遇到