Javascript提高下载速度答案

【问题标题】：Javascript improve downloading speedJavascript提高下载速度
【发布时间】：2018-04-13 09:44:31
【问题描述】：

我正在使用 React Native，我遇到的问题是下载缩略图。实际上，我正在下载 29889 个拇指，它太慢了。这是我的代码：

recursive_thumb(skip, count) {
  if (skip < this.state.totalMarkerCount) {
    let thumbs = []
    for (let i = 0; i < count; i += 1) {
      thumbs.push(this.downloadThumb(this.state.thumbs[skip + i]))
    }
    Promise.all(thumbs)
      .then(data => {
        this.setState({
          totalCount: this.state.totalMarkerCount,
          fetchedCount: skip + count
        })
        this.recursive_thumb(skip + count, count)
    })
     .catch(reason => {
       this.recursive_thumb(skip + count, count)
       this.setState({
         totalCount: this.state.totalMarkerCount,
         fetchedCount: skip + count
       })
     })
} else {
  setThumbDownloaded()
  this.checkTownDownloaded()
}


downloadThumb(element) {
  console.log(element)
  return new Promise((resolve, reject) => {
    RNFetchBlob.config({
    // add this option that makes response data to be stored as a file,
    // this is much more performant.
    fileCache: true,
    path: `${DocumentDirectoryPath}/thumbs/${element}`
  })
    .fetch(
      'GET',
      `https://www.searchforsites.co.uk/app/images/default/${element}`,
      {
        // some headers ..
      }
    )
    .then(res => {
      resolve(true)
    })
    .catch(err => {
      // console.log('Error: ', err);
      // this.setState({ modalOpen: false, regionUpdated: true });
      // this.findUser();
      reject(true)
    })
})
}

如果我们可以使用线程，那将是一个很好的体验。下载整个数据需要 15 分钟。

有没有什么天才解决方案？

感谢您的关注。

【问题讨论】：

延迟加载图片怎么样？根据应用程序的前端需求，您可以将图像设置为批量加载或完全在后台加载。

标签： javascript react-native fetch react-native-ios

【解决方案1】：

如果您的应用程序的前端不需要同时使用所有图像，请尝试重新设计您的应用程序以延迟加载图像以获得更好的性能。

延迟加载肯定有助于提高性能/加载时间。

另外值得考虑的是，您可能需要重新设计应用程序和模板结构以限制每页显示的图像数量。也许页面可以具有无限滚动行为，通过 Ajax 批量加载附加图像，而不是全部加载。

【讨论】：

感谢您的建议。我必须一次下载所有图像。

【解决方案2】：

解决方案 1：考虑一次需要 30.000 张图像的原因和是否。这听起来像是一个糟糕的设计选择。

解决方案 2：将它们放在一个 zip 文件中，然后解压缩该文件：Any way to unzip file on react-native

解决方案 2 的问题是我不确定它是否会起作用，因为您添加了很多 RN 解析器不知道的图像。

【讨论】：