首页 前端知识 web前端之浏览器从输入URL到页面展示的过程、建立TCP连接与三次握手、发送HTTP请求、DNS解析、地址、渲染

web前端之浏览器从输入URL到页面展示的过程、建立TCP连接与三次握手、发送HTTP请求、DNS解析、地址、渲染

2024-07-10 22:07:44 前端知识 前端哥 47 968 我要收藏

MENU

  • 前言
  • DNS解析
  • 建立TCP连接
  • 发送HTTP请求
  • 服务器处理请求
  • 接收HTTP响应
  • 解析HTML
  • 解析CSS
  • 渲染页面
  • 结束


前言

浏览器从输入URL到页面展示的过程,这是一件看似简单却又十分复杂的事情。我们每天都在使用浏览器,却很少关注它们背后的工作原理。本文将从多个方面深入探讨浏览器从输入URL到页面展示的完整过程。


DNS解析

当我们在浏览器中输入URL时,浏览器会向DNS服务器发送请求,查询该URL所对应的IP地址。
DNS解析的过程可以分为递归查询和迭代查询两种方式。
1、递归查询是指DNS服务器不断地向上级服务器发起请求,直到找到该URL对应的IP地址;
2、迭代查询是指DNS服务器直接向根服务器发起请求,并且从返回的响应中获取下一级服务器的地址,不断向下一级服务器发起请求,直到找到该URL对应的IP地址。


建立TCP连接

DNS解析完成后,浏览器会根据获取到的IP地址,向该IP地址对应的服务器发送TCP连接请求。
TCP连接的建立过程可以分为三次握手。
1、第一次握手:客户端向服务器发送连接请求,并且发送一个随机数作为起始序列号。
2、第二次握手:服务器收到连接请求后,向客户端回复一个确认消息,并且发送一个随机数作为回复序列号。
3、第三次握手:客户端收到服务器的确认消息后,再次向服务器发送确认消息。
TCP三次握手是为了确认客户端和服务端的发送和接收的能力。


发送HTTP请求

TCP连接建立完成后,浏览器会向服务器发送HTTP请求。
HTTP请求的格式一般包括请求方法、请求URL、请求头部和请求体。
请求方法通常有GET、POST、PUT等,常用的是GET和POST。
请求头部包括一些额外的信息,例如浏览器类型、Cookie信息等。请求体则包含客户端提交的数据,例如表单数据、上传的文件等。


服务器处理请求

服务器接收到HTTP请求后,会根据请求的URL和请求方法,执行相应的操作。
常见的操作包括从数据库中查询数据、生成HTML页面等。
服务器处理完成后,会向客户端发送HTTP响应。


接收HTTP响应

浏览器接收到服务器的HTTP响应后,会根据响应头部中的状态码来判断请求是否成功。
如果请求成功,浏览器会根据响应头部中的Content-Type字段来确定响应体的内容类型。
如果是HTML页面,浏览器会将响应体解析成DOM树,并且根据CSS样式对页面进行渲染。


解析HTML

浏览器在渲染页面前,会先将HTML代码解析成DOM树。
DOM树是一种以层次结构组织的节点树,每个节点代表HTML中的一个元素或文本。
浏览器解析HTML代码的过程可以分为标记化和构建DOM树两个阶段。
1、标记化是指将HTML代码分解成多个标记,并且将它们分类为开始标记、结束标记、注释等不同类型。
2、构建DOM树则是将标记化后的HTML代码转换成DOM节点,并且将它们按照层次结构组织起来。


解析CSS

解析HTML完成后,浏览器会解析CSS代码,为每个元素计算出最终的样式。
CSS解析的过程可以分为分词、解析和计算三个阶段。
1、分词是指将CSS代码分解成多个不同的词汇,例如选择器、属性名、属性值等。
2、解析则是将分词后的CSS代码转换成CSS对象模型(CSSOM),并且将它们按照层次结构组织起来。
3、计算则是为每个元素计算出最终的样式,并且将它们应用到DOM树上。


渲染页面

将DOM树和样式应用到页面上进行渲染。
浏览器会根据DOM树和样式来计算每个元素的位置和大小,并且将它们绘制到屏幕上。
渲染页面的过程可以分为生成布局、生成绘制列表和绘制三个阶段。
1、生成布局是指根据DOM树和样式计算出每个元素的位置和大小。
2、生成绘制列表则是将每个元素的绘制操作记录下来。
3、绘制则是将记录下来的绘制操作应用到页面上进行绘制。


结束

以上就是浏览器从输入URL到页面展示的完整过程。每个步骤都有其独特的功能和作用,只有在这些步骤都完成后,才能让我们看到一个完整的网页。对于前端开发人员来说,了解这些细节非常重要,可以帮助他们更好地优化网页性能和排查问题。
以上只是大概的过程,深入了解请点击链接。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13925.html
评论
发布的文章

jQuery-w3school(2020

2024-08-04 23:08:08

jQuery常用方法总结

2024-08-04 23:08:34

Vue2使用echarts树图(tree)

2024-08-04 23:08:29

图表库-Echarts

2024-08-04 23:08:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!