预加载大型 JSON 文件

Question

我有一个双页注册渠道，其中第二页需要一个相当大的 JSON 文件 (400Kb) 用于自动完成字段。直接为页面加载文件会导致用户体验出现小但可能会中断的延迟，因此我正在考虑在第一页上预加载 JSON，并将其缓存并准备好用于第二页.

仅出于缓存目的预加载 JSON 文件的 preferred/elegant 方法是什么？根据 can-i-use link rel=preload 还没有很好的浏览器支持。

Answer 1

我能想出的最简单的解决方案是在第一页加载它，如果在 DOM 加载后完成，该页面不会出现中断。

有了这个，它将被缓存，并且在调用第二页时应该不会延迟加载

<head>
    <script>
        (function(d) {
            d.addEventListener('DOMContentLoaded', function() {
                var s = d.createElement('script');
                s.setAttribute('type', 'text/javascript');
                s.setAttribute('src', json.js);
                s.setAttribute('defer', true);
                d.head.appendChild(s);
            })
        })(document);
    </script>
</head>

预加载大型 JSON 文件

Preload large JSON file

javascript

json

caching

preload