Optimizarea performanței este crucială atunci când construim aplicații web moderne cum este Look Scanned, în special când lucrăm cu imagini. Un instrument puternic, dar subutilizat pentru obținerea de îmbunătățiri semnificative ale performanței este interfața ImageBitmap. În această postare de blog, vom explora ce este ImageBitmap, de ce este efectiv și cum a fost integrat în Look Scanned pentru a îmbunătăți performanța de randare.

Ce este ImageBitmap?

ImageBitmap este o interfață HTML5 care reprezintă o imagine bitmap. Permite decodarea și procesarea eficientă a imaginilor în afara thread-ului principal, reducând overhead-ul de randare și îmbunătățind reactivitatea. Odată creat, un obiect ImageBitmap poate fi folosit direct în contexte de randare precum Canvas 2D sau WebGL, făcându-l un instrument puternic pentru aplicații cu multe imagini.

De ce să Folosim ImageBitmap în Look Scanned?

Anterior, Look Scanned se baza pe Blob pentru a transmite datele imaginilor între funcțiile de procesare. Cu toate acestea, Blob nu este ideal pentru optimizarea performanței, deoarece necesită pași de codificare și decodificare. În contrast, ImageBitmap oferă acces direct la datele imaginii, eliminând operațiile redundante de decodificare și îmbunătățind semnificativ performanța de randare.

Cum Folosim ImageBitmap în Look Scanned

Look Scanned suportă browserele mai vechi, astfel încât nu poate trece complet la ImageBitmap fără menținerea suportului pentru Blob. Acest suport dual asigură compatibilitatea pe o gamă largă de browsere. Pentru detalii despre compatibilitatea browserelor, consultați caniuse.com. În plus, suportul limitat pentru canvas al Safari necesită utilizarea WebAssembly (WASM) pentru procesarea imaginilor, care necesită Blob ca format de intrare.

Pentru a gestiona acest lucru, Look Scanned folosește o abordare hibridă care suportă atât Blob, cât și ImageBitmap, migrând treptat către cel din urmă. Mai jos sunt detaliile cheie de implementare:

Încărcare și Decodificare

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

Integrare WebAssembly

Pentru procesarea avansată, Blob este transmis către WASM pentru a asigura funcționalitatea chiar și în browserele nesuportate. Trebuie să desenăm mai întâi imaginea pe canvas și apoi să folosim canvas.toBlob pentru a obține Blob.

Randare Fallback

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);
  }
}

Îmbunătățiri de Performanță

Prin integrarea ImageBitmap, Look Scanned a obținut o reducere semnificativă în timpii de procesare a imaginilor—de la 50ms la 20ms per imagine. Această îmbunătățire se traduce într-o experiență de utilizator mai fluidă și mai reactivă, în special pentru sarcini care implică documente scanate.

Descoperiri Neașteptate

În timpul implementării, am descoperit că crearea unei noi copii ImageBitmap folosind createImageBitmap înainte de a o transfera la un worker oferă performanțe mai bune decât transmiterea directă a obiectului original. Acest comportament poate fi datorat optimizărilor motorului browserului pentru obiectele transferabile.

Suport Browser

ImageBitmap este suportat în majoritatea browserelor moderne, inclusiv în versiunile cele mai recente ale Chrome, Firefox, Edge și Safari. Pentru detalii despre compatibilitate, verificați createImageBitmap pe caniuse.com.

Concluzie

Integrarea ImageBitmap în Look Scanned a îmbunătățit în mod evident performanța prin activarea decodării asincrone, randării eficiente și compatibilității mai bune cu Web Workers. În timp ce menținerea suportului pentru browserele mai vechi necesită folosirea continuă a Blob, migrarea treptată către ImageBitmap asigură beneficii de performanță pe termen lung.

Prin valorificarea acestor progrese, Look Scanned oferă o experiență mai rapidă și mai reactivă pentru utilizatorii săi. Încercați-l și experimentați diferența din prima mână!