用户输入URL回车到页面呈现之间发生的具体步骤
这个过程中涉及到负责管理的浏览器进程、负责网络请求的网络进程和负责页面渲染的渲染进程
渲染过程这里先不进行具体描述,后续会单独整理
整体步骤
前提,当前页面的卸载事件和收集需要释放的内存
- 第一步,浏览器进程合成完整url,用户在地址栏输入的内容分两种:搜索内容和url地址(一般不完整),若是搜索内容,浏览器根据搜索引擎和搜索的内容生成合法的url;若是url,判断url的协议,http协议补充'http',https协议补充'https',页面标签开始loading动画
- 第二步,浏览器进程通过进程间通信(IPC)把url请求发送给网络进程
- 第三步,网路进程获取到url请求后,先去本地缓存查找,若有缓存,直接200返回;若没有,进行url请求过程
- 第四步,获取IP和端口号。网络进程请求DNS获取IP和端口,先去DNS缓存(浏览器缓存、DNS缓存、本地host缓存)中查找,若命中,直接使用缓存结果;没命中,请求DNS服务器获取IP和端口号,没有端口号,http协议默认80,https默认443,。若是https请求,还需建立TLS连接
- 第五步,建立TCP连接,值得注意的是Chrome浏览器在HTTP/1.1协议下对同一域名最多只能建立6个TCP连接,若当前域名下有超过6和TCP连接,后续请求需进入排队等待,直至当前请求数量少于6个,则建立TCP连接
- 第六步,经过三次握手建立连接,数据流向:A端应用层(HTTP报文) -> A端传输层(添加TCP头) -> A端网络层(添加IP头) --> 底层物理网络 --> B端网络层(解开IP头,识别目标IP) -> B端传输层(解开TCP头,识别应用端口) -> B端应用层(解析HTTP报文)。这里的A端指网络进程,B端指通信目标
- 第七步,解析结果:需要重定向,HTTP响应状态码返回301或302并且在响应头Location字段指出重定向的地址,重定向就根据重定向地址重新发起请求;若不是重定向,首先根据请求头中If-None-Match来判断缓存是否更新了,没更新则返回304告诉浏览器继续使用之前的缓存,有更新则返回200状态码(响应头添加Cache-Control:Max-age=xxxx告诉浏览器要缓存数据),响应数据沿“原路线”返回数据
- 第八步,数据传输结束,进行“四次挥手”断开连接,若响应头加上Connection:Keep-Alive,表示暂不断开,建立长连接
- 第九步,判断响应数据类型。网路进程根据响应头的Content-type判断数据类型,若是字节流,进程将请求交给下载管理器,不进行后续渲染;若是html页面,通知浏览器进程准备渲染
- 第十步,浏览器进程收到通知根据页面B是否是页面A中打开并和页面A是否是同一站点(协议和域名一样认为是同一站点),若是同一站点,复用之前网页的进程,否则新建一个单独的渲染进程
- 第十一步,浏览器进程发出“提交文档”消息给渲染进程,渲染进程会与网络进程建立“管道”,文档传输完成后,渲染进程会返回“确认提交”的消息给浏览器进程
- 第十二步,浏览器进程收到“确认提交”消息后,会更新浏览器状态,包括安全状态、地址栏url、前进后退历史状态,并更新web页面,导航结束,进入渲染阶段
- 第十三步,渲染进程开始页面解析和子资源加载,页面生成完成,渲染结束,会停止标签图标的loading动画
归纳流程图如下:

用户输入URL回车到页面呈现之间发生的具体步骤的更多相关文章
- 用户在浏览器输入URL回车之后,浏览器都做了什么
在直接列出执行的步骤之前先来普及几个知识,相信了解完这些知识之后会对前后端的交互有更深入的理解. 1.TCP连接 TCP:Transmission Control Protocol, 传输控制协议,是 ...
- 从用户在浏览器输入URL回车之后,浏览器都做了什么
在直接列出执行的步骤之前先来普及几个知识,相信了解完这些知识之后会对前后端的交互有更深入的理解. 1.TCP连接 TCP:Transmission Control Protocol, 传输控制协议,是 ...
- <用户输入url按下回车,一直到用户看到界面,这期间经历了什么>
用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一. DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...
- 在浏览器中输入url回车之后会发生什么
在浏览器中输入URL之后,浏览器会经历以下5个步骤: 1.解析URL 2.DNS域名解析 3.浏览器与网站建立TCP链接(三次握手) 4.请求和传输数据 5.浏览器渲染页面 一.解析URL 什么是ur ...
- 计算机网络【6】—— 从浏览器输入URL到显示页面发生了什么
当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染. 一.网络通信 互联网内各网络设备间的通信都遵循TCP ...
- 输入URL回车之后,究竟发生了什么
https://blog.csdn.net/androidstarjack/article/details/107031771 在浏览器输入URL回车之后发生了什么?(超详细版) 前言 这个问题已 ...
- 从用户输入url到页面最后呈现 发生了些什么?
一.浏览器获取资源的过程: 1.输入url 2.浏览器解析url,获得主机名 3.将主机名转换成服务器ip地址(查找本地DNS缓存列表,如果没有则向默认的DNS服务器发送查询请求) 4.浏览器建立一条 ...
- 输入一个URL到页面呈现其中发生的过程-------http过程详解
在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情. 服务器启动监听模式 那我们就开始了,故事其实并不是从在浏览器的地址栏输入一个网址,或者我们 ...
- 浏览器输入URL到响应页面的全过程
B/S网络架构从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,HTTP协议采用无状态的短链接的通信方式,通常情况下,一次请求就完成了一次数据交互,通常也对应一个业务逻辑,然后这次通 ...
- 从浏览器输入URL回车发生了什么
在浏览器输入url后回车,整个过程发生了什么?整个过程如果节节细述的话,那非常的复杂.我就简单的描述一下整个过程 1.查询DNS,获取域名对应的IP地址 (1).浏览器搜索自身的DNS缓存 (2).搜 ...
随机推荐
- 一些开源软件的LOGO
整理一些开源软件的logo或者吉祥物,主要是一些以动物形象为主的logo. 1. GNU,不是一个软件,而是一个软件组织,包括很多知名的软件例如GCC编译器. GNU的LOGO是一只牛. GCC的lo ...
- Oracle View的 WITH READ ONLY 參數有什麼用途?
限制此視圖只能select,不能進行DML(update,delete,insert)操作,可以保護源表的數據不被改動. CREATE VIEW XXXXX_V AS select XXX,XXX1, ...
- Windows初始化.net core环境
1.项目使用.ner core版本(例:.net core.3.1) 1.1安装运行环境 https://dotnet.microsoft.com/en-us/download 1.2安装.net 运 ...
- Vulnhub 靶场 DOUBLETROUBLE: 1
Vulnhub 靶场 DOUBLETROUBLE: 1 前期准备 靶机地址:https://www.vulnhub.com/entry/doubletrouble-1,743/ kali攻击机: 靶机 ...
- mysql添加到环境变量
今天换新系统,以前的一些常用软件重新安装了一下,安装到mysql我还是按照以前的习惯选择了低版本的5.7系列,突然想要装一把,像python一样可以直接访问解释器,能不能直接在cmd中输入mysql就 ...
- Java 分布式锁实现的一些实践
近期换工作,闲下来有点时间写点东西,在这里分享一些心得体会 背景:我们在做后端开发时,无法避免的会遇到一些一致性问题,有时候我们前端的小伙伴或者rpc接口的调用方,在很短的时间间隔内给我们相同的请求, ...
- MSDTC突然停用了,后台数据无法更新
由于前台电脑停电突然关机,导致重启后发现MSDTC无法更新数据,重新添加了link,只能查询,更新失败,报错:无活动事务 1.修改host设置,在C:\Windows\System32\drivers ...
- Websocket(websocket自定义协议)
是基于TCP的 tcp特征: 我发数据对端可以接收到,对端发数据我可以收到 先发先收到,后发后收到 使用websocket客户端发给服务器数据,服务器回客户端返回数据流程(自定义websocket协议 ...
- 实践:基于腾讯云播放器SDK,带您体验播放多场景下的 COS 视频文件
一. 实践步骤 1. 准备您的 腾讯云COS 视频文件链接,您需要: 1.1 创建一个存储桶: 1.2 上传对象: 1.3 在对象信息详情里复制对象地址: 注意: 目前腾讯云有COS特惠活动,新人1元 ...
- SAP GGB0 校验
需求,针对财务凭证分配号的要求 在满足条件下进行必填校验 在需要的位置 创建确认 创建步骤,一般通过点击就可以形成需要的前提逻辑,也可以通过 设置->专门方式 来进行自定义编写. 如果前提条件是 ...