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

问题描述

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

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

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

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

解决方法

我找到了解决方法。 首先，用一个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);

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

,

使用 <script> 标签时，使用 async 和 defer 属性以及 onload 在文件加载时开始绘图。