我理解的:"一个URL从输入到页面显示都经历了什么"

这应该是大家比较熟悉的一道经典面试题,通过这个问题,可以很全面的了解到被问人的计算机知识储备,如果知识储备足够丰富,我感觉这个问题其实可以讲一整天,我也想凑个热闹来概括一下这个流程,给大家一个参考

好了正文开始~

3个端:

浏览器端
中间端(连接过程)
服务器端


  • 在浏览器敲下一个URL,浏览器的Browser Process主进程中的UI thread线程判断用户输入的是一个url还是一个query,如果是一个URL,那么network thread 会执行 DNS 查询
  • 执行 DNS 查询:

    • 浏览器的缓存 chrom://net-intermals => DNS
    • 系统缓存
    • host文件
    • 代理缓存
    • 如果仍然没有,发起DNS系统调用,查询DNS服务器

      • DNS服务器会通过顶级域(cn/com/net等)
      • 然后通过顶级域找到子域 => 最后找到对应的IP地址
  • 通过DNS查询得到该域名对应的服务器IP地址
  • 浏览器会通过本地的一个随机端口对 这个IP的80端口或者是用户输入的其他端口进行本次访问
  • 在进行访问前,浏览器会将本次访问的一些信息,将请求报文(请求头&请求体)进行传递
  • 三次握手建立连接(TCP/IP连接:传输控制协议/网间协议,定义了主机如何连入因特网及数据如何再它们之间传输的标准)

    • 第一次握手:客户端尝试连接服务器,向服务器发送syn包(同步序列编号*Synchronize Sequence Numbers*),syn=j,客户端进入SYN_SEND状态等待服务器确认 相当于:"你在吗?"
    • 第二次握手:服务器接收客户端syn包并确认(ack=j+1),同时向客户端发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态 "我在,请讲"
    • 第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手 "好的,巴拉巴拉巴拉"
  • 服务器通过传递的请求信息响应回对应的内容,将响应报文(响应头&响应体)返回给客户端

    • 如果是静态文件,服务器软件则会直接返回找到的内容
    • 如果非静态文件,服务器软件则交给对应的后端语言进行处理,并且拿到响应结果
  • 再次回到浏览器端:
  • network thread接收到服务器的响应内容,转接给renderer
  • renderer process将根据响应头中的文件类型进行渲染

    • 构建 DOM
    • 次级的资源的下载和加载

      • 当浏览器遇到 <img> <link> 等标签,network thread会去下载这些内容
    • JS 的下载与执行
    • 当遇到 <script> 标签时,渲染进程会停止解析 HTML,而去加载,解析和执行 JS 代码,停止解析 html 的原因在于 JS 可能会改变 DOM 的结构(使用诸如 documwnt.write()等API)
    • 样式计算
    • 获取布局
    • 绘制各元素
    • 合成帧
    • ...
  • 绘制结束后,关闭TCP连接,过程中会有四次挥手

    • TCP客户端发送一个FIN,用来关闭客户到服务器的数据传送"我要关闭连接啦"
    • 服务器收到这个FIN,它发回一个ACK,确认序号为收到的序号加1。和SYN一样,一个FIN将占用一个序号。 "好的,我了解了"
    • 服务器关闭客户端的连接,发送一个FIN给客户端。 "那我也关闭连接啦"
    • 客户端发回ACK报文确认,并将确认序号设置为收到序号加1。 "好的.我也了解了"

本文链接:

http://godrry.com/archives/what-i-understand-what-does-a-url-go-through-from-input-to-page-display-1.html
1 + 5 =
沙发还热乎呢~