输入URL到页面渲染

输入网址回车或者刷新页面到页面传染出来的整个流程

1. DNS 解析
2. HTTP三次握手 -> TCP/IP连接
3. 浏览器发送请求
4. 服务器返回请求的文件 (html)
5. 浏览器渲染

1. DNS 解析

1. 查找缓存
   • Chrome搜索自身的DNS缓存，看有没有该域名对应的IP地址（chrome://net-internals/#dns）
   • Chrome会搜索操作系统自身的DNS缓存（浏览器没有找到缓存或者缓存已经失效）
   • 读取本地的HOST文件（操作系统的缓存没有找到）（mac: etc/host）
2. 浏览器发起一个DNS的一个系统调用（向本地主控DNS服务器，一般由宽带运营商提供的，发起的一个域名解析请求）
   • 宽带运营商服务器查看本身缓存，有没有过期。
   • 运营商服务器代替浏览器发起一个迭代DNS解析的请求（baidu.com的IP地址是多少？1、寻找根域的DNS IP地址，2、COM域的顶级域的IP地址，3、baidu.com域的IP地址）（以123.com为例，COM 是根域名，123.com是人们经常提到的顶级域名，主域名可以理解为你的网站的访问域名，一般是www.123.com）
   • 运营商服务器把结果返回操作系统内核同时缓存以来
   • 操作系统内核把结果返回浏览器
   • 最终浏览器拿到了www.imooc.com对应的IP地址

2. HTTP三次握手 -> TCP/IP连接

1. 浏览器获得域名对应的IP地址后，发起HTTP“三次握手”
   • 浏览器会以一个随机端口，向服务器的web程序发起TCP连接请求
   • 应用层会下发数据给传输层，然后下发给网络层。网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输
   • TCP链接请求通过层层的路由设备，到达服务器端以后，首先进入网卡，然后进入内核的TCP/IP协议栈，经过防火墙的过滤，最后到达服务端，建立起TCP/IP的连接
   • 数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上

3. 浏览器发送请求

1. TCP/IP连接建立起来以后，浏览器就可以向服务器发送HTTP请求了使用了。（例如：用HTTP的GET方法请求一个根域里的一个协议，协议可以采用HTTP 1.0的一个协议）
   • 浏览器在每次发起请求时，都会现在浏览器缓存中查找该请求的结果以及标识
   • 如果没有请求的缓存结果和缓存标识，那么就会发起HTTP请求
   • 如果该请求的缓存结果失效，只有缓存标识，则携带该资源的缓存标识，发起HTTP请求,若协商缓存生效，则返回304
   • 如果存在请求的缓存结果，且未失效，则直接返回。（强制缓存可以在network中的size查看，代表该缓存存放的位置。from memory cache内存中的缓存[图片、js] ,from disk cache硬盘中的缓存[css]）

4. 服务器返回请求的文件 (html)

1. 服务器端接受到了这个请求，根据路径参数，经过后端的一些处理以后，把处理后的一个结果的数据返回给浏览器。
   • 服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control,控制协商缓存的字段分别是Last-Modified/if-Modified-Since和Etag/if-None-Match
   • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器中缓存中。

5. 浏览器渲染

1. 浏览器拿到了服务器返回的HTML页面代码，在解析和渲染这个页面时候，里面的JS/CSS、图片静态资源，他们同样也是HTTP请求，都需要经过上面的步骤。
2. 浏览器根据拿到的资源对页面进行渲染，最终把一个完整的页面呈现给了用户。
   • HTML parser：根据 HTML 构建 DOM 树。
   • CSS parser：根据 CSS 构建 CSSOM 树。
   • 如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行。如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。遇到文件下载的会去下载文件，这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率。
   • Attachment：CSSOM 树和 DOM 树构建完成后会开始生成 Render 树。
   • Layout: 布局。确定页面元素的布局、样式等等诸多方面的东西。
   • GPU painting: 像素绘制页面，将内容显示在屏幕上了。