一、简介
1、浏览器进化路线
- 第一个是应用程序 Web 化
- 第二个是 Web 应用移动化
- 第三个是 Web 操作系统化
2、为什么需要学习浏览器工作原理？
- 准确评估 Web 开发项目的可行性
- 从更高维度审视页面 首屏的显示就涉及了 DNS、HTTP、DOM 解析、CSS 阻塞、JavaScript 阻塞等技术因素
- 在快节奏的技术迭代中把握本质---Node.js 是前端发展的一个核心推动力
二、浏览器的宏观架构
1、仅仅打开了1个页面，为什么有4个进程？
答： 因为打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个；如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。
- 线程 VS 进程多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。那什么又是进程呢？
- 线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。
- 1.进程中的任意一线程执行出错，都会导致整个进程的崩溃。
- 2.线程之间共享进程中的数据。
- 3.当一个进程关闭之后，操作系统会回收进程所占用的内存。
- 4.进程之间的内容相互隔离。
- 单进程浏览器
如此多的功能模块运行在一个进程里，是导致单进程浏览器不稳定、不流畅和不安全的一个主要因素 - 多进程浏览器
解决不稳定的问题：由于进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程
不流畅的问题：JavaScript 也是运行在渲染进程中的，所以即使 JavaScript 阻塞了渲染进程，影响到的也只是当前的渲染页面，而并不会影响浏览器和其他页面
安全问题:Chrome 把插件进程和渲染进程锁在沙箱里面，这样即使在渲染进程或者插件进程里面执行了恶意程序，恶意程序也无法突破沙箱去获取系统权限。
- 最新的多进程架构
- 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
- 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
- GPU 进程。其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
- 网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
- 插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。
- 多进程架构弊端
1、 更高的资源占用。
2、更复杂的体系架构。 - 总结
最初的浏览器都是单进程的，它们不稳定、不流畅且不安全，之后出现了 Chrome，创造性地引入了多进程架构，并解决了这些遗留问题。随后 Chrome 试图应用到更多业务场景，如移动设备、VR、视频等，为了支持这些场景，Chrome 的架构体系变得越来越复杂，这种架构的复杂性倒逼 Chrome 开发团队必须进行架构的重构，最终 Chrome 团队选择了面向服务架构（SOA）形式，这也是 Chrome 团队现阶段的一个主要任务。
2 、TCP协议：如何保证页面文件能被完整送达浏览器？
- 重传机制
- 数据包排序机制
在衡量 Web 页面性能的时候有一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。那什么影响 FP 指标呢？其中一个重要的因素是网络加载速度。
TCP 连接过程包括了建立连接、传输数据和断开连接三个阶段。
IP：把数据包送达目的主机
UDP：把数据包送达应用程序
TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。
相对于 UDP，TCP 有下面两个特点:
- 对于数据包丢失的情况，TCP 提供重传机制；
- TCP 引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件。
- TCP 为了保证数据传输的可靠性，牺牲了数据包的传输速度，因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。
- 总结
- 互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。
- IP 负责把数据包送达目的主机。
- UDP 负责把数据包送达具体应用。
- TCP 保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。
3、浏览器工作原理与实践
浏览器端发起 HTTP 请求流程
HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础，正是建立在 TCP 连接基础之上的，HTTP 也是浏览器使用最广的协议
- 1.构建请求
浏览器构建请求行信息，构建好后，浏览器准备发起网络请求。
GET /index.html HTTP1.1
- 2.查找缓存
浏览器缓存是一种在本地保存资源副本，以供下次请求时直接使用的技术
- 3. 准备 IP 地址和端口
浏览器使用 HTTP 协议作为应用层协议,使用 TCP/IP 作传输层协议将它发到网络上,HTTP 的内容是通过 TCP 的传输数据阶段来实现的
你会发现在第一步浏览器会请求 DNS 返回域名对应的 IP。当然浏览器还提供了 DNS 数据缓存服务,拿到 IP 之后，接下来就需要获取端口号了。通常情况下，如果 URL 没有特别指明端口号，那么 HTTP 协议默认是 80 端口。
- 4.等待 TCP 队列
Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接,如果超过6会排队等待。小于6，进入TCP连接状态 - 5.建立TCP连接
在 HTTP 工作开始之前，浏览器通过 TCP 与服务器建立连接 - 6.发送HTTP请求
一旦建立了 TCP 连接，浏览器就可以和服务器进行通信了。而 HTTP 中的数据正是在这个通信过程中传输的。
首先浏览器会向服务器发送请求行，它包括了请求方法、请求 URI（Uniform Resource Identifier）和 HTTP 版本协议。 - 7.服务器处理HTTP请求
（1）返回请求，包含响应行（协议版本、状态码）、响应头、响应体
curl -i https://time.geekbang.org/
（2）断开连接
通常情况下，一旦服务器向客户端返回了请求数据，它就要关闭 TCP 连接。不过如果浏览器或者服务器在其头信息中加入了：Connection:Keep-Alive，保持 TCP 连接可以省去下次请求时需要建立连接的时间，提升资源加载速度
Connection:Keep-Alive
（3 ）重定向
```js
curl -I geekbang.org ```
问题：
- 为什么很多站点第二次打开速度会很快？
主要原因是第一次加载页面过程中，缓存了一些耗时的数据（DNS 缓存和页面资源缓存这两块数据是会被浏览器缓存的）
服务器是通过什么方式让浏览器缓存数据的？
当服务器返回 HTTP 响应头给浏览器时，浏览器是通过响应头中的 **Cache-Control 字段来设置是否缓存该资源，**通过 Cache-Control 中的 Max-age 参数来设置缓存时长。
Cache-Control:Max-age=2000
如果缓存未过期会直接访问缓存中的资源，否则重发请求，在 HTTP 请求头中带上
If-None-Match:"4f80f-13c-3a1xb12a"
- 如果没有更新，就返回 304 状态码，相当于服务器告诉浏览器：“这个缓存可以继续使用，这次就不重复发送数据给你了。
- ”如果资源有更新，服务器就直接返回最新资源给浏览器。
缓存的细节查看
- 登录状态是如何保持的？
了解了缓存是如何工作的。下面我们再一起看下登录状态是如何保持的。前端将用户信息发给服务端，服务端验证成功并生成一段表示身份的字符串并写到响应头Set-cookie字段里， 然后把响应头传给浏览器,浏览器存到cookie中，并在下次访问的时候携带这个cookie，服务端根据判断是哪一个。客户端发来的连接请求，然后对比服务器上的记录，最后得到该用户的状态信息,通常需要在浏览器cookie设置httponly，提高安全性
Set-Cookie: UID=3431uad;
浏览器页面状态是通过使用 Cookie 来实现的
总结：
