加载大型json对象的有效方法ftp:///.

Question

我有一个大的json对象(最多200 MB或更多(。它存储通过plotly.js.渲染图形所需的值

我尝试使用text/javascript和application/json将json对象合并到html中，或者将json存储在外部javascript代码中，并使用script标记加载它。这两种方法都需要花费大量时间来加载HTML页面(大约20-30秒(。

由于我无法使用ftp:///协议读取本地文件，由于CORS策略出于安全原因，该协议被chrome阻止，因此我无法将数据存储在本地文件中，以后再读取。

有没有更有效的方法将大型json文件嵌入html文件中？也许我们以后可以用json对象来评估代码？

Answer 1

我找到了一个解决方法。首先，使用js文件定义global variable中的数据。其次，稍后通过单击按钮或其他事件加载js文件。

// data.js
window.data = [1, 2, 3]
// load the data with the script tag.
const scriptTag = document.createElement("script");
scriptTag.src = "./data.js";
scriptTag.onload = () => console.log("loaded")
document.head.appendChild(scriptTag);

所以现在，我可以将大数据拆分为单独的变量，稍后再加载。

Answer 2

使用<script>标记时，在加载文件时使用async和defer属性以及onload来启动图形。