Ytelsesoptimalisering er avgjørende når man bygger moderne nettapplikasjoner som Look Scanned, spesielt når man håndterer bilder. Et kraftig, men underutnyttet verktøy for å oppnå betydelige ytelsesgevinster er ImageBitmap-grensesnittet. I dette blogginnlegget utforsker vi hva ImageBitmap er, hvorfor det er effektivt, og hvordan det er blitt integrert i Look Scanned for å forbedre renderingsytelsen.

Hva er ImageBitmap?

ImageBitmap er et HTML5-grensesnitt som representerer et bitmap-bilde. Det muliggjør effektiv bildedekoding og -behandling utenfor hovedtråden, noe som reduserer renderingsbelastningen og forbedrer responsiviteten. Når det først er opprettet, kan et ImageBitmap-objekt brukes direkte i renderingskontekster som Canvas 2D eller WebGL, noe som gjør det til et kraftig verktøy for bildetunge applikasjoner.

Hvorfor Bruke ImageBitmap i Look Scanned?

Tidligere var Look Scanned avhengig av Blob for å overføre bildedata mellom behandlingsfunksjoner. Men Blob er ikke ideelt for ytelsesoptimalisering, siden det krever koding og dekoding som ekstra steg. ImageBitmap gir derimot direkte tilgang til bildedata, noe som eliminerer overflødige dekodingsoperasjoner og betydelig forbedrer renderingsytelsen.

Hvordan Vi Bruker ImageBitmap i Look Scanned

Look Scanned støtter eldre nettlesere, så det kan ikke gå fullstendig over til ImageBitmap uten å opprettholde støtte for Blob. Denne doble støtten sikrer kompatibilitet på tvers av et bredt spekter av nettlesere. For detaljer om nettleserkompatibilitet, se caniuse.com. I tillegg krever Safaris begrensede canvas-støtte at WebAssembly (WASM) brukes til bildebehandling, noe som krever Blob som inndataformat.

For å håndtere dette bruker Look Scanned en hybrid tilnærming som støtter både Blob og ImageBitmap, samtidig som den gradvis migrerer til sistnevnte. Under følger nøkkeldetaljer om implementeringen:

Lasting og Dekoding

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

WebAssembly-integrasjon

For avansert behandling sendes Blob til WASM for å sikre funksjonalitet selv i nettlesere uten støtte. Vi må først tegne bildet til canvas og deretter bruke canvas.toBlob for å få Blob.

Reserverendering

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

Ytelsesforbedringer

Ved å integrere ImageBitmap har Look Scanned oppnådd en betydelig reduksjon i bildebehandlingstider — fra 50ms til 20ms per bilde. Denne forbedringen gir en jevnere og mer responsiv brukeropplevelse, spesielt for oppgaver som involverer skannede dokumenter.

Uventede Funn

Under implementeringen oppdaget vi at det å opprette en ny ImageBitmap-kopi med createImageBitmap før den overføres til en worker, gir bedre ytelse enn å sende det opprinnelige objektet direkte. Denne oppførselen kan skyldes optimaliseringer i nettleserens motor for overførbare objekter.

Nettleserstøtte

ImageBitmap støttes i de fleste moderne nettlesere, inkludert de nyeste versjonene av Chrome, Firefox, Edge og Safari. For detaljer om kompatibilitet, se createImageBitmap på caniuse.com.

Konklusjon

Å integrere ImageBitmap i Look Scanned har markant forbedret ytelsen ved å muliggjøre asynkron dekoding, effektiv rendering og bedre kompatibilitet med Web Workers. Selv om opprettholdelse av støtte for eldre nettlesere krever fortsatt bruk av Blob, sikrer den gradvise migreringen til ImageBitmap langsiktige ytelsesgevinster.

Ved å utnytte disse fremskrittene leverer Look Scanned en raskere, mer responsiv opplevelse for brukerne sine. Prøv det, og opplev forskjellen selv!