从输入URL到页面显示

1. 预备知识
   1. chrome浏览器打开一面启动4个进程
      1. 进程和线程区别
         1. 线程是操作系统能够进行运算调度的最小单位，使用多线程的并行处理能提高效率
         2. 线程不能当独存在的，它是由进程来启动和管理的
         3. 进程是一个程序运行的实例（启动程序时候，操作系统为程序开辟用于满足程序运行需要的内存环境）
         4. 进程和线程之间的关系：
            1. 进程中的任意线程执行出错，都会导致整个进程崩溃
            2. 线程之间共享进程中的数据
            3. 当进程关闭之后，操作系统会回收进程占用的内存
            4. 进程之间的内容相互隔离（进程间通讯方式：IPC）
      2. 单进程浏览器缺点：不稳定（插件和渲染引擎模块不稳定）、不流畅、不安全（恶意插件）
      3. 多进程浏览器：
         1. 进程间相互隔离，当前页面插件出问题不会影响其他页面；
         2. 同样，当前页面javascript阻塞渲染进程，不会影响其他啊页面
         3. 安全沙箱可以看成操作系统给进程加上一把锁，沙箱里运行的进程不会在磁盘上写数据
      4. 浏览器进程：负责与用户交互、界面显示、子进程管理、存储功能
      5. 渲染进程：将HTML、CSS和Javascript 转换成为用户可以与之交互的网页，运行在沙箱模式下，包含排版引擎Bink和Javascript 的V8引擎
      6. GPU进程：起初主要为实现3Dcss的效果，但是后面Chrome的UI界面都是由他绘制的
      7. 网络进程：负责页面网络资源的加载
      8. 插件进程：负责插件的运行，保证页面崩溃不会影响页面和浏览器，（不是每个页面必须的）
   2. TCP协议：（传输层）
      1. 建立连接：通过“三次握手”建立连接，也就是要发送三次数据包才能建立连接

         1. 客户端向服务器端发送一段TCP报文，其中：标记位为SYN，表示“请求建立新连接”；序号为Seq=X（X一般为1）；随后客户端进入SYN-SENT阶段。

         2. 服务器端接收到来自客户端的TCP报文之后，结束LISTEN阶段（监听）。并返回一段TCP报文，其中：

            1. 标志位为SYN和ACK，表示“确认客户端的报文Seq序号有效，服务器能正常接收客户端发送的数据，并同意创建新连接”（即告诉客户端，服务器收到了你的数据）；

            2. 序号为Seq=y；

            3. 确认号为ack=X+1，表示收到客户端的序号Seq并将其值加1作为自己确认号ACK的值；

            4. 随后服务器端进入SYN-RCVD阶段。

         3. 客户端接收到来自服务器端的确认收到数据的TCP报文之后，明确了从客户端到服务器的数据传输是正常的，结束SYN-SENT阶段。并返回最后一段TCP报文。其中：

            1. 返回标志位为ACK，表示“确认收到服务器端同意连接的信号”（即告诉服务器，我知道你收到我发的数据了）；

            2. 序号为Seq=x+1，表示收到服务器端的确认号Ack，并将其值作为自己的序号值；

            3. 确认号为ack=y+1，表示收到服务器端序号Seq，并将其值加1作为自己的确认号Ack的值；

            4. 随后客户端进入ESTABLISHED阶段。

            5. 服务器收到来自客户端的“确认收到服务器数据”的TCP报文之后，明确了从服务器到客户端的数据传输是正常的。结束SYN-SENT阶段，进入ESTABLISHED阶段

            6. 
      2. 断开连接：”四次挥手“
         1. 
   3. HTTP建立在TCP协议连接基础之上：（应用层）
      1. http请求流程：
      1. 构建请求：构建请求行信息
      2. 查找缓存：浏览器缓存是一种吧资源副本泊副本在本地，供下次请求时直接使用的技术，可以缓解服务器压力，提升性能。请求失败就会进入网络请求过程
      3. 准备ip地址和端口号（默认80）
         1. DNS解析域名，如果域名之前解析过可以在DNS数据缓存中查找，主要查找过程：浏览器缓存→系统缓存→路由器缓存→ISP（网络服务提供商）DNS 缓存→ISP的DNS服务器会从根域名开始进行递归查询
      2. 1. 等待TCP队列：同个域名同时只能建立6个TCP连接，超过就只能等待
         2. 建立TCP：”三次握手“
         3. 发送HTTP请求
            1. 请求行：请求方法、请求URL和http版本协议
            2. 请求头：把浏览器的一些信息告诉服务器
            3. 请求体：post请求中要发送的数据
         4. 返回服务器响应数据
            1. 响应行：HTTP协议版本、状态码、状态码描述
               1. 重定向：如果响应码是301、302则会在响应头Location字段获取新的URL进行重新导航
            2. 响应头：包含服务器自身信息
            3. 响应体：如HTML文件实际内容，json数据等　　　　　
         5. TCP断开连接，如果在头信息加入Connection：Keep-Alive，则TCP不会关闭，表示持久化连接
2. 导航流程：
   1. 用户输入：判断是输入关键词的搜索内容还是请求的URL
      1. 搜索内容：调用默认搜索引擎搜索
      2. 符合URL规则：添加协议，合成完整URL
      3. 在按下回车以为页面将被替换新内容，浏览器允许执行beforeunload事件进行取消导航、清理数据、是否离开当前页面、是否提交表单等等
   2. URL请求过程：
      1. 浏览器进程通过进程间通讯IPC把URL发送给网络进程
      2. 网络进程检查本地缓存是否存在资源（有的话直接返回给浏览器进程）
      3. DNS解析获取真实ip
      4. 利用ip地址和服务器构建TCP连接
      5. 如果协议是https，那么需要进行TLS连接
         1. 
      6. 构建请求头、请求行发送数据
      7. 发送成功，得到响应
      8. 检查响应码：
         1. 如果状态码是301或302就会重定向到新URL，网络进程会根据新URL再重新发一次HTTP请求或HTTPS请求
         2. 响应码200，继续
      9. 检查响应数据类型content-Type
         1. 如果是字节流类型，则提交给浏览器的下载管理器进行下载
         2. 如果是text-html，则准备渲染进程
      10. 准备渲染进程：
          1. 如果从一个页面打开另一个新页面，而新页面和当前页面属于同一站点（相同协议和根域名），则新页面会复用父页面的渲染进程（Chrome的默认策略：process-per-site-instance）
          2. 否则浏览器进程为页面创建一个新的渲染进程
      11. 提交文档：浏览器进程把网络进程得到的HTML数据提交给渲染进程
          1. 浏览器进程得到网络进程响应头数据之后，向渲染进程发起”提交文档“的消息
          2. 渲染进程得到消息后，与网络进程建立传输数据的”管道“进行数据传输
          3. 完成后渲染进程会返回”确认提交“的信息给浏览器进程，
          4. 浏览器进程接受到后开始更新当前页面状态，如安全状态、地址栏、历史记录、并更新页面
          5. 导这里就可以解释我们输入一个地址后之前页面不会马上消失的原因（因为开始渲染，也就是常看到的“白屏”）
3. 渲染流程：
   1. 构建DOM树：浏览器无法直接了解HTML内容，需要经过HTML解析器解析，转化成DOM树（document），可以通过js的dom操作来修改
   2. 样式计算：计算所有DOM节点的具体样式(style)
      1. 渲染引擎将css转换为浏览器能够理解的结构styleSheets（cssom）
      2. 转化属性值，使其标准化（单位转换为px，颜色转为rgb等）
      3. 计算DOM树中每个节点的具体样式，遵循继承和层叠规则
   3. 布局阶段：计算DOM可见元素的几何坐标位置
      1. 创建布局树（Layout）（只包含可见元素）如display：none则不会包含在树内
      2. 布局计算：计算布局树的具体坐标
   4. 分层：渲染引擎还需要为特定的节点生成专用的图层，并生成图层树（Layer）
      1. 拥有层叠上下文的元素会被提升为单独的一层
      2. 需要被裁剪（clip）的地方也会被创建为图层
   5. 绘制：将图层拆分为小的绘制指令，按顺序组成一个绘制列表,然后主线程把绘制表提交给合成线程
   6. 分块：合成线程会将图层划分为图块
   7. 光栅化：在光栅化线程池中将图块转化为位图，
      1. 图块是栅格化的最小单位，
      2. 合成线程优先转化视口附近的图块
      3. 使用GPU进程来加速栅栏化，GPU把栅格化的位图保存在GPU内存中
   8. 合成和显示：
      1. 合成线程生成 DrawQuad 命令，然后提交给浏览器进程
      2. 浏览器进程viz组件将页面的内容绘制到内存，最后显示在屏幕上
4. 相关术语
   1. 重排：更新了几何属性，如高度；（布局树改变）
   2. 重绘：更新了绘制属性，如颜色 ；（绘制列表）
   3. 合成：直接合成，不需要触发布局或重绘，如css动画。