欧美日韩国产一区二区|qovd片|小明个人发布看看|小浪货你夹真紧水又多|老头把我添高潮了A片故|99热久久精品国产一区二区|久久久春色AV

  1. 首頁 > 科技 > >

瀏覽器|瀏覽器多線程離屏渲染壓縮打包方案

瀏覽器wb戰(zhàn)隊(duì)

瀏覽器|瀏覽器多線程離屏渲染壓縮打包方案


最近朋友跟我交流了一個(gè)場景 ， 他有需求要用瀏覽器實(shí)時(shí)生成上萬個(gè)二維碼并打包壓縮 。 現(xiàn)在功能是實(shí)現(xiàn)了 ， 就是耗時(shí)長 ， 而且一旦開始生成之后 ， 頁面卡頓的很厲害 。
我一聽?wèi)?yīng)該是 大量的 渲染 轉(zhuǎn)化壓縮 這類的計(jì)算阻塞了 Js執(zhí)行主線程 導(dǎo)致的 ， 于是開始嘗試對方案進(jìn)行優(yōu)化 。
首先先復(fù)現(xiàn)Js主線程方案
這個(gè)方案心智負(fù)擔(dān)最低 ， 無非是 Canvas 渲染轉(zhuǎn)化為 blob/(or others) jszip 添加 blob 并進(jìn)行壓縮 最后下載保存 ， 執(zhí)行的代碼摘要如下：
import JSZip from 'jszip'async function download(){    // canvas do sth        const zip = new JSZip()    await new Promise((resolve)=>{        canvas.toBlob((blob) => {            zip.file(filename blob!)            resolve(blob)        )    )    const content = await zip.generateAsync(        {          type: 'blob'            )    saveAs(content zipName)
實(shí)現(xiàn)是非常簡單的 。 筆者也復(fù)現(xiàn)了生成 10000 個(gè)二維碼的 case ， 在 qrcode 的 errorLevel 為 low  不進(jìn)行額外壓縮的情況下 。
每次生成圖片大約 3-4kb(取決于攜帶參數(shù)的大小)生成時(shí)間約為 190257.10ms 壓縮時(shí)間為 13531ms 總耗時(shí) 203788.10ms 。
后來經(jīng)過反復(fù)測試 ， 得出下列幾個(gè)影響因素:

  • 壓縮等級越高 ， 壓縮越慢
  • 生成圖片體積越大 ， 生成速度越慢 ， 壓縮速度也越慢
另外像這類的高耗時(shí)的工作任務(wù) ， 一定要添加 onProgress 這樣一個(gè) hook ， 方便用戶自定義進(jìn)度條來優(yōu)化體驗(yàn) ， 同時(shí)也要防止用戶誤操作造成功虧一簣 。
Worker多線程壓縮
既然現(xiàn)在主線程被阻塞了 ， 我們自然而然就想到了 Web Worker 于是筆者使用它來進(jìn)行壓縮圖片的工作 。
在挑選測試素材時(shí) ， 使用了一張 16MB 的圖片 ， 嘗試下來 ， 壓縮時(shí)間顯著高于圖片的生成時(shí)間 。 (體積較小圖片其實(shí)是沒有必要的 ， 主線程本身壓縮速度足夠快)
worker 代碼摘要如下:
// main.worker.tsimport JSZip from 'jszip'const worker: Worker = self as anyasync function doZip (arraybuffer: ArrayBuffer) {  const zip = new JSZip()  const filename = 'test.png'  const blob = new Blob([arraybuffer
)  zip.file(filename blob)  const content = await zip.generateAsync(    {      type: 'arraybuffer'        ({ percent ) => {      // 壓縮進(jìn)度條      const event: MainWorkerEventData = {        type: 'percent'        percent            worker.postMessage(event)      )  const finish: MainWorkerEventData = {    type: 'save'    content: content    worker.postMessage(finish [content

相關(guān)經(jīng)驗(yàn)推薦