使用JSON.parse解析34MB需要45秒。能否进行优化?

huangapple go评论128阅读模式
英文:

Parsing 34Mb using JSON.parse take 45 seconds. Can it be improved?

问题

我们正在开发一个包含约4000个食谱的应用程序。为了节省空间,这些食谱在下载时仅保存在一个区域。用户可以在应用程序的设置中更改区域。当发生这种情况时,应用程序会下载新区域的食谱(约34MB)。一旦下载完成,用户可以在新区域中访问食谱,但每次访问食谱部分都需要45秒。

我们发现问题出在JSON.parse上。我们知道34MB的文件可能需要一些时间来解析,但是否有改进时间的方法?当访问与应用程序捆绑在一起的食谱(第一个区域)时,一切都很快速流畅,尽管文件大小大致相同。

以下是读取下载文件并解析它的代码:

const readDownloadedJson = async () => {
    await ReactNativeBlobUtil.fs
      .readFile(recipesPath, "utf8")
      .then((res) => {
        const parsedJson = JSON.parse(res);
        console.log(parsedJson.length);
      })
      .catch((err) => {
        console.log("status: ", err.status);
        console.log("data: ", err.data);
        console.log("message: ", err.message);
      });
  };

与此同时,这是调用捆绑食谱的方式:

import Data from "../../Data/Recipes.json";

如果有帮助的话,我们使用的是react-native 0.72.1和react-native-blob-util 0.18.6。

英文:

We're developing an app containing ~4000 recipes. For saving space, the recipes are only saved in one locale when downloading. A user may however change its locale in the app's setting. When this occurs, the app downloads the recipes in the new locale (around 34Mb). Once downloaded, the user may access the recipes in the new locale, but it takes 45 seconds each time they access the recipe section.

We found the culprit to be JSON.parse. We are aware that a 34Mb files may take some time parsing, but is there a way of improving the time? When accessing the recipes bundled with the app (the first locale) everything is fast and smooth, even tough the file is about the same size.

Here is the code that read the downloaded files and parse it:

const readDownloadedJson = async () => {
    await ReactNativeBlobUtil.fs
      .readFile(recipesPath, "utf8")
      .then((res) => {
        const parsedJson = JSON.parse(res);
        console.log(parsedJson.length);
      })
      .catch((err) => {
        console.log("status: ", err.status);
        console.log("data: ", err.data);
        console.log("message: ", err.message);
      });
  };

Meanwhile, this is how the bundled recipes are called:

import Data from "../../Data/Recipes.json";

If it helps, we are using react-native 0.72.1 and react-native-blob-util 0.18.6

答案1

得分: 0

根据Heretic Monkey的评论,我们将把大文件分割成较小的块,只在需要时加载。

英文:

As per the comment of Heretic Monkey, we will split the big file into smaller chunks that will be loaded only when needed.

huangapple
  • 本文由 发表于 2023年8月5日 03:14:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76838633.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定