浏览器从输入URL地址到最终页面呈现的过程

最新推荐文章于 2023-09-26 21:30:00 发布
最新推荐文章于 2023-09-26 21:30:00 发布
阅读量263 收藏 1
点赞数
文章标签： http tcp/ip java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41453709/article/details/120725868
版权
网络请求部分
  1. 在浏览器输入URL地址

https://www.teambition.com/

  1. 浏览器构建请求行

GET / HTTP/1.1

请求方式 根路径 协议以及协议版本

HTTP协议相关版本拓展

HTTP/0.9

最初版本，只支持GET请求，且只能请求HTML格式的资源

HTTP/1.0

增加了POST和HEAD请求方式

可以通过Content-Type字段支持请求访问多种数据格式，如text/html, image/jpeg(即MIME type，多用途互联网邮件扩展类型)

支持Cache(缓存)，分为强缓存和协商缓存

无状态协议，每次TCP连接只能发送一个请求，不支持keep-alive方式保持连接的状态

HTTP/1.1

引入持久连接，即TCP在建立连接之后默认不关闭，不同于1.0版本时只能发送一个请求，1.1在连接开启的状态下可以发送多个请求

可以通过Connection: close字段来关闭持久连接

引入管道机制，即允许在连接过程中，同时发送多个请求，增加并发性，提高了响应的效率。但响应依旧是按顺序的

新增PUT(将数据从客户端发送至服务器取代指定的内容), PATCH(对已知资源进行局部更新), OPTIONS, DELETE请求

新增Host字段：指明服务器的域名

HTTP队头阻塞问题：HTTP协议是基于请求-应答的模式进行的，也就是说请求发送出去后是需要按顺序进行相应的，所有的HTTP请求都放在了一个任务队列中，当其中存在一个需要长时间响应的请求时，后续的请求就会阻塞住

并发连接：1.1中允许在一个持续的TCP连接中，同时发送多个HTTP请求，chrome允许最多并发6个

域名分片：既然一个域名最多可以发送6个，那在当前域名下再去划分二级或者三级域名，以此来增加并发请求的条数

HTTP/2.0

增加双工模式：客户端可以并发HTTP请求，服务端也可以并发响应HTTP请求，有效的解决了队头阻塞的问题

服务器推送：允许服务器未经请求，即可向客户端推送消息(适合加载静态资源)

  1. 首先查找强缓存，如果存在，则直接使用，如果不存在，则进入下一步

浏览器缓存

强缓存(不需要发送HTTP请求，保存于客户端的缓存)

1.0：使用Expires(过期时间)字段表示

1.1：使用Cache-Control字段表示(优先级更高)

协商缓存(需要发送HTTP请求，通过携带字段告诉服务器是否需要使用缓存)

Last-Modified(最后修改时间)

ETag(服务器根据当前内容，给文件生成唯一标识)

  1. DNS解析

由于数据是通过IP地址来进行转发的，但是我们在浏览器上输入的是域名，故我们需要先将域名进行解析得到对应的IP地址，才能进行接下来的一系列转发等操作，域名与IP地址的映射过程就称之为DNS解析，且浏览器提供了DNS数据缓存，如果一个域名已经经过解析，则浏览器会将解析内容缓存下来，下次如果是相同的域名则不再需要重新解析直接调用缓存即可

  1. 建立TCP连接

将域名解析成IP地址后，就可以开始进行与服务器短的TCP连接了

TCP协议(面向连接，可靠的基于字节流的传输层协议)

三次握手，四次挥手

  1. 发送HTTP请求

TCP连接建立完成后，就可以开始发送HTTP请求给服务器端了

浏览器发送的HTTP请求包含三个部分：请求行，请求头和请求体

请求行

第一步事已经建立，即

GET / HTTP/1.1

请求头

即诸如缓存字段之类的信息

请求体

POST请求时携带的需要发送给服务器端的数据

  1. 服务器响应HTTP请求

客户端成功发送一次HTTP请求后，服务器端接收HTTP请求，并对请求做出响应

响应内容同样包含三个部分：响应行，响应头和响应体

响应行

HTTP/1.1 200 OK

http协议以及版本，状态码，状态描述

响应头

同请求头类似

响应体

服务器端返回的相关数据

  1. 当响应完成之后，需要根据Connection字段来判断是否断开连接或者保持连接状态
  2. 当连接断开后，请求-响应流程结束，即客户端与服务器端的数据传输流程结束，接下来就需要浏览器根据数据以及html，css，js文件来绘制页面了
页面解析部分
  1. 构建DOM树

对于浏览器而言是无法直接将HTML文件进行对应标签的渲染的，所以需要先将HTML转化为浏览器可以识别的数据结构，即转化为DOM树，一个以document为根节点的多叉树

标记化算法

<html>
	<body>
		hello world
	</body>
</html>
  1. 遇到<，状态更新为标记打开
  2. 接收[a-z]字符串，状态为标记名称
  3. 遇到>，表示标记名称记录完成，状态更新为数据状态
  4. 读取hello world字符串
  5. 遇到<，状态更新为标记打开
  6. 遇到/，创建 end tag
  7. 接收[a-z]字符串，状态为标记名称
  8. 遇到>，表示标记名称记录完成，状态更新为数据状态
  9. 下面的标签依次按照顺序进行读取

建树算法

  1. DOM树是一个以document为根节点的多叉树，因此，首先初始化，创建document根节点
  2. 接收标记器传过来的html标签，状态变为before html，同时创建HTMLHtmlElement的DOM元素，添加到document根节点，压栈操作
  3. 状态变为before head，接收标记器传来的body标签，没有head标签，这时建树器自动创建HTMLHeadElement的DOM元素,进入到in head状态，然后直接跳转到after head状态
  4. 由于上一步标记器已经传入了body标签，故创建HTMLBodyElement的DOM元素，压栈
  5. 状态变为in body，同时接收hello world的字符串，接收开始时会创建text节点并插入到body元素的下面，后续接收的字符串或标签等都会依次插入到body元素下面
  6. 标记器传入body结束标记end tag，进入after body状态
  7. 标记器传入html技术标记end tag，进入after html状态
  8. 解析过程结束
  1. 样式计算

格式化

格式化样式表 =》通过document.styleSheets可以查看格式化后的样式表

标准化

格式化完之后，还需要对其中的一些属性值统一化处理，即标准化

如 em -> px, red -> #ff0000等

计算规则：继承，层叠

格式化和标准化完成之后，接下来就是计算每个节点具体对应的样式了，计算时遵循继承和叠加原则

继承：每个子节点都会默认继承其父节点的样式属性，如果其父节点无样式，则继续往上层查找，最终会继承其浏览器的默认样式

层叠：包含权重，特殊性以及先后顺序使得样式对其节点进行渲染

  1. 生成布局树

当生成了DOM树和DOM样式后，接下来就需要确定DOM树中每个元素在浏览器上的位置，最终生成布局树

布局树只会考虑显示元素，即display为none时，该元素并不会存在于布局树当中

页面渲染部分
  1. 建立图层树(Layer Tree)

在页面解析部分，我们生成了DOM树以及DOM样式，并且通过浏览器的布局系统计算出了DOM树中每一个元素对应的坐标位置，从而生成了布局树，看起来应该一切元素已经齐全，是时候要开始进行页面的绘制了，但是对于css以及元素节点的样式而言，远远不止一些简单的布局或者是定位，比如各个元素的层叠，2D,3D的转换以及一些因为结构的复杂会导致各种各样的以外情况，这些仅仅是考布局树是很难准确地渲染出各个元素在浏览器上的位置的，所以在正式绘制之前，我们还需要建立一个可以更加准确地表示各个元素以及其对应的样式的图层树，用来对特定节点进行分层。

一般情况下，子节点的图层默认属于父节点的图层，但是存在一些特殊的情况会使得一个节点提升成为单独的合成层，从而脱离父节点的图层，主要分为以下两种：

显式合成

拥有层叠上下文的节点

// 这里拓展一下z-index,层叠上下文，层叠等级和层叠顺序相关的知识

z-index
用来定义一个元素在z轴上的堆叠顺序
只有当元素定义了position不为static值时，z-index才会生效
判断元素在z轴上的堆叠顺序不仅仅只根据z-index来判断，是结合层叠等级，层叠顺序等的综合排序
在z轴上的层叠等级越高，意味着离屏幕越近

层叠上下文
简单来说，层叠上下文是用来描述元素在z轴上的层叠关系的，层叠上下文元素相比于普通元素而言，其层叠等级更高，离屏幕更近
<html>元素本身具有层叠上下文，称为跟层叠上下文
当一个元素position不为static且设定了z-index时，成为层叠上下文元素
CSS3中的新属性如transform，opacity等也会使得元素成为层叠上下文元素
注：只有当一个元素只有position或z-index时，是不构成

层叠等级
即定义元素在z轴上的层叠顺序优先级
且层叠等级适用于同一个层叠上下文中的元素在z轴上的先后顺序，不同层叠上下文中的元素之间不存在层叠等级的比较
对于其他普通元素而言，层叠等级表示其在z轴的先后顺序

层叠顺序
即用来确定元素的层叠等级

在基本了解了上述概念之后，我们还需要进行结合来实际判断当元素发生层叠时的上下顺序，简单来讲，我们需要遵循如下原则：
1. 首先判断两个元素是否处于同一个层叠上下文中，如果是，则层叠等级高的在上，低的在下
2. 如果两个元素不在同一个层叠上下文中，那么首先判断两个层叠上下文的等级，高的在上，低的在下
3. 如果两个元素所处层叠上下文相同或两个层叠上下文等级相同，且元素本身的层叠等级也相同，则DOM结构中后面的元素等级高，在上

需要剪裁的地方：即如果存在当一个div中的元素内容超出原本设定的大小时，超出的部分就需要被剪裁。如果出现了滚动条，则滚动条会被提升为一个单独的图层

隐式合成

即当层叠等级较低的元素被提升为一个单独的图层之后，等级高于该元素的所有元素都会被提升成独立的图层元素

  1. 生成绘制列表

当图层树建立完毕，浏览器会将图层一层层进行拆分解析，形成一个个绘制指令，最终会根据这些绘制指令来按照顺序绘制最终的页面

注：在chrome中可以通过more tools里的Layers来查看整个页面被拆分后的具体指令内容

  1. 生成图块和位图

在实际的绘制过程中，是有一个专门的现成来负责的，称之为合成线程。

合成线程将图层分块之后，由专门的栅格化线程池来将一个个图块转化成位图数据，最终发送给合成线程用于绘制页面内容

注：对于chrome浏览器而言，其底层对于首屏加速的一个优化手段是先用一个低分辨率的图片进行图块合成以及绘制，等待高分辨率的图片加载完成之后，再进行替换，以此来达到更快加载首屏页面的效果

  1. 显示器显示内容

栅格化操作完成之后，合成线程会生成一个绘制命令，并且发送给浏览器，浏览器接收之后，就会根据命令进行页面的绘制，绘制完成即生成页面之后，将这部分内容发送给显卡，最终显示器显示当前绘制的页面

至此，从输入URL地址到最终页面的显示的完整流程就结束了

补充一下关于重绘和回流相关的知识

首先我们梳理一下整个渲染的基本流程

构建DOM树 =》计算样式 =》生成布局树 =》建立图层树 =》生成绘制列表 (渲染进程当中的主线程中进行)

分图块 =》生成位图 =》发送给浏览器进程 =》发送给显卡缓存 =》显示器显示 (渲染进程当中的合成线程中进行)

回流

即当我们修改了DOM结构中元素的几何尺寸等内容后，会引起渲染进程的回流过程

可以引起回流的方式如下：

  1. 修改元素的width，height，border等内容使得元素的尺寸等发生变化
  2. 增删或者移动DOM节点
  3. 读写scroll属性，offset属性以及client属性
  4. 调用window.getComputedStyle方法

当触发了回流之后，渲染进程需要从构建DOM树开始重新执行后续的操作，也就是相当于重新执行了一遍渲染进程当中的主线程内容，同时处于合成线程中的内容也会重新执行，所以当一个页面中元素结构非常复杂的时候，触发回流很可能会导致页面出现短暂的空白现象从而降低用户的浏览体验

重绘

即当我们对于DOM的修改导致了样式的变化，会引起渲染进程的重绘过程

重绘相比于回流而言，不需要从DOM树部分重新执行，而是仅仅重新计算样式，以及重新生成绘制列表即可，跳过了生成布局树和建立图层树的步骤，但是合成线程中的内容也是需要重新执行的

通过对比我们可以看到，重绘的代价要远远小于回流，所以对于页面加载的优化方面，减少发生回流也是需要考虑的重点，例如可以通过尽可能的使用class类来替代使用style，这样可以避免回流而仅仅引起重绘，减少页面加载的时间

合成

除了重绘和回流，还存在一种直接合成的情况，即跳过了渲染进程中主线程的操作，只需要重新执行合成线程中的流程即可，这种方式也称之为GPU加速

实现合成的方法：CSS3的transform，opacity，filter等属性

请描述一下网页从开始请求到最终显示的完整过程
JackieDYH的博客
03-01 2142
随着互联网技术的发展，浏览器已成为网民们获得优质服务与信息的重要工具。当我们连接上网络，打开浏览器，输入网址，空白的页面瞬间会出现各式各样的信息，比如一个搜索网页、挤满文字的门户网站或由图片、文字等整齐排版的网站。那么，从我打开浏览器到我们看到想要的东西展示在网页上这一过程中，究竟时发生了什么呢？ 一个网页从开始请求到最终的显示一般可以分为7个步骤： 1.在客户端浏览器中输入网址URL。 2.发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。 3.(客户端浏览器)与WEB服务器建立TC.
从浏览器输入网址(URL)，到最终展示页面，都发生了什么？
CYK_byte的博客
11-01 3967
从（如下图）到你按下回车，再到最后出现这个网页界面（如下图）中间到底发生了什么？接下来就带你一步步进行解析~
从浏览器输入URL到最终看到页面, 这其中经历了哪些过程 ?
m0_53804791的博客
12-12 4514
从网络原理来看1. URL解析2. 构造http请求3. 构造完http请求就需要将数据传给传输层了4. 网络层5. 数据链路层6.物理层7. 路由器8. 到达服务器的物理层9. 解析成二进制数据10. 服务器的数据链路层11. 服务器的网络层12. 服务器的传输层13. 服务器的应用层14. 重复上述操作15. 总图解 1. URL解析 从浏览器输入URL, 浏览器需要先解析URL, 并在DNS上查询此url对应的ip地址 2. 构造http请求 解析完之后, 浏览器就需要构造一个GET请求, 并将携带的
浏览器请求到页面的展示过程
qq_38557202的博客
10-27 523
看了计算机网络、javascript权威指南，了解了些浏览器知识，总结一下地址的输入到页面的呈现过程。 一、DNS解析过程 1询问2询问3询问找到14.215.177.38找到14.215.177.381询问找到14.215.177.382询问找到14.215.177.383询问转发模式非转发模式找到14.215.177.38...找到14.215.177.38非转发模式查询找到14.215.17...
一个网页从开始请求到最终显示的完整过程
泠泠似水
12-28 7041
一个网页从开始请求到最终显示的完整过程一个网页从请求到最终显示的完整过程一般可分为如下7个步骤： 1. 在浏览器中输入网址； 2. 发送至DNS服务器并获得域名对应的WEB服务器的IP地址； 3. 与WEB服务器建立TCP连接； 4. 浏览器向WEB服务器的IP地址发送相应的HTTP请求； 5. WEB服务器响应请求并返回指定URL的数据，或错误信息，如果设定重定向，则重定向到新的URL地
从浏览器地址栏输入url到显示页面的详细过程
qq_53157160的博客
07-06 1850
​ SYN = 1 ，表示这是一个 请求连接报文 或者 连接接受报文​ ACK1 确定收到了请求​ FIN 终止 断开连接​ seq 发送自己的数据​ ack 发送接收到对方的数据​ DNS寻址 ==>建立连接 ==>发送请求 ==>处理并回传 ==>接收并渲染 ==> 释放连接DNS寻址通常我们在浏览器当中输入的URL（统一资源定位符）是域名，而不是直接输入ip（基本上指向计算机）地址。从宏观角度来讲，当我们输入URL并且提交的时候，第一步就是根与域名寻找目的服务器的ip地址，
浏览器从输入URL到页面呈现的过程
最新发布
cnds123的专栏
09-26 215
浏览器从输入URL到页面呈现的过程介绍
从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？
Whoopsina的博客
04-26 3261
从一道面试题来看前端页面的生命周期：从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？
从输入URL到页面展示的过程详解
蔡姐的博客
12-26 2867
作为一个前端人员，面试时经常会被问及这个问题：“在浏览器从输入URL到页面展示中经历了什么过程”？这个问题我之前也是一知半解，随着对内容了解的越多，发现这个问题涵盖的面越广，涉及的知识也很多，所以今天将它整理一下，方便自己和其他小伙伴一起学习。 由于这个问题涉及知识很多，而且我也想把这些知识都一起整理一下，所以本文采用总-分-总的的行文思路，具体内容如下： 首先介绍整体流程所需要涉及的几个方面 其次分别介绍每个方面所涉及的知识 最后一节再详细的说明整体流程 要是有小伙伴觉得之前的内容很无聊，或者我说的不
从输入URL到渲染的完整过程？
loveX001的博客
10-25 1465
通过阅读本文，相信小伙伴们对从输入URL到页面渲染的过程有了一个大概的理解。其实整个过程是很复杂也比较繁琐的，不是一篇文章或者几张图就可以囊括的，在这有很多细节不便展开，有兴趣的小伙伴可以对这个过程中的一些细节深入研究研究哦！文章中肯定会有些说的不是很清楚的地方，恳请各位大佬不吝赐教，一起成长！
从浏览器输入url，到最终看到页面，经历了哪些过程？
qq_42803467的博客
08-11 936
一、站在网络原理的角度来看 1.输入的 URL 会先触发 DNS （先查浏览器缓存，再查 hosts 文件，再查 DNS服务器） 2.构造 HTTP 协议的数据报。 从浏览器中输入，那请求方法是GET，URL是输入的 URL，另外浏览器会自动添上一些报头， 接下来这个数据报就会被交给传输层。 3.TCP 就会把这个数据构造成一个 TCP 数据报。 （在构造这个包之前，已经进行过三次握手了） TCP构造完成后交给 IP协议 4.IP 协议构造成一个 IP 数据报 此处要根据数...
浏览器发起请求的整个过程
shanshange的专栏
03-17 620
域名解析——TCP三次握手——IP层发起http请求——服务器响应http请求，返回结果——浏览器解析html，请求具体的资源文件——浏览器对页面进行渲染 DNS解析 1.先找浏览器自身的dns缓存（chrome://chrome-urls），1000条，是否过期 2.查找操作系统的dns缓存，通过命令行ipconfig /allcompartments /displaydns 3.本地hos...
浏览器输入一个 url到显示对应页面的全过程
Quan的博客
06-20 1260
总的过程图 1、DNS解析： 当用户输入一个网址并按下回车键的时候，浏览器得到一个域名，而在实际通信过程中，我们需要的是一个 IP地址，因此需要先把域名转换成相应的 IP地址。 2、TCP连接： 浏览器通过 DNS获取到 Web服务器真正的 IP地址后，便向 Web服务器发起 TCP连接请求，通过 TCP三次握手建立好连接后，浏览器便可以将 HTTP请求数据发送给服务器了。 3、发送 HTTP请求： 浏览器向 Web服务器发起一个 HTTP请求，HTTP协议是建立在 TCP协议之上的应用层协议，其本质是建
浏览器地址栏输入url到页面呈现的整个过程
try to do
04-29 473
https://www.cnblogs.com/kongxy/p/4615226.html https://blog.youkuaiyun.com/MiemieWan/article/details/85708052 https://www.cnblogs.com/daijinxue/p/6640153.html https://blog.youkuaiyun.com/MiemieWan/article/details/...
浏览器呈现页面的过程（二）
weixin_41154070的博客
09-22 1635
当浏览器为用户呈现一个页面时，这些进程与线程之间是如何通信的？ 以一个常见的例子作为起点：输入一个url,浏览器会从服务端获取数据并将页面展示出来。 1.用户通过浏览器向一个站点发起访问请求以及浏览器准备渲染这个页面的部分，这个过程称之为导航。 Step1: 处理用户输入 浏览器的地址栏同时还是一个搜索框，当用户开始在地址栏输入时，UI线程需要解析用户的输入，才能决定是直接访问网址还是把用户的输入给搜素引擎处理。 Step2：开始导航 当用户按下回车键后，UI线程要求网络线程去获取网站的内容。窗口的Tab上
浏览器发出一个请求到收到响应经历了哪些步骤？
lcb1424556301的博客
02-10 728
1．浏览器解析用户输入的 URL ，生成一个 HTTP 格式的请求 2．先根据 URL 域名从本地 hosts 文件查找是否有映射 IP ，如果没有就将域名发送给电脑所配置的 DNS 进行域名解析，得到 IP 地址 3．浏览器通过操作系统将请求通过四层网络协议发送出去 4．途中可能会经过各种路由器、交换机，最终到达服务器 5．服务器搜到请求后，根据请求所指定的端口，将请求传递给绑定了该端口的应用程序，比如8080被 tomcat 占用了 6. tomcat 接收到请求数据后，按照 http 协议的格式进行解
从输入 URL 到页面加载完成中间都经历了什么
luoluoxx0115的博客
11-23 7589
目录概述1、URL解析2、DNS解析3、TCP连接4、HTTP请求5、HTTP响应6、页面渲染 概述 1、URL解析：地址栏输入地址，浏览器对输入内容进行解析，判断URL的合法性，和是否有可用缓存 2、DNS解析：域名解析系统（DNS）查找对应的IP地址 3、TCP连接：浏览器向服务器发起TCP连接，与浏览器建立TCP三次握手 4、HTTP请求：浏览器将http请求数据发给服务器（客户端–>服务器） 5、HTTP响应：服务器处理收到的请求，返回响应结果至浏览器（服务器–>客户端） 6、页面
从输入url到页面完成加载发生了什么
web前端开发
07-03 699
作者 | Jake Zhang链接 | https://juejin.im/post/5e92f11b6fb9a03c46493880在写这篇文章之前本想着这个知识点涉及知识点太多太杂，...
从输入URL到页面渲染完成
远方
12-20 1467
​​​​​​​​​​​​​​从输入URL到页面渲染完成，这个过程可大致分为两个阶段：网络通信和页面渲染 网络通信： 互联网内各网络间设备的通信遵循TCP/IP协议，利用TCP/IP协议进行网络通信时，会通过分层与对方通信。数据传输的过程是：由应用层产生数据后，经过传输层的分段处理（添加TCP或UDP包头）、网络（添加IP地址信息）、数据链路层（封装成MAC帧）、物理层传输电信号。 1.输入url...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值