前言

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

过程

  • DNS解析输入的域名
    • 目的：解析域名获取ip
    • 过程：
      1. 浏览器缓存中查找是否有该域名对应的ip地址
      2. 操作系统缓存中查找是否有该域名对应的ip地址
      3. 向本地域名服务器来请求解析
      4. 向上一级域名服务器请求解析
      5. 重复4步骤，一直到根服务器为止
      6. 返回解析出的结果，并且缓存到本地域名服务器以及操作系统缓存中
  • 向服务端发出TCP连接
    • 目的：获取稳定可靠的连接
    • TCP三次握手过程：
      1. 客户端向服务端发出一个数据包
      2. 服务端接收到客户端发送的数据包并打上确认的标记，然后返回给客户端
      3. 客户端接收到数据包，加上确认标记。再次发送给服务端。
      4. 建立连接
  • web端发送请求，服务端返回资源给客户端。
  • web端解析并渲染资源（正常结构）
    • 知识点：web端如何渲染
    • 渲染过程：
      1. 解析HTML文档构建DOM树，解析CSS构建CSSOM
      2. DOM树和CSSOM合并成一个节点树
      3. 浏览器通过节点树计算节点在页面所处的位置
      4. 浏览器渲染节点
    • 其它知识：
      1. 重绘：节点的视觉属性发生变化，例如color,font等的变化，引起的浏览器重新绘制节点的行为。
      2. 回流：节点的位置属性发生变化，例如left,top,right,bottom,display:none,width,height等的变化，引起的浏览器重新计算节点位置并绘制节点的行为
      3. 重绘和回流的关系： 重绘不一定回流，回流必然会引起重绘
      4. 优化：
        • 尽量避免直接操作DOM节点
        • 可以使用position把一些复杂动画的节点脱离文档流。从而避免其父元素及周围元素发生变化从而引起回流

总结

以上就是对url输入到页面展示的过程的一些知识的理解和总结。其实还可以再往细来讲，不过由于自己知识水平有限，对于网络协议以及数据包结构的理解不深，想了想还是不丢人现眼了哈哈哈。
That’s all!