首页  思维导图  详情

从URL输入到页面展现发生了什么

2023-04-12 18:06:16   8  举报





AI智能生成

从URL输入到页面展现发生了什么

前端开发

作者其他创作

大纲/内容

DNS解析：浏览器并不能直接通过域名找到对应服务器，要通过IP地址。DNS是一个网络服务器。

解析URL

输入URL后，浏览器会解析出协议、主机、端口、路径等信息，并构造一个HTTP请求。

1. 浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。
2. 没有命中强缓存规则，浏览器会发送请求，根据请求头的If-Modified-Since和If-None-Match判断是否命中协商缓存，如果命中，直接从缓存获取资源。如果没有命中，则进入下一步。
3. 如果前两步都没有命中，则直接从服务端获取资源。

浏览器缓存

强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。

强缓存

cache-control

响应头和请求头

缺点：时间最终还是会失效

expires

服务器返回的响应头中

缺点：服务器事件和浏览器时间可能不一致

协商缓存：命中条件为强缓存时间过期/cache-control：no-cache

Etag(响应头)if-not-match(请求头)

服务器在返回资源的时候，在头信息中添加了 Etag 属性，这个属性是资源生成的唯一标识符，当资源发生改变的时候，这个值也会发生改变。在下一次资源请求时，浏览器会在请求头中添加一个 If-None-Match 属性，这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较，以此来判断资源是否发生改变，是否需要返回资源。通过这种方式，比 Last-Modified 的方式更加精确。

当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更高。使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 Etag 属性

last-modified(响应头)if-modified-since(请求头)

服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较，以此来判断资源是否做了修改。如果资源没有修改，那么返回 304 状态，让客户端使用本地的缓存。如果资源已经被修改了，则返回修改后的资源。使用这种方法有一个缺点，就是 Last-Modified 标注的最后修改时间只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，那么文件已将改变了但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确，且如果在本地打开缓存文件，就会造成 Last-Modified 被修改，所以在 HTTP / 1.1 出现了 ETag。

为什么需要浏览器缓存

- 减少了服务器的负担，提高了网站的性能
- 加快了客户端网页的加载速度
- 减少了多余网络数据传输

如何解析

递归查询

本地域名服务器-根域名-顶级域名-权威域名线性传输

迭代查询

由本地域名服务器一个个查询根域名、顶级域名、权威域名

优化

DNS缓存

浏览器缓存

系统缓存

路由器缓存

IPS服务器缓存

根域名服务器缓存

顶级域名服务器缓存

主域名服务器缓存

DNS负载均衡（DNS重定向）

DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查询时， DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果，将客户端的访问引导到不同的机器上去，使得不同的客户端访问不同的服务器，从而达到负载均衡的目的。
大家耳熟能详的CDN(Content Delivery Network)就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求，提供所需的内容

dns-prefetch

DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的链接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验

TCP三次握手

客户端发送一个带 SYN=1，Seq=X 的数据包到服务器端口（第一次握手，由浏览器发起，告诉服务器我要发送请求了）

服务器发回一个带 SYN=1， ACK=X+1， Seq=Y 的响应包以示传达确认信息（第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧）

客户端再回传一个带 ACK=Y+1， Seq=Z 的数据包，代表“握手结束”（第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧）

为什么需要三次

由TCP自身特点「可靠传输」决定，要确认双方的发送和接受能力。

第一次握手确认客户端的传输能力
第二次握手确认服务器的传输和接受能力
第三次握手确认客户端的接受能力

如果只有两次，在客户端发送连接请求（第一次）时，该次请求若在某个节点长时间滞留呆滞客户端未收到反馈，再次发送请求，在这次请求成功后，第一个请求到达服务器，服务器以为客户端再次请求，建立连接，而客户端忽略了确认，导致服务端一直等待数据，浪费资源。

发送HTTP请求

服务器处理请求并返回HTTP报文

每台服务器上都会安装处理请求的应用——Web server。常见的web server产品有apache、nginx、IIS、Lighttpd等。

浏览器解析渲染页面

浏览器主要构成

用户界面

包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

浏览器引擎

用来查询及操作渲染引擎的接口

渲染引擎

用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来

网络

用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作

JS解释器

用来解释执行JS代码

UI后端

用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口

数据存储

属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

多进程的浏览器

Browser进程：浏览器的主进程（负责协调、主控），只有一个

第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建

GPU进程：最多一个，用于3D绘制

浏览器渲染进程（内核）：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程）

多线程

GUI线程

负责渲染浏览器页面，解析HTML、CSS，构建DOM树、构建CSSOM树、构建渲染树和绘制页面

JS引擎线程

JS引擎线程也称为JS内核，负责处理Javascript脚本程序，解析Javascript脚本，运行代码

事件触发线程

定时器线程

网络请求线程

浏览器内核渲染步骤

解析HTML，生成DOM树，解析CSS，生成CSSOM树

将DOM树和CSSOM树结合，生成渲染树(Render Tree)

Layout(重排)/reflow(回流):根据生成的渲染树，进行回流，得到节点的几何信息（位置，大小）

Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

Display:将像素发送给GPU，展示在页面上。

断开链接：TCP四次挥手

发起方向被动方发送报文，Fin、Ack、Seq，表示已经没有数据传输了。并进入 FIN_WAIT_1 状态。 (第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧)

被动方发送报文，Ack、Seq，表示同意关闭请求。此时主机发起方进入 FIN_WAIT_2 状态。 (第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧)

被动方向发起方发送报文段，Fin、Ack、Seq，请求关闭连接。并进入 LAST_ACK 状态。 (第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧)

发起方向被动方发送报文段，Ack、Seq。然后进入等待 TIME_WAIT 状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复，则正常关闭。 (第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧)

为什么需要四次挥手

因为当服务端收到客户端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。但是关闭连接时，当服务端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉客户端，“你发的FIN报文我收到了”。只有等到我服务端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四次挥手。