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

Posted 2023-03-28

【中文标题】使用 ftp:/// 加载大型 json 对象的有效方法

【英文标题】：Efficient way to load large json object with ftp:///

【发布时间】：2021-09-03 07:20:43

【问题描述】：

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

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

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

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

【问题讨论】：

为什么不拆分文件？

@evolutionxbox 因为需要所有数据。大约有 30,000 个特征和 10,000 个样本。我想让用户选择他们想要显示的功能。

【参考方案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);

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

【参考方案2】：

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

【讨论】：

感谢您的快速建议。我试过了，并没有真正帮助加载速度。我认为async 和defer 用于在解析DOM 的同时下载js 文件。我的js文件在本地，估计不用下载。如果我错了，请纠正我。

我注意到的一件事是页面加载延迟（或页面冻结，即使所有 html 元素都已显示）是因为将大型 js 文件读入内存。