计算机架构：硬件、操作系统和应用

进程与线程

• 进程：进程间靠 IPC 通信，一个进程可以让操作系统开启另一个进程处理不同的任务
  • 线程
    • 协程：async/await 是基于协程实现的

浏览器架构

• 浏览器进程（Browser process）
  • 负责管理 Chrome 应用本身，包括地址栏、书签、前进和后退按钮
  • 网络请求，文件访问等不可见功能
  • 负责其他进程的调度
• 渲染进程（Renderer process）
  • 负责站点的渲染
  • js 代码的运行
  • web worker 的管理
• 插件进程（Plugin process）
  • 为浏览器提供各种额外的插件功能，如 flash
• GPU 进程（GPU process）
  • 负责提供成像的功能

一次访问

• 输入处理：当我们在地址栏中输入是，UI 线程会先判断是搜索的内容还是要访问一个站点
• 访问开始：敲下回车，UI 线程将借助网络线程访问站点资源，浏览器页签的标题上会出现加载中的图标，同时网络线程会根据适当的网络协议，如 DNS lookup 和 TLS 为这次请求建立连接，当服务器返回给浏览器重定向请求时，网络线程会通知 UI 线程需要重定向，然后会以新的地址开始请求资源
• 处理响应数据：
  • 当网络线程收到来自服务器的数据时，从得到数据的类型（Content-Type），如 类型为 HTML，会将数据传递给渲染进程进行渲染，类型为 zip 或其他文件格式时，会将数据传递给下载管理器进行文件预览或下载工作
  • 在渲染前，网络线程会先检查数据的安全性，若数据来自恶意的站点，网络线程会先显示警告的页面，同时，Cross Origin Read Blocking（CORB）策略会确保跨域的敏感数据不会被传递给渲染进程
• 渲染过程：当检查结束后，网络进程确信浏览器可以访问站点时，网络线程通知 UI 线程数据已备好。UI 线程会找到一个渲染进程进行渲染
• 提交访问：
  • 浏览器进程会通过 IPC 向渲染进程提交此访问，同时会保证渲染进程可以通过网络线程继续获取数据。一旦浏览器进程收到渲染进程确认完毕的消息，就意味着访问的过程结束了，文档渲染的过程就开始了
  • 地址栏会显示表明安全的图标，站点的信息，访问历史中也会加入当前的站点信息。为了能恢复访问历史信息，当窗口被关闭时，访问历史信息会被存在硬盘中
• 加载完毕
  • 当访问被提交给渲染进程，渲染进程会继续加载页面资源并渲染页面。当渲染进程”结束“渲染工作，会给浏览器进程发送消息，这个消息会在页面中所有子页面（frame）结束加载后（即 onLoad 事件触发后）发送。
  • 当收到”结束“消息后，UI 线程会隐藏页签标题上的加载状态图标，表明页面加载完毕
  • 但这里”结束“并不意味着所有的加载工作都结束，因为可能还有 js 在加载额外的资源或渲染新的视图

访问不同的站点

• 当我们输入另外一个地址时，浏览器进程会重复上面的过程。但在开始新的访问前，会确认当前的站点是否关心beforeunload事件
• beforeunload事件可以提醒用户是否要访问新的站点或关闭页签，若用户拒绝则新访问被关闭或阻止
• 若一次访问是从一个渲染进程中发起的，如用户点击一个链接或运行 js 代码location='http://new.com'时，渲染进程首先检查beforeunload。然后再执行浏览器进程初始化访问。只不过访问请求是由渲染进程向浏览器进程发起的。

Service worker

• 一种 web 开发者控制缓存的技术
• service worker 中的代码运行在渲染进程中。

总结

• 浏览器进程做为最重要的进程负责大多数页签外部的工作，包括地址栏显示、网络请求、页签状态管理等
• 不同的渲染进程负责不同的站点渲染工作，渲染进程间彼此独立
• 渲染进程在渲染页面的过程中会通过浏览器进程获取站点资源，只有安全的资源才会被渲染进程接收到
• 渲染进程中主线程负责除了图像生成外绝大多数工作，如何减少主线程上代码的运行是交互性能优化的关键
• 渲染进程中的合成线程和栅格线程负责图像生成，利用分层技术可以优化图像生成的效率
• 当用户与页面发生交互时，事件的传播途径从浏览器进程到渲染进程的合成线程再根据事件监听的区域决定是否要传递给渲染进程的主线程处理