从浏览器输入url开始发生了什么

  1. 首先会触发当前页面的beforeunload事件(在这里需要的话可以使用navigator.sendBeacon()发送数据)
  2. 先看本地是否缓存资源,如果缓存存在且没有过期,直接返回资源,没有则进入网络请求阶段。
  3. 检查dns缓存,先从浏览器-> 本机 -> 本地dns服务器 -> 根域服务器(顶级域服务器、以及其子域名服务器)
  4. 确定了ip地址后,开始tcp的三次握手。如果是https请求,还需要建立tls连接。
  5. 发起请求,强缓存和协商缓存,强缓存判断本地未过期,直接使用本地资源(cache-control expires)。协商缓存(etag/if-no-match, last-modified/if-modified-since),向服务器端确认缓存是否过期,过期则使用新的资源。
  6. Tcp四次挥手
  7. html字节流,分词器转成html标签,构建dom,构建cssom,计算,合成布局树,布局计算,为特殊的节点分层,生成分层树,开始绘制。
  8. 拆分绘制指令,生成绘制列表,交给合成线程,合成线程会图层分块,交给gpu做光栅化生成位图,结束后交给合成线程,合成图层,最后交给主线程渲染页面。
  9. 渲染进程通知浏览器进程,完成整个导航。