一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么

简介: 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么

一个页面从输入URL到加载显示完成经历了以下过程:

  1. DNS解析:浏览器会解析URL中的域名,将其转换为对应的IP地址。如果浏览器缓存中存在该域名的IP地址,则跳过DNS解析步骤。
  2. 建立TCP连接:通过解析得到的IP地址,浏览器与服务器建立TCP连接。这个过程涉及三次握手,确保客户端和服务器之间的连接可靠。
  3. 发送HTTP请求:TCP连接建立后,浏览器向服务器发送HTTP请求。请求中包含了请求方法(GET、POST等)、请求头(包括用户代理、Cookie等信息)和请求体(对于POST请求)。
  4. 服务器处理请求:服务器接收到HTTP请求后,会根据请求的路径和参数进行处理,并生成相应的响应内容。
  5. 接收响应:浏览器接收到服务器返回的响应,响应包含了响应状态码、响应头和响应体。
  6. 处理响应:浏览器开始处理响应,根据响应状态码判断请求是否成功,根据响应头中的Content-Type确定如何处理响应体的数据类型(如HTML、CSS、JavaScript等)。
  7. 渲染页面:浏览器根据HTML文档解析页面结构,构建DOM树;同时解析CSS样式表,生成CSSOM树;然后将DOM树和CSSOM树合并为渲染树(Render Tree)。最后,基于渲染树进行布局(Layout)和绘制(Painting),将页面内容显示在用户的屏幕上。
  8. 加载资源:在渲染过程中,如果遇到外部资源(如图片、脚本、样式表等),浏览器会发送额外的请求去获取这些资源,并再次经历上述的请求和相应的过程。
  9. 完成页面加载:当所有资源都被加载完成,并且页面的渲染、布局、绘制都完成后,浏览器视为页面加载显示完成。

需要注意的是,以上步骤并非严格按照顺序一次性完成,而是同时或交替进行的。此外,每个步骤的具体细节还涉及到网络延迟、服务器处理速度、资源大小等因素,可能会影响整个过程的耗时。

相关文章
|
3月前
|
Web App开发 缓存 前端开发
【面试题】从输入 URL 到页面显示,这中间发生了什么?
【面试题】从输入 URL 到页面显示,这中间发生了什么?
|
10天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
4月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
1月前
|
Web App开发 缓存 网络协议
|
3月前
|
前端开发
如何让url在新页面打开路由页面,并脱离vue-admin-template的壳,即不包裹在侧边栏和顶栏中
如何让url在新页面打开路由页面,并脱离vue-admin-template的壳,即不包裹在侧边栏和顶栏中
22 0
|
3月前
|
缓存 网络协议 前端开发
面试题:浏览器中输入URL返回页面过程?
面试题:浏览器中输入URL返回页面过程?
90 0
|
11天前
|
JavaScript
vue截取URL中的参数
vue截取URL中的参数
12 0
|
2月前
|
前端开发
[牛客网-前端大挑战QD2] 获取url参数
[牛客网-前端大挑战QD2] 获取url参数
19 0
|
2月前
BurpSuite8.2 -- 查找包含id参数的URL
BurpSuite8.2 -- 查找包含id参数的URL
18 1
|
2月前
|
分布式计算 DataWorks 关系型数据库
DataWorks数据源问题之参数“连接Url”如何解决
DataWorks数据源是指DataWorks中配置的用于数据集成的外部数据源;本合集将讲解如何在DataWorks中配置和管理数据源,以及处理数据源连接和集成过程中的问题。
29 5