首页 > 代码库 > 浏览器从输入url到页面呈现发生了什么?

浏览器从输入url到页面呈现发生了什么?

当浏览器地址栏中输入www.baidu.com到页面呈现的具体过程:

1.域名解析(DNS解析)(网络层)

先从缓存中找域名对应的ip地址,没有再向域名服务器发送请求。

-->浏览器的DNS缓存(以Chrome浏览器为例查看dns缓存,在地址栏中输入chrome://net-internals/#dns 查看浏览器内的dns缓存。)

-->操作系统的DNS缓存(window系统调出cmd窗口,在窗口处输入命令ipconfig /displaydns 来进行查看系统内的dns缓存.)

-->操作系统的hosts文件(C:\Windows\System32\drivers\etc\hosts)

-->操作系统向LDNS(本地域名服务器)发送请求(80%成功率)

-->没有找到则迭代DNS域名解析(域名是从右往左分级的)

  • LDNS向根域名服务器发起请求,请求到.com顶级域名服务器的地址
  • LDNS(.com)域的顶级域名服务器发起请求,请求到.baidu.com域名服务器的地址
  • LDNS(.baidu.com)域的顶级域名服务器发起请求,请求到www.baidu.com域名对应的ip
  • LDNS把得到的ip地址返回给主机操作系统,操作系统缓存把域名和对应的ip缓存起来, 操作系统再把ip返回给浏览器,浏览器也缓存起来。

2.建立TCP链接(传输层)

  浏览器要通过http或https协议向服务器发送请求,就需要先建立与服务器的链接。客户端基于TCP协议与ip对应服务器建立链接。(三次握手机制)

3.浏览器发送http请求生成html页面(应用层)

  以下为大概的渲染过程,具体的资源文件加载顺序下一篇再讲述

  • HTML代码转化为DOM(DOM Tree)
  • CSS代码转化成CSSOM(CSS Object Model)
  • 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)(Render Tree)
  • 生成布局(layout),即将所有渲染树的所有节点进行平面合成
  • 将布局绘制(paint)在屏幕上

4.客户端与服务器断开链接

 客户端通过四次挥手与服务器断开链接(四次挥手机制)

以上只是简单的叙述流程,没有展开讲解每一步的细节知识与原理,大家可以自己查询有关的书籍。

十年磨一剑,霜刃未曾试。今日把示君,谁有不平事?

浏览器从输入url到页面呈现发生了什么?