首页 > 其他分享 >记录--记录用前端代替后端生成zip的过程,速度快了 57 倍!!!

记录--记录用前端代替后端生成zip的过程,速度快了 57 倍!!!

时间:2023-10-26 18:33:39浏览次数:27  
标签:const zip 记录 -- await link template wallpapers

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

业务场景:

产品有个功能是设置主题。类似手机自动切换壁纸,以及其他功能颜色,icon,字体等。

管理员需要在后端管理系统多次下载不同主题,(至于要干啥就不说了...),主题中可能有 30 ~ 100个高清壁纸, icon 等。现在每次下载主题(31张高清图片)至少需要 10s。有什么方法能够优化下。

因为代码不具备可复用性,因此部分代码直接省略,思路为主

原始逻辑

  public async getZip(themeId: string, res: any) {
    const theme = await this.model.findById(themeId); // 从数据库

    // 这里需要借用一个服务器上的主题模板文件夹 template/,
    
    /*
       theme = {
              wallpapers: [
                  { url: 'https://亚马逊云.com/1.jpg', ... },
                  ...
              ]
       }
    */
    
    // for 循环遍历 theme.wallpapers , 并通过 fetch 请求 url,将其写进 template/static/wallpapers 文件夹中
    theme.wallpapers.map((item) => {
        const response = await fetch(item.url);
        const buffer = new Uint8Array(await response.arrayBuffer());
        await fs.writeFile(`template/wallpapers/${fileName}`, buffer);
    })
    
    // ... 还有其他一些处理
    
    // 将 template 压缩成 zip 文件,发送给前端
  }

思考 ing ...

1 利用图片可以被浏览器缓存

当一次下载主题从请求亚马逊云的图片数据,这步没有问题。 但是当重复下载的时候,之前下载过的图片又会再次下载,操作人员每次都需要等个十几秒,这就不太友好了。这部分时间花费还是挺多的。

可以利用下浏览器能够将图片缓存到 disk cache 中的特点,将这部分的代码逻辑放到前端完成,因为还需要对压缩包中的文件做一些处理,因此需要借助下 jszip 这个库。

看下改后的代码

onDownload () {
    // 请求拿到 theme 数据
    const theme = api.getTheme() 
    const template = api.getTemplate() // Blob
    
    const zip = new JSZip()
    await zip.loadAsync(getTmplResp) // 读取 template.zip 文件数据
    
    console.time('handle images')
    const wallpaperList = theme.wallpapers
    for (const wallpaper of wallpaperList) {
      const response = await fetch(wallpaper.url) // 请求图片数据
      const buffer = new Uint8Array(await response.arrayBuffer())
      const fileName = wallpaper.url.split('/').pop()
      zip.file(`static/wallpapers/${fileName}`, buffer, { binary: true }) // 写进压缩包
    }
    console.timeEnd('handle images') // 统计用时
    
    // 还需要读取 template.zip 中的 config.json, 然后修改,重新保存到 template.zip 中
    ...
    
    // 导出 template.zip
    zip.generateAsync({ type: 'base64' }).then(
      (base64) => {
        const link = document.createElement('a')
        link.href = 'data:application/zip;base64,' + base64
        link.download = 'template.zip'
        link.target = '_blank'
        link.style.display = 'none'

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
      (err) => {
        console.log('打包失败', err)
      }
    )
}

优化完成

当第一次下载时,handle images 步骤耗时 20 - 21 s,流程和后端差不多。

当第二次下载时,handle images 步骤耗时 0.35s - 0.45 s。会直接读取 disk cache 中的图片数据,50 ms 内就完成了。

速度快了 57 倍有余!!!, 你还能想到其他优化方式吗?继续往后看

标签:const,zip,记录,--,await,link,template,wallpapers
From: https://www.cnblogs.com/smileZAZ/p/17790085.html

相关文章

  • httprunner2.5.7+python3安装报错解决
    1.执行hrun-V报错:ImportError:cannotimportname'Iterable'from'collections'将fromcollectionsimportIterable修改成fromcollections.abcimportIterable 2.执行hrun-V报错:ImportError:cannotimportname'soft_unicode'from'......
  • 应用案例|基于三维机器视觉的机器人引导电动汽车充电头自动插拔应用方案
    Part.1 项目背景人类对减少温室气体排放、提高能源效率以及减少对化石燃料的依赖,加速了电动汽车的普及,然而,电动汽车的充电依然面临一些挑战。传统的电动汽车充电通常需要人工干预,插入和拔出充电头,这不仅可能导致操作错误,还会引起不必要的延误。为了解决以上痛点,自动化充电技术应运......
  • 汉语言文学受网络语言的影响探究——论文文档
    1.1网络语言的概念与特点1.1.1 网络语言的概念网络语言出现于信息技术时代,并伴着互联网技术的进步与使用不断发生变化,是一种网民间流行的特殊语言形式。通常而言,网络语言基本由数字符号、英文、汉语等组成,在实际应用和发展过程中和传统语言形式有着巨大不同。现阶段我国信息技......
  • 无涯教程-Clojure - keys函数
    返回Map中的键列表。keys-语法以下是语法。(keyshmap)参数   -  "hmap"是哈希键和值的映射。返回值 - 返回Map中的键列表。keys-示例(nsclojure.examples.example(:gen-class))(defnexample[](defdemokeys(hash-map"z""1""b""2"......
  • 海尔集团营运能力分析及建议-LW
    AbstractThispaperfirstintroducesthebackgroundandsignificanceofenterpriseoperationanalysis,andsummarizestheresearchstatusathomeandabroad.Secondly,itbrieflyintroducesthekeyindicatorsandtheircharacteristicsintheanalysisofe......
  • 可观察性支柱:探索日志、指标和跟踪
    通过检查系统输出来测量系统内部状态的能力称为可观察性。当可以仅使用输出信息(即传感器数据)来估计当前状态时,系统就变得“可观察”。您可以使用来自Observability的数据来识别和解决问题、优化性能并提高安全性。在接下来的几节中,我们将仔细研究可观察性的三大支柱:指标、日志和......
  • Android使用Profiler查看应用内存分析
    内存分析是Profiler中的一个组件,可以帮助我们识别可能会导致应用卡顿、冻结甚至崩溃的内存泄露和内存抖动。可以显示应用内存使用情况实时图表,帮助我们捕获堆转储、强制执行垃圾回收以及跟踪内存的分配情况。打开内存分析步骤:1、依次点击View→ToolWindow→Profiler2、从Profile......
  • 博睿数据亮相GOPS全球运维大会上海站!
    10月26日,博睿数据携核心产品新一代一体化智能可观测平台BonreeONE亮相第二十一届GOPS全球运维大会上海站,展示博睿数据在智能运维领域的科技实力与创新成果。同时,博睿数据AIOps首席专家兼产品总监贺安辉在AIOps最佳实践及解决方案专场作《开源工具和商业产品完美融合:真正建立一......
  • Jupter无法重命名也无法运行
    网上说是降低pyzmq版本,或升级notebook版本,可以解决问题,我都试过了,全部不行。查看pyzmq版本和notebook版本,最新版本的notebook和pyzmq,好像无法兼容。pipshowpyzmqpipshownotebook试错记录先卸载pyzmq,再安装低版本的pyzmq,无法安装成功pipuninstallpyzmqpipinstallpy......
  • C语言语法(复习专用)
    普通分隔符:分号「 ; 」:语句结尾大括号「 {} 」:函数体,复合语句以及数组的初始化等;圆括号「 () 」:函数定义时用来括住参数,或者用来修改运算顺序,比如:(a+1) 2和a+(1 2)方括号「 [] 」定义数组类型和应用元素,比如:inta10;b=a3;点号「 . 」:结构体仲引用成......