这个过程中涉及到负责管理的浏览器进程、负责网络请求的网络进程和负责页面渲染的渲染进程

渲染过程这里先不进行具体描述,后续会单独整理

整体步骤

  前提,当前页面的卸载事件和收集需要释放的内存

  • 第一步,浏览器进程合成完整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回车到页面呈现之间发生的具体步骤的更多相关文章

  1. 用户在浏览器输入URL回车之后,浏览器都做了什么

    在直接列出执行的步骤之前先来普及几个知识,相信了解完这些知识之后会对前后端的交互有更深入的理解. 1.TCP连接 TCP:Transmission Control Protocol, 传输控制协议,是 ...

  2. 从用户在浏览器输入URL回车之后,浏览器都做了什么

    在直接列出执行的步骤之前先来普及几个知识,相信了解完这些知识之后会对前后端的交互有更深入的理解. 1.TCP连接 TCP:Transmission Control Protocol, 传输控制协议,是 ...

  3. <用户输入url按下回车,一直到用户看到界面,这期间经历了什么>

    用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一.  DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...

  4. 在浏览器中输入url回车之后会发生什么

    在浏览器中输入URL之后,浏览器会经历以下5个步骤: 1.解析URL 2.DNS域名解析 3.浏览器与网站建立TCP链接(三次握手) 4.请求和传输数据 5.浏览器渲染页面 一.解析URL 什么是ur ...

  5. 计算机网络【6】—— 从浏览器输入URL到显示页面发生了什么

    当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染. 一.网络通信 互联网内各网络设备间的通信都遵循TCP ...

  6. 输入URL回车之后,究竟发生了什么

    https://blog.csdn.net/androidstarjack/article/details/107031771 在浏览器输入URL回车之后发生了什么?(超详细版)   前言 这个问题已 ...

  7. 从用户输入url到页面最后呈现 发生了些什么?

    一.浏览器获取资源的过程: 1.输入url 2.浏览器解析url,获得主机名 3.将主机名转换成服务器ip地址(查找本地DNS缓存列表,如果没有则向默认的DNS服务器发送查询请求) 4.浏览器建立一条 ...

  8. 输入一个URL到页面呈现其中发生的过程-------http过程详解

    在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情. 服务器启动监听模式 那我们就开始了,故事其实并不是从在浏览器的地址栏输入一个网址,或者我们 ...

  9. 浏览器输入URL到响应页面的全过程

    B/S网络架构从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,HTTP协议采用无状态的短链接的通信方式,通常情况下,一次请求就完成了一次数据交互,通常也对应一个业务逻辑,然后这次通 ...

  10. 从浏览器输入URL回车发生了什么

    在浏览器输入url后回车,整个过程发生了什么?整个过程如果节节细述的话,那非常的复杂.我就简单的描述一下整个过程 1.查询DNS,获取域名对应的IP地址 (1).浏览器搜索自身的DNS缓存 (2).搜 ...

随机推荐

  1. rar 压缩解压

    rar wget https://www.rarlab.com/rar/rarlinux-x64-612.tar.gz # 压缩文件 rar a -r test.rar file # 解压文件 unr ...

  2. android kotlin data class的公共参数解决

    kotlin的 data class 不能简略的继承 另一个 data class(要初始化对应父类的值) 尝试使用 sealed class 解决 sealed class CommonParams ...

  3. 使用laydate时间输入控件

    下载 layDate 后,将文件夹 laydate 整个放置在您的项目任意目录,使用时只需引入 laydate.js 即可. 详细的使用方法见:https://www.layui.com/laydat ...

  4. ubuntu启动盘制作

    转自https://www.cnblogs.com/silentdoer/p/13044305.html 1. 从Ubuntu官网http://cn.ubuntu.com/download/下载系统的 ...

  5. 前端电商 sku 的全排列算法

    需求 需求描述起来很简单,有这样三个数组: let names = ["iPhone",'iPhone xs'] let colors = ['黑色','白色'] let stor ...

  6. java乱码处理

    package com.zhouhe.util; import java.io.UnsupportedEncodingException; /** * 自定义工具类 * @Author zhouhe ...

  7. rdlc 中文在win10中显示异常,在非win10中显示正常

    RDLC中的默认字体Arial. 在win10中,RDLC为Arial时,显示中文会异常,这个时候,只需要将Font修改为中文字体就可以了,例如修改为宋体.

  8. Flutter开发 备用网站地址

    Flutter开发之环境配置_移动开发_System.o的博客-CSDN博客: https://blog.csdn.net/lyh1299259684/article/details/80505185 ...

  9. vim ctrl+s 不能再操作

    vim下编写代码不自觉按到Ctrl+S,此时vim就不能再操作了.发现vim下Ctrl+S是阻止之后的输入,可通过Ctrl+Q来解除.

  10. vue 在 v-for 时给每项元素绑定事件需要用事件代理吗?为什么?

    vue本身不做事件代理(react将所有事件都委托到document上,然后进行派发) 普通html元素和在组件上挂了.native修饰符的事件.最终EventTarget.addEventListe ...