从键入URL到页面加载完毕发生了什么

发表于   |   分类于   |  

从键入URL到页面加载完毕过程概述

  1. 浏览器查询缓存，若缓存存在，浏览器直接进行解析
  2. 将域名转换为ip地址，先从浏览器查询DNS，没有则查询系统DNS缓存，否则集训查询DNS服务器
  3. 浏览器通过返回的ip地址与服务武器建立连接（三次握手过程）
  4. 浏览器通过tcp连接发送http请求
  5. 服务器处理请求，执行查询并返回响应；响应头中含有状态码
  6. 浏览器接收响应并检查响应头，根据不同的状态码进行不同的处理：200 成功； 3XX 重定向或者使用缓存； 4XX 请求错误； 5XX 服务器错误
  7. 成功接收响应之后，释放tcp连接
  8. 若可以缓存，则缓存响应
  9. 若文件被压缩，则浏览器解码响应
  10. 浏览器对整个 HTML 结构进行解析，形成 DOM 树；与此同时，它还需要对相应的 CSS 文件进行解析，形成 CSS 树（CSSOM），接下来，需要结合 DOM + CSSOM，形成一个绘制树（Render Tree）;
  11. 得到绘制树之后，需要计算每个结点在页面中的位置，这一个过程称为layout ；
  12. layout的过程是在一个连续的二维平面上进行的，接下来，需要将这些结果栅格化，映射到屏幕的离散二维平面上，这一过程称为 paint ; 现代浏览器为提升性能，将页面划分多个 layer，各自进行 paint 然后组合成一个页面（composite layers）。

参考资料：

  1. 浏览器页面渲染 http://www.jianshu.com/p/016e8e78eb1f
  2. 一个页面从输入URL到页面加载显示完成，这个过程都发生了什么？http://www.cnblogs.com/tianjuan/archive/2016/10/13/5957551.html