HTTP资源预取

Ruonorth

于 2022-09-20 20:36:00 发布

阅读量494

点赞数

分类专栏： http javascript web 文章标签： http 服务器网络

本文链接：https://blog.youkuaiyun.com/riddle1981/article/details/126961148

版权

web 同时被 3 个专栏收录

29 篇文章

订阅专栏

javascript

12 篇文章

订阅专栏

http

4 篇文章

订阅专栏

资源预取

preload
作为元素的属性 rel 的值，表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源。使用方式如下：

<head>
  <meta charset="utf-8">
  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
</head>
<body>
  <video src="sintel-short.mp4" />
</body>

prefetch
作为元素的属性 rel 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。

注意描述上的区别：preload是当前浏览器十分可能加载，所以必须预取和缓存的资源。prefetch 一般预加载的是其他页面会用到的资源。因此，prefetch 不会像 preload 一样，在页面渲染的时候加载资源，而是利用浏览器空闲时间来下载。当进入下一页面，就可直接从 disk cache 里面取，既不影响当前页面的渲染，又提高了其他页面加载渲染的速度。

preconnect
是向浏览器提示用户可能需要来自目标资源源的资源，因此浏览器可以通过抢先启动与该源的连接来改善用户体验。
用户代理应尽可能尝试启动预连接并执行完整的连接握手（DNS+TCP 用于 HTTP，DNS+TCP+TLS 用于 HTTPS 源），但允许选择执行部分握手（DNS 仅用于 HTTP , 和 DNS 或 DNS+TCP 用于 HTTPS 来源），或完全跳过它，由于资源限制或其他原因。

此连接已获得但不直接使用。它将保留在连接池中以供后续使用。

使用方式如下：

<link rel="preconnect" href="https://example.com">

DNS-prefetch
是尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。

dns-prefetch 仅对跨域域上的 DNS 查找有效，因此请避免使用它来指向您的站点或域。这是因为当你打开这个页面，本站域名已经完成解析。

使用方式：

<link rel="dns-prefetch" href="https://fonts.googleapis.com/">

prerender prerender 就像是在后台打开了一个隐藏的 tab，会下载所有的资源、创建DOM、渲染页面、执行js等等。如果用户进入指定的链接，隐藏的这个页面就会立马进入用户的视线。但是要注意，一定要在十分确定用户会点击某个链接时才使用该特性，否则客户端会无端的下载很多资源和渲染这个页面。正如任何提前动作一样，预判总是有一定风险出错。如果提前的动作是昂贵的（比如高CPU、耗电、占用带宽），就要谨慎使用了。

使用方法：

<link rel="prerender" href="https://example.com/content/to/prerender">

HTTP2

HTTP/2 是 HTTP 网络协议的一个重要版本。 HTTP / 2 的主要目标是通过启用完整的请求和响应多路复用来减少延迟，通过有效压缩 HTTP 标头字段来最小化协议开销，并增加对请求优先级和服务器推送的支持。

启动 HTTP/2（第 3 节）介绍了如何启动 HTTP/2 连接。
帧（第4 节）和流（第 5 节）层描述了 HTTP/2 帧的结构和形成多路复用流的方式。
帧（第 6 节）和错误（第 7 节）定义包括 HTTP/2 中使用的帧和错误类型的详细信息。
HTTP 映射（第 8 节）和附加要求（第 9 节）描述了如何使用帧和流来表达 HTTP 语义。

HTTP连接

HTTP/2 over TLS 使用“h2”协议标识符。
一旦 TLS 协商完成，客户端和服务器都必须发送一个连接前言

参考资料：
http2:

https://www.rfc-editor.org/rfc/rfc7540.html（已过时）
https://www.rfc-editor.org/rfc/rfc9113.html（2022）
协议抓包：https://blog.youkuaiyun.com/gaoliang1719/article/details/106030832
HPack：https://blog.youkuaiyun.com/weixin_38616298/article/details/108421371
HTTP3/队首阻塞：https://blog.youkuaiyun.com/ccw_922/article/details/124501101
HTTP2:https://blog.youkuaiyun.com/qq_40276626/article/details/120412462