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

Posted 2020-09-21

当浏览器地址栏中输入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.客户端与服务器断开链接

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

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

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