从浏览器输入域名到页面静态资源加载完毕的整个流程

从浏览器输入域名到页面静态资源加载完毕的整个流程

1：用户输入

• 浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件
  允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面。
  2：url请求过程
• 首先网络进程会先看本地是否有缓存
• 有缓存的话，会直接返回资源给浏览器进程，如果没有的话，直接进入网络请求，这请求的第一步是进行DNS解析，以获取请求域名的服务器的IP地址，如果是https的话，还需要建立TLS链接
  。其中DNS也有缓存，浏览器缓存和Hosts文件
  。如果本地也没有域名记录，则开始递归和迭代解析
  。HTTP 是TCP三次握手， HTPPS是TLS握手
• 接下来就是利用ip地址和服务器建立TCP联系，连接建立后，浏览器会构建请求行，和请求头等信息，并把相关的cookie添加到请求头里面去，然后向服务器发送构建信息等。
• 数据进入服务器，可能还会进入负载均衡 的服务器，他的作用就是将请求合理的分发到多个服务器，假设服务器响应一个HTMl文件
• 首先服务器会判断状态码是多少，如果是200就继续解析，如果是400或者500，就会报错，如果是300的话就会重定向，超过重定向规定的次数，也会报错。
  -浏览器开始解析文件
  3:准备渲染进程
• 默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。
  4:渲染阶段
• 先根据HTML构建dom树，再根据css构建cssdom树，如果遇见script标签，会先判断是否存在async或者defer,前者会并行下载js,后者会先下载js,然后等待解析完html后，再顺序执行；
  如果上述都没有，会阻塞渲染流程直到js执行完毕。
  cssdom树和dom树绘制结束后，开始绘制render树这一步是确定页面元素的布局和样式的诸多方面。在生成render树的时候，浏览器 开始调用GPU进行绘制，将内容显示到页面上。