通过HTTP Link标头实现页面资源预加载(preload)

原创 已于 2022-07-29 09:54:32 修改 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#http #preload #early hints #resource hints

于 2022-07-24 19:35:48 首次发布
本文介绍了HTTP预加载技术，特别是利用HTTP Link响应标头和preloadmanifest文件来优化资源加载。通过定义预加载清单，服务端middleware/filter根据条件决定预加载哪些资源。支持HTTP状态码103(EarlyHints)的Chrome103使得预加载更有效。预加载能减少页面加载时间，尤其在网络延迟高的情况下。然而，是否采用预加载需依据实际测试结果，因为可能增加TTFB。

本文介绍一种采用HTTP Link响应标头的资源预加载方式http-preload，通过预先定义preload manifest文件来描述哪个页面需要预加载哪些资源，并使用Node.js, Tomcat, Nginx等多种服务端的middleware/filter读取preload manifest按照其中的描述规则来实现页面资源预加载。

背景

Chrome 103新增了对HTTP状态码 103 (Early Hints)的支持。在此之前的四五年，HTTP状态码 103只是个传说，因为没有浏览器支持它。现在虽有浏览器支持它，但服务端支持HTTP status 103的框架/库却寥寥无几。

操作

第一步：定义Preload Manifest

{
  "$schema": "https://raw.githubusercontent.com/http-preload/manifest/master/preload-v1.schema.json",
  "manifestVersion": 1,
  "conditions": {
    "supportsModulepreload": "(userAgentData, headers) => userAgentData.brands.some((e)=>e.brand==='Chromium'&&parseInt(e.version)>=66)"
  },
  "resources": {
    "/index.html": [
      {"rel": "preload", "href": "/assets/index.css", "as": "style"},
      {"rel": "dns-prefetch", "href": "https://example.com/"}
    ],
    "/index.html supportsModulepreload": [
      {"rel": "modulepreload", "href": "/src/foobar.js"},
      {"rel": "modulepreload", "href": "/lib/foo.js"},
      {"rel": "modulepreload", "href": "/lib/bar.js"},
      {"rel": "modulepreload", "href": "/src/qux.js"}
    ]
  }
}

其中：

  • "$schema"指的是JSON Schema URL，也可以用相对路径指向离线版的preload-v1.schema.json，用以在IDE（如Visual Studio Code）中提供内容辅助、格式校验。
  • "manifestVersion"的值应与所用json schema对版本的要求相匹配
  • "conditions"中每个key是JavaScript标识符(仅ASCII子集)，每个value应为函数表达式或箭头函数。
    • 其中参数userAgentData会是类似于Client Hints User Agent API navigator.userAgentData一样的对象，但不限于安全上下文（https协议）
    • 参数headers会是一个包含所有请求头的对象（在Node.js HTTP/2实现中还包含伪请求头:method, :path, :scheme等）
  • “resources"中每个key是页面文件的URI，可选地加一个空格” "和一个已在"conditions"中定义的条件标识符。

该描述文件的作用为：
当服务端收到URI(不含querystring)为"/index.html"的HTTP请求时（或从"/“转发而来），”/index.html"对应的资源列表将被无条件地列为预加载Link请求头，而"/index.html supportsModulepreload"对应地资源列表是否应该发送到客户端取决于函数调用supportsModulepreload(userAgentData, headers)的返回值是否等效于true

详细说明请参见 manifest

第二步：安装使用Preload Filter / Middleware

preload-middleware支持在Node.js serve-index, express, koa, local-web-server使用http-preload

preload-servlet4-filter preload-servlet-filter分别支持在Java 1.8 + Tomcat 9, Java 11 + Tomcat 10中使用http-preload

还有preload-njs-filter，支持在Nginx+njs环境中使用的部分http-preload特性（需要手动重新改njs源码并编译njs；尚不支持HTTP status 103 Early Hints）

P.S. Nginx生态虽有模块ngx_http_early_hints声称支持103 Early Hints，但它在HTTP/2.0协议中不可用，更要命的是它很久没得到更新，不兼容较新的Nginx 1.22.0。

最好让http-preload与HTTP/2.0配套使用，因为预加载会使得但并发请求增多，使用HTTP/1.1协议容易导致并发连接过多时HTTP请求出现排队现象，从而有违预加载的初衷。

第三步：测试预加载的效果

检出并运行上述preload filter/middleware git仓库并运行示例程序，打开浏览器DevTools，并访问本地https://127.0.0.1/ 你将发现之前ES模块加载的依赖链变平了，页面用的到资源都会预先加载。

通过HTTP Link: 标头的方式来实现预加载理论上比通过HTML <link>标签的方式来得更及时，但也会略微增加每个请求的TTFB(Time to First Byte)，因为服务端要多增加一层过滤器，多执行至少2个if判断。因此不能保证采用http-preload会比采用<link>标签效果更好，开发者是否采用，应以实际测验结果为依据。一般来说，在网络延迟较高的环境下采用http-preload，页面整体的加载速度优势会明显一些。

你不知道的＜link＞
liuhao9999的博客
11-18 805
HTML外部资源链接元素(<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。 要链接一个外部的样式表，你需要像这样在你的<head>中包含一个<link>元素： <link href="main.css" rel="stylesheet"> 在这个简单的例子中，使用了href属性设置外部资源的路径，并设置rel...
使用preload或者prefetch预加载页面资源
haha_556的博客
12-31 622
preload与prefetch的区别 preload浏览器页面必定需要的资源，浏览器一定会加载这些资源 适应场景：首页一些肯定会加载的资源 prefetch浏览器页面可能需要的资源，浏览器不一定会加载这些资源。 适应场景：例如滚动之后会加载的资源，滚动是可能触发，并不是一定触发 如何使用：用法几乎一致，以preload为例 使用link标签创建 <link rel="preload" href="./common.css" as="style"> 动态创建一个link标签后插入到head
用 preload 预加载页面资源
frontend_frank的博客
01-31 658
作者：felixhttps://github.com/ProtoTeam/blog/blob/master/201802/1.md本文主要介绍preload的使用，以及与prefetch...
深入解析：preload与prefetch的区别及最佳实践
最新发布
m0_46335150的博客
09-13 978
摘要：preload和prefetch是提升前端性能的关键预加载技术，但适用场景不同。preload高优先级加载当前页关键资源（如CSS、字体），避免阻塞渲染；prefetch低优先级预加载未来页面可能用到的资源（如下页JS）。核心差异：加载时机（立即vs空闲）、优先级、缓存策略及使用约束。最佳实践：preload用于首屏核心资源，prefetch预测用户行为加载非关键资源。需避免错误用法，并通过开发者工具检测效果，合理使用可显著优化页面性能。
<link>标签实现预加载功能详解
weixin_33717117的博客
06-15 2579
前言最近在研究 vue-cli 3.0生成的工程，在构建后生成的 index.html里面发现了下面这种用法：&lt;link as=style href=/css/app.f60416c7.css rel=preload&gt;复制代码&lt;link as=script href=/js/app.69189fdd.js rel=preload&gt;复制代码这就触到了本人的知识盲区了，本着扫盲...
图解HTTP笔记-4（HTTP首部）
anchouman0644的博客
12-25 188
HTTP首部 HTTP的首部字段根据实际使用用途分为四种： 通用首部字段：请求和响应报文都会使用的首部 请求首部字段：请求报文的首部 响应首部字段：响应报文的首部 实体首部字段：实体部分的首部 通用首部字段: 首部字段名 说明 Cache-Control 控制缓存的行为 Connection 逐跳首部，连接的管理 ...
Angular 由一个bug说起之六：字体预加载
KenkoTech的博客
06-04 877
浏览器在加载一个页面时，会解析网页中的html和css，并开始加载字体文件。字体文件可以通过css中的@font-face规则指定，并使用url()函数指定字体文件的路径。 比如下面这样: css @font-face { font-family: 'MyFont'; src: url('path/to/font.woff2') format('woff2'), url('path/to/font.woff') format('woff'); } body {
chrome 预配标头
08-24
预配标头通过在 HTTP 响应中的 Link 标签中提供资源的 URL，并设置 rel="preload" 属性来实现。这样，浏览器在解析 HTML 文档时，就能够识别到这些预配资源，并将它们提前下载和缓存，以提升后续请求的响应时间。 ...
vscode如何定义创建html网页含有基本的标头信息配置
03-26
2. **CSS/JS 预加载**： ```html <link rel="preload" href="style.css" as="style"> <link rel="preload" href="app.js" as="script"> ``` 3. **PWA 支持** (渐进式网页应用)： ```html <link rel="manifest...
prpl-server：Node.js的高效HTTP服务器解决方案
1. 链接预加载头（Link Preload Headers）: 服务器通过发送预加载指令的HTTP头部信息，指示浏览器预先加载某些资源，以减少页面渲染时的等待时间。 2. 本地测试推送（Local Test Push）: 开发者可以在本地环境中...
跨域访问-需要设置HTTP响应标头设置
05-05
解决跨域访问-需要设置HTTP响应标头设置
HTTP常用头部信息
Jack huang的专栏
07-20 881
下面用例子的形式来记录下常用的一些Http头部信息 Request Header: GET /sample.Jsp HTTP/1.1//请求行 Host:www.uuid.online///请求的目标域名和端口号 Origin:http://localhost:8081///请求的来源域名和端口号 （跨域请求时，浏览器会自动带上这个头信息） Referer:https:/localhost:8081/link?query=xxxxx//请求资源的完整URI ...
html预加载之link标签
anshaobiao6449的博客
05-11 992
我们之前提及过link rel 里面有preload和prefetch、modulepreload，都是用于预加载资源 <link rel="preload" href="..." as="..."> <link rel="modulepreload" href="..."> <link rel="prefetch" href="..."> ...
HTTP/2与资源加载优化：预连接、预取和预加载
weixin_42599558的博客
04-22 306
本章深入探讨了在HTTP/2环境下，如何通过预连接、预取和预加载等技术优化资源加载。讨论了这些技术与浏览器支持的关系，以及它们在Web性能优化中的作用。同时，本章还涉及了HTTPS迁移的趋势、以及优化HTTPS配置的重要性。最后，提出了即使在HTTP/2时代，也应同时优化HTTP/1.1和HTTP/2的使用。
图片触发HTTP请求总结，网页图片预加载
qq_43077362的博客
04-23 1638
图片的http请求，有很多种情况，那么究竟什么情况下面不会发生请求呢？下面我用案例一一列举一下，（请求图片截图，均已谷歌浏览器为例！） 1. 隐藏图片 <img src="haorooms.jpg" style="display: none" /> http请求如下：结论：只有Opera不产生请求。注意：用visibility: hidden隐藏图片时，在Opera下也会产...
HTTP消息头（HTTP headers）－常用的HTTP请求头与响应头
Queen_xzx的专栏
07-25 494
Request Header: 1.GET /sample.Jsp HTTP/1.1 //请求行 2.Host: www.uuid.online/ //请求的目标域名和端口号 3.Origin: http://localhost:8081/ //请求的来源域名和端口号 （跨域请求时，浏览器会自动带上这个头信息） 4.Referer: https:/localhost:8081/link?qu...
https请求方法小总结
weixin_45855580的博客
08-26 376
请求方法 我们大多数用的请求方法是GET和POST，下表是总结的HTTP1.1一些其他的。 方法 大概叙述 HEAD 类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头 PUT 从客户端向服务器传送数据来代替指定文档内容 DELETE 请求服务器删除指定页面 CONNECT 把服务器当做跳板，让服务器代替客户端访问其他网页 OPTIONS 允许客户端查看服务器性能 TRACE 回显服务器收到的请求，用于测试或诊断 ...
prefetch 和preload_preload和prefetch
weixin_29214715的博客
12-24 1784
1、 preload和prefetch的出现为我们提供了可以更加细粒度地控制浏览器加载资源的方法2、preload：link标签的preload是一种声明式的资源获取请求方式，用于提前加载一些需要的依赖，并且不会影响页面的onload事件；使用方式如下： // css加载后立即生效其中，rel属性值为preload；as属性用于规定资源的类型，并根据资源类型设置Accep请求头，以便能够使用正常...
前端通过service-worker实现静态资源预加载
06-24
<think>我们正在讨论使用ServiceWorker实现前端静态资源的预加载。根据引用[1]，ServiceWorker可以用于离线缓存、背景同步和预加载资源。用户特别询问了预加载的最佳实践和示例代码。首先，预加载的主要目的是提前获取并缓存用户可能很快需要的资源，从而加速后续页面加载或操作。在ServiceWorker中，我们通常在安装阶段(precache)和激活阶段处理资源预加载，也可以在空闲时主动发起请求。最佳实践包括：1.在ServiceWorker安装阶段预缓存关键静态资源（核心资源）2.在用户交互后预测下一步可能需要的资源，并在后台预加载（预测性预加载）3.结合CacheAPI进行存储下面是一个逐步的示例：###步骤1：注册ServiceWorker首先，在页面中注册ServiceWorker。```javascript//主线程代码（例如main.js）if('serviceWorker'innavigator){navigator.serviceWorker.register('/sw.js').then(registration=>{console.log('ServiceWorker注册成功:',registration);}).catch(error=>{console.log('ServiceWorker注册失败:',error);});}```###步骤2：编写ServiceWorker脚本（sw.js）在ServiceWorker脚本中，我们将在`install`事件中预缓存关键资源，并在`activate`事件中清理旧缓存。此外，我们还可以监听`fetch`事件来拦截请求，但预加载主要发生在安装阶段和空闲时。####示例：安装阶段预缓存核心资源```javascript//sw.jsconstCACHE_NAME='my-site-cache-v1';constPRECACHE_URLS=['/',//首页HTML'/styles/main.css','/scripts/main.js','/images/logo.png'//添加其他关键静态资源];self.addEventListener('install',event=>{//执行安装步骤：打开缓存并添加资源event.waitUntil(caches.open(CACHE_NAME).then(cache=>{console.log('缓存已打开，开始添加资源');returncache.addAll(PRECACHE_URLS);}));});```####示例：激活阶段清理旧缓存```javascriptself.addEventListener('activate',event=>{constcacheWhitelist=[CACHE_NAME];event.waitUntil(caches.keys().then(cacheNames=>{returnPromise.all(cacheNames.map(cacheName=>{if(cacheWhitelist.indexOf(cacheName)===-1){returncaches.delete(cacheName);}}));}));});```###步骤3：预测性预加载除了在安装阶段预缓存，我们还可以在用户与页面交互后，预测用户下一步可能访问的资源并进行预加载。例如，当用户将鼠标悬停在某个链接上时，预加载该链接页面的资源。在主线程中（页面脚本）：```javascript//假设我们有一个链接，当用户鼠标悬停时预加载目标页面的资源constlink=document.querySelector('a.prefetch-link');link.addEventListener('mouseover',()=>{//通过ServiceWorker发送消息，触发预加载if(navigator.serviceWorker&&navigator.serviceWorker.controller){navigator.serviceWorker.controller.postMessage({type:'prefetch',urls:['/next-page.html','/styles/next-page.css','/scripts/next-page.js']});}});```在ServiceWorker中监听消息事件：```javascriptself.addEventListener('message',event=>{if(event.data.type==='prefetch'){event.waitUntil(caches.open(CACHE_NAME).then(cache=>{returnPromise.all(event.data.urls.map(url=>fetch(url).then(response=>{if(response.ok){returncache.put(url,response);}})));}));}});```###步骤4：在ServiceWorker中处理资源请求最后，我们需要在ServiceWorker中拦截网络请求，并返回缓存中的资源（如果存在）。```javascriptself.addEventListener('fetch',event=>{event.respondWith(caches.match(event.request).then(response=>{//如果缓存中有，则返回缓存资源if(response){returnresponse;}//否则，发起网络请求returnfetch(event.request);}));});```###注意事项1.**缓存更新**：当资源更新时，需要更新缓存版本（修改CACHE_NAME）并重新预缓存。2.**存储空间**：预加载资源时要注意不要超过浏览器的存储配额。3.**预测准确性**：预测性预加载应谨慎使用，避免浪费带宽。以上便是使用ServiceWorker实现前端静态资源预加载的最佳实践和示例代码。通过预缓存关键资源，并在用户交互后预测性地加载后续资源，可以显著提升用户体验。§§相关问题§§1.如何更新ServiceWorker缓存的资源？2.ServiceWorker预加载与HTTP/2服务器推送有何区别？3.如何监控ServiceWorker的缓存命中率？</think>### Service Worker 静态资源预加载实践指南 #### 一、核心实现原理 Service Worker 通过拦截网络请求实现资源预加载，主要利用两个关键机制： 1. **安装阶段预缓存**：在 `install` 事件中提前缓存关键资源 2. **运行时动态预取**：在 `fetch` 事件中预测并缓存后续可能需要的资源 ```mermaid graph TD A[注册Service Worker] --> B[Install 事件] B --> C[预缓存核心资源] A --> D[Fetch 事件] D --> E{资源是否在缓存} E -->|是| F[返回缓存] E -->|否| G[网络请求并缓存] G --> H[预测加载关联资源] ``` #### 二、最佳实践方案 **1. 安装阶段预缓存（核心资源）** ```javascript // sw.js const CACHE_NAME = 'v1'; const PRE_CACHE_URLS = [ '/styles/main.css', '/scripts/app.js', '/images/logo.svg', '/offline.html' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(PRE_CACHE_URLS)) .then(() => self.skipWaiting()) ); }); ``` **2. 运行时动态预加载（预测性加载）** ```javascript self.addEventListener('fetch', event => { // 核心资源响应逻辑 event.respondWith( caches.match(event.request) .then(cached => cached || fetch(event.request)) ); // 预加载关联资源 if (event.request.url.endsWith('.html')) { event.waitUntil( caches.open(CACHE_NAME).then(cache => { return fetch('/related-resources.json') .then(res => res.json()) .then(resources => cache.addAll(resources)); }) ); } }); ``` **3. 预加载策略优化** - **关键路径资源**：优先预加载首屏渲染必需的资源（CSS, JS） - **按需预加载**：在用户交互后预测下一步资源（如 hover 时预加载） - **空闲时加载**：使用 `requestIdleCallback` 加载低优先级资源 ```javascript // 主线程触发预加载 document.getElementById('gallery').addEventListener('mouseover', () => { if (navigator.serviceWorker.controller) { navigator.serviceWorker.controller.postMessage({ type: 'prefetch', urls: ['/images/high-res-1.jpg', '/images/high-res-2.jpg'] }); } }); ``` #### 三、完整实现示例 ```javascript // sw.js const CACHE_NAME = 'precache-v2'; const PRECACHE_MAP = { '/': ['/styles/main.css', '/scripts/app.js'], '/product': ['/scripts/product.js', '/templates/product.hbs'] }; self.addEventListener('install', (event) => { const precacheUrls = Object.values(PRECACHE_MAP).flat(); event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll([...new Set(precacheUrls)])) .then(self.skipWaiting) ); }); self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then(cached => cached || fetch(event.request)) ); // 页面路由预加载 if (event.request.mode === 'navigate') { const path = new URL(event.request.url).pathname; if (PRECACHE_MAP[path]) { event.waitUntil( caches.open(CACHE_NAME).then(cache => cache.addAll(PRECACHE_MAP[path]) ) ); } } }); self.addEventListener('message', (event) => { if (event.data.type === 'prefetch') { caches.open(CACHE_NAME).then(cache => cache.addAll(event.data.urls) ); } }); ``` #### 四、性能优化技巧 1. **缓存策略**：使用 `max-age=31536000` 配合 `immutable` 标头 ```nginx location /static { add_header Cache-Control "public, max-age=31536000, immutable"; } ``` 2. **存储管理**：定期清理旧缓存 ```javascript self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => Promise.all( keys.filter(key => key !== CACHE_NAME) .map(key => caches.delete(key)) )) ); }); ``` 3. **网络降级**：优先返回缓存，网络不可用时提供备用内容 ```javascript event.respondWith( caches.match(event.request) .then(cached => cached || fetch(event.request)) .catch(() => caches.match('/offline.html')) ); ``` #### 五、监控与调试 1. **Chrome DevTools**： - Application > Service Workers 查看运行状态 - Cache Storage 检查缓存内容 2. **性能指标**： - `caches.has()` 检测缓存命中率 - `performance.mark()` 测量资源加载时间 > **重要提示**：预加载应遵循"渐进增强"原则，避免过度请求导致带宽浪费。建议通过用户行为分析确定高频访问路径，针对性预加载关键资源[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值