在浏览器从输入URL到页面加载完成都经历了什么/一个完整的URL解析过程详细介绍

青旅半醒 2024-03-30 11:28 14阅读 0赞

**一、简述在浏览器从输入URL到页面加载完成都经历了什么**

浏览器地址栏输入url地址，首先要在客户端上进行url解析  
浏览器会首先查看自身的缓存，如果浏览器缓存中有对应的解析记录，直接返回结果  
如果浏览器没有缓存，电脑会查看本地操作系统的缓存，如果有记录，直接返回结果（host文件）  
如果本地没有缓存该域名的IP地址，就需要通过递归或迭代的方式向根域名服务器、顶级域名服务器、权威域名服务器发起查询请求，直至返回一个IP地址给浏览器。  
然后根据该IP地址建立TCP连接**。**  
客户端发送HTTP请求，服务器返回报文，关闭TCP连接。  
浏览器内核拿到相应内容后，  
解析html,css分别建立DOM Tree和CSSOM Tree  
随后这两个合并成Render Tree。  
然后布局Render Tree，绘制Render Tree，绘制页面像素信息。  
浏览器会将各层的信息发送给GPU,GPU会将各层合成，显示在屏幕上。  
渲染完成。

**二、过程分析**

**2.1、域名解析**

浏览器会对我们输入的url进行解析  
主要将其分为下部分：协议、网络地址、资源路径  
其中网络地址指示该连接网络上哪一台计算机，可以是域名或者IP地址，可以包括端口号  
协议是从该计算机获取资源的方式，常见的是HTTP，HTTPS，FTP等  
不同协议有不同的通讯内容格式；资源路径指示从服务器上需要获取资源的具体路径

![68d0464faed6b809653954f3bdc6f0c0.jpeg][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5cmljc2FiYw_size_16_color_FFFFFF_t_70][]

**2.2、DNS解析**

[DNS：DNS域名解析过程及原理\_snow@li的博客-CSDN博客][DNS_DNS_snow_li_-CSDN]

**2.3、获取端口号**

http协议默认端口号是80。

IP地址就像是一个街道，让你直到具体在哪个街道（哪个主机），端口号就像是门牌号，告诉你是哪家（哪个进程）

**2.4、建立TCP连接**

[网络：TCP协议三次握手与四次挥手\_snow@li的博客-CSDN博客][TCP_snow_li_-CSDN]

**2.5、发起HTTP请求**

[协议：HTTP基础内容掌握\_snow@li的博客-CSDN博客][HTTP_snow_li_-CSDN]

**2.6、响应HTTP请求**

[协议：HTTP基础内容掌握\_snow@li的博客-CSDN博客][HTTP_snow_li_-CSDN]

**2.7、关闭TCP连接**

[网络：TCP协议三次握手与四次挥手\_snow@li的博客-CSDN博客][TCP_snow_li_-CSDN]

**2.8、浏览器加载解析渲染**

浏览器加载：指浏览器通过网络请求获取网页文件及其相关资源，并把它们存储在缓存中或者按需加载，以便让用户访问网页时快速加载数据。  
解析：指浏览器把HTML、CSS和JavaScript解析成浏览器能够理解的结构，并构建出文档对象模型（DOM）和样式对象模型（CSSOM）。  
渲染：指浏览器根据DOM和CSSOM，计算出网页元素的布局和样式，把它们绘制在屏幕上。

[浏览器解析渲染过程 - 知乎][-]

[浏览器加载解析渲染\_wk199351的博客-CSDN博客][wk199351_-CSDN]

[浏览器加载解析渲染机制的全面解析 - 简书][- 1]、

[浏览器的渲染：过程与原理 - 知乎][- 2]

[浏览器渲染原理流程 - 哔哩哔哩][- 3]

![2030c7654e3a49c38b29a39df92ddf85.png][]

**三、欢迎交流指正，关注我，一起学习**

**四、参考链接**

[在浏览器输入URL回车之后发生了什么？\_哔哩哔哩\_bilibili][URL_bilibili]

[详解浏览器解析一个URL的全过程\_url解析\_子木呀的博客-CSDN博客][URL_url_-CSDN]

[https://www.cnblogs.com/davina123/p/12978114.html][https_www.cnblogs.com_davina123_p_12978114.html]

[从输入 URL 到页面加载完成中间都经历了什么\_luoluoxx0115的博客-CSDN博客\_输入url到加载完页面发生了什么][URL _luoluoxx0115_-CSDN_url]

[68d0464faed6b809653954f3bdc6f0c0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1a45a411159d4c178e1101fd5d52f8af.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5cmljc2FiYw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b351e90901944eaeb1f47ce876bdfbbb.png
[DNS_DNS_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/130591320
[TCP_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/127123046
[HTTP_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/122132547
[-]: https://zhuanlan.zhihu.com/p/550626660
[wk199351_-CSDN]: https://blog.csdn.net/wk199351/article/details/70808955
[- 1]: https://www.jianshu.com/p/e8f858f9605a
[- 2]: https://zhuanlan.zhihu.com/p/29418126?utm_source=wechat_session
[- 3]: https://www.bilibili.com/read/cv8189508/
[2030c7654e3a49c38b29a39df92ddf85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/89d519dc2f904be28689546610850601.png
[URL_bilibili]: https://www.bilibili.com/video/BV1s44y117vK/?spm_id_from=pageDriver&vd_source=704e2597123fc066b03283e82eb866c0
[URL_url_-CSDN]: https://blog.csdn.net/qq_41687938/article/details/119778557
[https_www.cnblogs.com_davina123_p_12978114.html]: https://www.cnblogs.com/davina123/p/12978114.html
[URL _luoluoxx0115_-CSDN_url]: https://blog.csdn.net/luoluoxx0115/article/details/121212371