这节课的重点是讲了浏览器的架构及其运算原理
浏览器由shell(用户界面、网络、UI后端、JavaScript解释器、XML解析器、数据存储)和内核(浏览器引擎、渲染引擎)组成,内核是浏览器的核心。不同的浏览器有不同的内核,ie 浏览器是 Trident,Firefox 浏览器是 Geoko(Mozilla自主研发的渲染引擎),Safari 和 Chrome 使用的是 webkit (后来 Chrome 推出了 Blink)。
课程重点分为以下几点:
-
浏览器架构
- 浏览器架构变迁
- 浏览器各架构对比
- 多进程架构介绍
-
渲染进程
- 渲染进程多线程架构
- JS引擎VS渲染引擎
- 多线程工作流程
-
chrome运行原理
- 主进程工作流程
- 渲染进程工作流程
- 浏览器性能优化
-
跨端容器
- 跨端的由来
- 常见的跨端方案
其中浏览器的架构从单线程架构,到多进程架构,最后发展到了面向服务架构,我们所熟悉的Chrome浏览器 仍在努力的完善面向服务架构。
Chrome的运行原理
- 第一步:处理输入
当用户开始在导航栏上面输入内容的时候,UI线程(UI thread)做的第一件事就是询问:“你输入的字符串是一些搜索的关键词(search query)还是一个URL地址呢?”。因为对于Chrome浏览器来说,导航栏的输入既可能是一个可以直接请求的域名还可能是用户想在搜索引擎(例如Google)里面搜索的关键词信息,所以当用户在导航栏输入信息的时候UI线程要进行一系列的解析来判定是将用户输入发送给搜索引擎还是直接请求你输入的站点资源,UI线程在询问输入的字符串是搜索关键词还是一个URL。
- 第二步:开始导航
当用户按下回车键的时候,UI线程会叫网络线程(network thread)初始化一个网络请求来获取站点的内容。这时候tab上会展示一个提示资源正在加载中的旋转圈圈,而且网络线程会进行一系列诸如DNS寻址以及为请求建立TLS连接的操作。
- 第三步:读取响应
网络线程在收到HTTP响应的主体(payload)流(stream)时,在必要的情况下它会先检查一下流的前几个字节以确定响应主体的具体媒体类型(MIME Type)。响应主体的媒体类型一般可以通过HTTP头部的Content-Type来确定,不过Content-Type有时候会缺失或者是错误的,这种情况下浏览器就要进行MIME类型嗅探来确定响应类型了。MIME类型嗅探并不是一件容易的事情,你可以从Chrome的源代码的注释来了解不同浏览器是如何根据不同的Content-Type来判断出主体具体是属于哪个媒体类型的。
- 第四步:寻找一个渲染进程(renderer process)
在网络线程做完所有的检查后并且能够确定浏览器应该导航到该请求的站点,它就会告诉UI线程所有的数据都已经被准备好了。UI线程在收到网络线程的确认后会为这个网站寻找一个渲染进程(renderer process)来渲染界面。
- 第五步:提交(commit)导航
到这一步的时候,数据和渲染进程都已经准备好了,浏览器进程(browser process)会通过IPC告诉渲染进程去提交本次导航(commit navigation)。除此之外浏览器进程还会将刚刚接收到的响应数据流传递给对应的渲染进程让它继续接收到来的HTML数据。一旦浏览器进程收到渲染线程的回复说导航已经被提交了(commit),导航这个过程就结束了,文档的加载阶段(document loading phase)会正式开始。 到了这个时候,导航栏会被更新,安全指示符(security indicator)和站点设置UI(site settings UI)会展示新页面相关的站点信息。当前tab的会话历史(session history)也会被更新,这样当你点击浏览器的前进和后退按钮也可以导航到刚刚导航完的页面。为了方便你在关闭了tab或窗口(window)的时候还可以恢复当前tab和会话(session)内容,当前的会话历史会被保存在磁盘上面。