Ongezea Utendaji kwa 60% kwa kutumia ImageBitmap katika Look Scanned

Kuboresha utendaji ni muhimu sana wakati wa kujenga programu za kisasa za wavuti kama Look Scanned, hasa wakati wa kushughulikia picha. Chombo chenye nguvu lakini kisichotumika sana kwa kufikia maboresho makubwa ya utendaji ni kiolesura cha ImageBitmap. Katika chapisho hili la blogu, tutachunguza ni nini ImageBitmap, kwa nini ni cha ufanisi, na jinsi kimeuganishwa katika Look Scanned kuboresha utendaji wa uonyeshaji.

ImageBitmap ni Nini?

ImageBitmap ni kiolesura cha HTML5 kinachowakilisha picha ya bitmap. Kinaruhusu ufumuzi wa picha na uchakataji wenye ufanisi nje ya uzi mkuu, kupunguza utegemezo wa uonyeshaji na kuboresha ujibu. Mara tu kimejengwa, kitu cha ImageBitmap kinaweza kutumiwa moja kwa moja katika mazingira ya uonyeshaji kama Canvas 2D au WebGL, kikifanya kuwa chombo chenye nguvu kwa programu zenye picha nyingi.

Kwa Nini Kutumia ImageBitmap katika Look Scanned?

Hapo awali, Look Scanned ilitegemea Blob kupitisha data za picha kati ya vitendakazi vya uchakataji. Hata hivyo, Blob si bora kwa kuboresha utendaji kwa kuwa inahitaji hatua za usimbaji na ufumuzi. Kinyume chake, ImageBitmap inatoa ufikiaji wa moja kwa moja wa data za picha, ikiondoa shughuli za ufumuzi zisizohitajika na kuboresha utendaji wa uonyeshaji kwa kiasi kikubwa.

Jinsi Tunavyotumia ImageBitmap katika Look Scanned

Look Scanned inasaidia vivinjari vya zamani, hivyo haiwezi kubadilika kabisa hadi ImageBitmap bila kudumisha msaada wa Blob. Msaada huu wa pande mbili unahakikisha upatanifu katika anuwai kubwa ya vivinjari. Kwa maelezo ya upatanifu wa kivinjari, angalia caniuse.com. Aidha, msaada mdogo wa canvas wa Safari unahitaji matumizi ya WebAssembly (WASM) kwa uchakataji wa picha, ambayo inahitaji Blob kama umbizo la kuingiza.

Kushughulikia hili, Look Scanned inatumia mbinu ya kuchanganya inayosaidia Blob na ImageBitmap huku ikihamia polepole kwa ya mwisho. Hapa chini ni maelezo muhimu ya utekelezaji:

Kupakia na Kufumua

async function loadImage(url): Promise<ImageBitmap | Blob> {
  const response = await fetch(url);
  const blob = await response.blob();
  if (window.createImageBitmap) {
    return createImageBitmap(blob);
  }
  // Kurudi kwa matumizi ya Blob
  return blob;
}

Muunganiko wa WebAssembly

Kwa uchakataji wa kina, Blob inapitishwa kwa WASM kuhakikisha utendakazi hata katika vivinjari visivyosaidika. Tunahitaji kuchora picha kwanza kwenye canvas kisha kutumia canvas.toBlob kupata Blob.

Uonyeshaji wa Kurudi Nyuma

async function renderImage(canvas, imageUrl) {
  const ctx = canvas.getContext("2d");
  const image = await loadImage(imageUrl);
  if (image instanceof ImageBitmap) {
    ctx.drawImage(image, 0, 0);
  } else {
    const img = new Image();
    img.src = URL.createObjectURL(image);
    img.onload = () => ctx.drawImage(img, 0, 0);
  }
}

Maboresho ya Utendaji

Kwa kuunganisha ImageBitmap, Look Scanned imefikia kupungua kwa kiasi kikubwa kwa wakati wa uchakataji wa picha—kutoka ms 50 hadi ms 20 kwa kila picha. Kuboresho hiki kunatafsiri kuwa uzoefu wa mtumiaji ulio laini zaidi na unaojbu zaidi, hasa kwa kazi zinazohusisha hati zilizosafishwa.

Matokeo Yasiyotarajiwa

Wakati wa utekelezaji, tuligundua kuwa kuunda nakala mpya ya ImageBitmap kwa kutumia createImageBitmap kabla ya kuihamisha kwa mfanyakazi hutoa utendaji bora zaidi kuliko kupitisha moja kwa moja kitu cha asili. Tabia hii inaweza kuwa kutokana na maboresho ya injini ya kivinjari kwa vitu vinavyoweza kuhamishwa.

Msaada wa Kivinjari

ImageBitmap inasaidiwa katika vivinjari vingi vya kisasa, ikiwa ni pamoja na matoleo ya hivi karibuni ya Chrome, Firefox, Edge, na Safari. Kwa maelezo ya upatanifu, angalia createImageBitmap katika caniuse.com.

Hitimisho

Kuunganisha ImageBitmap katika Look Scanned kumeboresha utendaji kwa uwazi kwa kuwezesha ufumuzi wa asynchronous, uonyeshaji wenye ufanisi, na upatanifu bora na Web Workers. Ingawa kudumisha msaada wa vivinjari vya zamani kunahitaji matumizi ya kuendelea ya Blob, uhamaji wa polepole kwa ImageBitmap unahakikisha faida za muda mrefu za utendaji.

Kwa kutumia maendeleo haya, Look Scanned hutoa uzoefu wa haraka zaidi, unaojbu zaidi kwa watumiaji wake. Ijaribu na upate tofauti kwa mikono yako mwenyewe!