输入URL到显示页面的全过程

深藏阁楼爱情的钟 2022-11-14 10:26 172阅读 0赞

1、在浏览器地址栏输⼊URL

2、浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤

如果资源未缓存，发起新请求

如果已缓存，检验是否⾜够新鲜，⾜够新鲜直接提供给客户端，否则与服务器进⾏验证。

检验新鲜通常有两个HTTP头进⾏控制 Expires 和 Cache-Control：

HTTP1.0提供 Expires，值为⼀个绝对时间表示缓存新鲜⽇期  
HTTP1.1增加了Cache-Control: max-age=time，值为以秒为单位的最⼤新鲜时间  
3、浏览器解析URL获取协议，主机，端⼝，path

4、浏览器组装⼀个HTTP（GET）请求报⽂

5、浏览器获取主机 ip 地址，过程如下：

浏览器缓存

本机缓存

hosts⽂件

路由器缓存

ISP DNS缓存

DNS递归查询（可能存在负载均衡导致每次IP不⼀样）

6、打开⼀个socket与⽬标IP地址，端⼝建⽴TCP链接，三次握⼿如下：

客户端发送⼀个TCP的SYN=1，Seq=X的包到服务器端口

服务器发回SYN=1， ACK=X+1， Seq=Y的响应包

客户端发送ACK=Y+1， Seq=Z

7、TCP链接建⽴后发送HTTP请求

8、服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使⽤HTTP Host头部判断请求的服务程序

9、服务器检查\*\*HTTP请求头是否包含缓存验证信息\*\*，如果验证缓存新鲜，返回304等对应状态码

10、处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作

11、服务器将响应报⽂通过TCP连接发送回浏览器

12、浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重⽤，关闭TCP连接的四次握⼿如下：

主动⽅发送Fin=1， Ack=Z， Seq= X报⽂

被动⽅发送ACK=X+1， Seq=Z报⽂

被动⽅发送Fin=1， ACK=X， Seq=Y报⽂

主动⽅发送ACK=Y， Seq=X报⽂

13、浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同

14、如果资源可缓存，进行缓存

15、对响应进行解码（例如gzip压缩）

16、根据资源类型决定如何处理（假设资源为HTML⽂档）

17、解析HTML⽂档，构件DOM树，下载资源，构造CSSOM树，执⾏js脚本，这些操作没有严 格的先后顺序，以下分别解释：

16、构建DOM树：

Tokenizing：根据HTML规范将字符流解析为标记

Lexing：词法分析将标记转换为对象并定义属性和规则

DOM construction：根据HTML标记关系将对象组成DOM树

17、解析过程中遇到图⽚、样式表、js⽂件，启动下载

18、构建CSSOM树：

Tokenizing：字符流转换为标记流

Node：根据标记创建节点

CSSOM：节点创建CSSOM树

19、根据DOM树和CSSOM树构建渲染树 :

从DOM树的根节点遍历所有可⻅节点，不可⻅节点包括：

script , meta 这样本身 不可⻅的标签。  
被css隐藏的节点，如 display: none  
对每⼀个可⻅节点，找到恰当的CSSOM规则并应⽤

发布可视节点的内容和计算样式

20、js解析如下：

浏览器创建Document对象并解析HTML，将解析到的元素和⽂本节点添加到⽂档中，此时\*\*document.readystate为loading\*\*

HTML解析器遇到没有async和defer的script时，将他们添加到⽂档中，然后执⾏⾏内 或外部脚本。这些脚本会同步执⾏，并且在脚本下载和执⾏时解析器会暂停。这样就可以⽤document.write()把⽂本插⼊到输⼊流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的⽂档内容

当解析器遇到设置了async属性的script时，开始下载脚本并继续解析⽂档。脚本会在它 下载完成后尽快执⾏，但是解析器不会停下来等它下载。异步脚本禁止使⽤ document.write()，它们可以访问⾃⼰script和之前的⽂档元素

当⽂档完成解析，document.readState变成interactive

所有defer脚本会按照在⽂档出现的顺序执⾏，延迟脚本能访问完整⽂档树，禁止使⽤ document.write()

浏览器在Document对象上触发DOMContentLoaded事件

此时⽂档完全解析完成，浏览器可能还在等待如图⽚等内容加载，等这些内容完成载⼊ 并且所有异步脚本完成载⼊和执⾏，document.readState变为complete，window触发 load事件

21、显示⻚⾯（HTML解析过程中会逐步显示⻚⾯）  
————————————————  
版权声明：本文为CSDN博主「铮铮铁骨梁富贵」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/Newbie\_\_\_/article/details/107212575

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关用户从输入url到显示页面这个过程发生了什么

DNS解析 TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束一个页面从输入 URL 到页面加

朱雀/ 2023年07月11日 08:37/ 0 赞/ 16 阅读

相关从浏览器输入URL到页面解析的全过程

1.输入网址输入要访问的网址，即URL 2.缓存解析浏览器获取URL后，先去缓存中查找资源，从浏览器缓存-系统缓存-路由器缓存中查看；如果有就从缓存中显示界

淩亂°似流年/ 2023年03月13日 03:54/ 0 赞/ 2 阅读

相关输入url（网址）之后到显示网页的过程？

> 已订正，每个步骤都可以细化成很多问题，也可以说这个问题可以覆盖计算机网络常见知识的每个内容。 > > 参考链接：[link][] 1. DNS （Domain Nam

ゞ浴缸里的玫瑰/ 2023年03月06日 05:06/ 0 赞/ 40 阅读

相关从输入URL到浏览器显示页面的流程

> 转载自 : [从输入URL到浏览器显示页面的流程][URL] 从输入URL到浏览器显示页面的流程当在浏览器中输入域名，敲下回车后，不一会儿浏览器就会显示我们想要的

爱被打了一巴掌/ 2023年01月05日 12:23/ 0 赞/ 149 阅读

相关输入URL到显示页面的全过程

1、在浏览器地址栏输⼊URL 2、浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤如果资源未缓存，发起新请求如果已缓存，检验是否⾜够新鲜，⾜够新鲜直接提供

深藏阁楼爱情的钟/ 2022年11月14日 10:26/ 0 赞/ 173 阅读

相关输入URL到渲染出整个页面的过程

从输入URL到渲染出整个页面的过程包括三个部分： `DNS解析URL` > `浏览器发送请求与服务器交互` > `浏览器对接收到的html页面渲染`![在这里插入图片描述

深碍√TFBOYSˉ_/ 2022年10月25日 11:20/ 0 赞/ 130 阅读

相关从输入url到获取页面的完整过程

1.查询DNS（域名解析），获取域名对应的IP地址查询浏览器缓存（浏览器会缓存之前拿到的DNS 2-30分钟时间），如果没有找到，检查系统缓存，检查hosts

本是古典何须时尚/ 2022年07月16日 00:14/ 0 赞/ 206 阅读

相关页面从输入 URL 到页面加载显示完成的过程

分为4个步骤：（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来

淡淡的烟草味﹌/ 2022年07月15日 09:28/ 0 赞/ 205 阅读

相关从输入url到页面渲染出来过程

1.浏览器与服务器的交互在浏览器输入url后的访问： ![webp][] > URL的组成 > > 1. 协议 > 2. 域名（有时候也是ip,） > 3.

忘是亡心i/ 2022年04月22日 11:26/ 0 赞/ 237 阅读

相关输入url到页面显示发生了什么？

输入url到页面显示发生了什么？ 1.浏览器查找当前URL是否存在缓存，并比较缓存是否过期。 2.DNS解析URL对应的IP。 3.建立TCP连接（三次握手）。 4

布满荆棘的人生/ 2021年09月03日 04:47/ 0 赞/ 455 阅读