前端面试精选（一）从“在浏览器输入域名”到“页面静态资源完全加载”的整个流程

前端面试精选（一）从“在浏览器输入域名”到“页面静态资源完全加载”的整个流程

1.文字总结：

前端面试精选（一）从“在浏览器输入域名”到“页面静态资源完全加载”的整个流程

文字版

• 1.用户输入（相关资料：yck《前端面试之道》和 浏览器原理专栏）
  • 用户输入关键字，并按下回车
  • 当前页面被替换成新页面
  • 在此之前，浏览器会给当前页面执行beforeunload事件，允许页面在退出前执行数据清理操作
  • 同时在该事件中，还可以询问用户是否要离开当前页面
• 2.URL请求过程
  • 首先网络进程会查找本地是否缓存了目标网站资源
    • 有缓存-->直接将本地缓存资源加载到浏览器进程上进行显示。
    • 没有找到缓存-->直接进入到网络请求过程
      • \1. DNS 解析，获取到请求域名对应的服务器IP
        • DNS也有几步缓存：浏览器缓存，hosts文件
        • 本地域名解析服务器没有该域名的记录，开始递归+迭代解析
      • 2.请求协议是HTTPS的话，还需要建立TLS连接
        • HTTP：TCP三次握手
        • HTTPS：TLS握手
      • 3.利用IP地址和目标网站服务器建立TCP连接
      • 4.浏览器构建请求行，请求头信息，以及相关的cookie数据添加到请求头中，向服务器发送构建好的http请求信息
      • 5.数据进入服务器之前，可能会经过负责负载均衡的服务器，将请求合理分发给多台服务器上，假设服务器端会响应HTML文件
        • 浏览器会判断状态码是什么，200继续解析，400或500报错，300重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也报错
      • 6.浏览器开心地解析文件，通常会将gzip压缩的文件进行解压，通过文件的编码格式进行解码。
• 3.准备渲染：Chrome浏览器会为每个页面分配一个渲染进程，每打开一个新页面就会创建一个新的渲染进程
• 4.渲染阶段：
  • 文件解码后进行渲染
    • 先根据HTML构建DOM树，有CSS构建CSSOM树
    • 遇到script标签，判断是否同步和异步看， 判断是否存在 async 或者 defer ，async会执行并行下载和执行JS， defer会先下载后等待HTML解析完成后顺序执行
    • 如果以上async 或者 defer都没有，就会阻塞住渲染流程直到 JS 执行完毕（同步）。
    • CSSOM输和DOM树构建完成后，会开始生成Render树，这一步确定页面元索的布局和样式等
    • Render树生成中,浏览器调用GPU绘制,合成图层,将内容显示在屏幕上

2.图片总结