两页注册漏斗预加载大JSON缓存的优雅方案及rel=preload兼容性疑问

我完全懂你的痛点——400KB的JSON虽说不算超大，但用户切换到第二页时哪怕一点点延迟，都可能影响注册转化。既然link rel=preload的兼容性达不到预期，咱们可以试试这几个更稳妥的方案：

方案一：用fetch API静默预加载（首选） #

这是目前最灵活、兼容性也够好的方式，几乎所有现代浏览器都支持（IE除外，但现在IE基本已经退出主流场景了）。在第一页的脚本里发起一个fetch请求，浏览器会自动把响应存入HTTP缓存，等第二页请求同一个URL时直接复用缓存内容。

代码示例（第一页执行）：

// 可以放在页面DOM加载完成后，或者用户在第一页停留1-2秒后再执行，避免浪费带宽
document.addEventListener('DOMContentLoaded', () => {
  fetch('/path/to/your/large.json', {
    method: 'GET',
    headers: { 'Accept': 'application/json' },
    cache: 'force-cache' // 明确指定缓存策略，不过GET请求默认就会缓存
  })
  .then(res => res.json()) // 可选：如果想提前解析好存在内存，也可以存到全局变量
  .catch(err => console.error('预加载JSON失败:', err));
});

• 优点：兼容性覆盖绝大多数用户，能灵活控制请求时机（比如等用户开始填写第一页内容再加载），还可以选择把解析后的JSON存在内存或本地存储，进一步加快第二页读取速度。
• 缺点：如果用户没完成第一页就离开，会浪费一点带宽，但400KB的量级其实影响很小。

方案二：动态创建script标签（兼容极老浏览器） #

如果需要支持一些非常老旧的浏览器（比如IE10及以下），可以把JSON包装成JS赋值语句，通过动态创建script标签来加载，这样浏览器会自动缓存这个JS文件，第二页直接读取全局变量即可。

步骤：

1. 把你的JSON文件改成JS文件，内容为window.autoCompleteData = { /* 原JSON内容 */ }
2. 第一页脚本加载这个JS：

const script = document.createElement('script');
script.src = '/path/to/auto-complete-data.js';
script.async = true;
document.body.appendChild(script);

3. 第二页直接访问window.autoCompleteData就能拿到数据。

• 优点：兼容性拉满，几乎所有浏览器都支持script标签加载。
• 缺点：需要修改JSON格式为JS赋值语句，维护起来稍麻烦；如果JSON里有特殊字符（比如换行、未转义的引号），需要提前处理避免语法错误。

方案三：结合sessionStorage持久化缓存 #

如果希望即使用户刷新第一页，缓存依然有效，可以在fetch之后把解析后的JSON存入sessionStorage：

第一页代码：

fetch('/path/to/your/large.json')
.then(res => res.json())
.then(data => {
  sessionStorage.setItem('preloadedAutoComplete', JSON.stringify(data));
})
.catch(err => console.error('预加载失败:', err));

第二页读取：

const autoCompleteData = JSON.parse(sessionStorage.getItem('preloadedAutoComplete')) || {};

• 优点：缓存在会话期间持久有效，第二页无需再发HTTP请求，直接从本地读取，速度最快。
• 缺点：有存储容量限制（一般5MB左右，400KB完全没问题）；如果JSON内容会更新，需要处理缓存失效（比如给文件加版本号，或者定期校验）。

总结 #

优先推荐fetch API方案，兼顾兼容性和灵活性；如果必须支持极老浏览器，选动态script标签；如果需要跨页面/刷新后仍保留缓存，就结合sessionStorage使用。

内容的提问来源于stack exchange，提问作者Tom