前言

讲道理，之前说过的一天月一篇其实是开玩笑的。莫名其妙就这么久没写过博客了。今天在回家的路上突然想起了这个问题----“从输入url到页面展示的过程有哪些？”。其实也不算突然吧，其实想想好像看面试题的时候经常会出现这么一道题目。今天就照着自己想到的东西来写这么一篇。

过程

  • DNS解析输入的域名
    • 目的：解析域名获取ip
    • 过程：
      1. 浏览器缓存中查找是否有该域名对应的ip地址
      2. 操作系统缓存中查找是否有该域名对应的ip地址
      3. 向本地域名服务器来请求解析
      4. 向上一级域名服务器请求解析
      5. 重复4步骤，一直到根服务器为止
      6. 返回解析出的结果，并且缓存到本地域名服务器以及操作系统缓存中
  • 向服务端发出TCP连接
    • 目的：获取稳定可靠的连接
    • TCP三次握手过程：
      1. 客户端向服务端发出一个数据包
      2. 服务端接收到客户端发送的数据包并打上确认的标记，然后返回给客户端
      3. 客户端接收到数据包，加上确认标记。再次发送给服务端。
      4. 建立连接
    • TCP四次挥手过程：
      1. 客户端向服务端发出一个数据包。此时客户端进入FIN-WAIT-1（终止等待1）阶段
      2. 服务端接收到数据包然后返回一个确认数据包给客户端。此时服务端进入CLOSE-WAIT（半关闭阶段），客户端接收到报文之后进入FIN-WAIT-2（终止等待2）阶段
      3. 服务端向客户端发出一个数据包（连接释放报文）。此时服务端进入LAST-ACK（最后确认阶段）
      4. 客户端向服务端发出一个数据包（确认报文）。此时客户端进入TIME-WAIT（时间等待）阶段。在过了2MSL(MSL指一个片段在网络中最大的存活时间，2MSL就是一个发送和一个回复所需的最大时间)。之后客户端进入CLOSED阶段，服务端接收到客户端的确认报文之后立马进入CLOSED阶段。
  • web端发送请求，服务端返回资源给客户端。
  • web端解析并渲染资源（正常结构）
    • 知识点：web端如何渲染
    • 渲染过程：
      1. 解析HTML文档构建DOM树，
      2. 解析CSS构建CSSOM
      3. DOM树和CSSOM合并成一个节点树
      4. 浏览器通过节点树计算节点在页面所处的位置
      5. 浏览器渲染节点
    • 其它知识：
      1. script的加载/执行默认都是会阻塞渲染流程的，除非加了defer(异步加载，延迟按序执行)/async（异步加载，加载完执行）。但是在实际中，加了defer的script脚本也未必会真的按照顺序延迟执行。
      2. DOM树和CSSOM的渲染是会阻塞的，之前认为的不阻塞其实指的是CSS的解析不会影响到DOM的解析，而渲染是会阻止的
      3. 重绘：节点的视觉属性发生变化，例如color,font等的变化，引起的浏览器重新绘制节点的行为。
      4. 回流：节点的位置属性发生变化，例如left,top,right,bottom,display:none,width,height等的变化，引起的浏览器重新计算节点位置并绘制节点的行为
      5. 重绘和回流的关系： 重绘不一定回流，回流必然会引起重绘
      6. 优化：
        • 尽量避免直接操作DOM节点
        • 可以使用position把一些复杂动画的节点脱离文档流。从而避免其父元素及周围元素发生变化从而引起回流

总结

从url输入到页面展示的过程其实大致可分成两部分，一部分是请求，一部分是渲染的部分。请求部分主要又分为dns解析，以及建立/释放tcp连接。渲染部分主要是渲染的步骤。这篇文章其实还可以更细致一些，比如可以讲讲DNS，TCP的具体的东西。之后有空再写把