这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
今天在学习李松峰老师的web开发标准和浏览器课程的中，老师推荐了一篇浏览器的文章，看了感觉收获挺大的，由此记录一下。多了解一些浏览器，那么就会更容易达成你提升用户体验的目标。
- 架构：以Chrome为例，介绍现代浏览器的实现架构。
- 导航：从输入URL到获到HTML响应称为导航。
- 渲染：浏览器解析HTML、下载外部资源、计算样式并把网页绘制到屏幕上。
- 交互：用户输入事件的处理与优化。
架构
- 浏览器进程：控制浏览器这个应用的chrome（主框架）部分，包括地址栏、书签、前进/后退按钮等，同时也会处理浏览器不可见的高权限任务，如发送网络请求、访问文件。
- 渲染器进程：负责在标签页中显示网站及处理事件。
- 插件进程：控制网站用到的所有插件。
- GPU进程：在独立的进程中处理GPU任务。之所以放到独立的进程，是因为GPU要处理来自多个应用的请求，但要在同一个界面上绘制图形。
导航
导航涉及浏览器进程与线程间为显示网页而通信。一切从用户在浏览器中输入一个URL开始。输入URL之后，浏览器会通过互联网获取数据并显示网页。从请求网页到浏览器准备渲染网页的过程，叫做导航。
下面我们逐步看一看导航的几个步骤。
第一步：处理输入。UI线程会判断用户输入的是查询字符串还是URL。因为Chrome的地址栏同时也是搜索框。
第二步：开始导航。如果输入的是URL，UI线程会通知网络线程发起网络调用，获取网站内容。此时标签页左端显示旋转图标，网络线程进行DNS查询、建立TLS连接（对于HTTPS）。网络线程可能收到服务器的重定向头部，如HTTP 301。此时网络线程会跟UI线程沟通，告诉它服务器要求重定向。然后，再发起对另一个URL的请求。
第三步：读取响应。服务器返回的响应体到来之后，网络线程会检查接收到的前几个字节。响应的Content-Type头部应该包含数据类型，如果没有这个字段，则需要MIME类型嗅探
第四步：联系渲染器进程。所有查检完毕，网络线程确认浏览器可以导航到用户请求的网站，于是会通知UI线程数据已经准备好了。UI线程会联系渲染器进程渲染网页。
第五步：提交导航。数据和渲染器进程都有了，就可以通过IPC从浏览器进程向渲染器进程提交导航。渲染器进程也会同时接收到不间断的HTML数据流。当浏览器进程收到渲染器进程的确认消息后，导航完成，文档加载阶段开始。
渲染
解析HTML -> 计算样式 -> 布局 -> 绘制 -> 合成
交互
最后，我们看一看合成器如何处理用户交互。说到用户交互，有人可能只会想到在文本框里打字或点击鼠标。实际上，从浏览器的角度看，交互意味着来自用户的任何输入：鼠标滚轮转动、触摸屏幕、鼠标悬停，这些都是交互。
