Η βελτιστοποίηση απόδοσης είναι κρίσιμη όταν δημιουργούμε σύγχρονες εφαρμογές ιστού όπως το Look Scanned, ειδικά όταν πρόκειται για εικόνες. Ένα ισχυρό αλλά υποχρησιμοποιημένο εργαλείο για την επίτευξη σημαντικών βελτιώσεων απόδοσης είναι η διεπαφή ImageBitmap. Σε αυτό το άρθρο του ιστολογίου, θα εξερευνήσουμε τι είναι το ImageBitmap, γιατί είναι αποτελεσματικό, και πώς έχει ενσωματωθεί στο Look Scanned για την ενίσχυση της απόδοσης απόδοσης.

Τι είναι το ImageBitmap;

Το ImageBitmap είναι μια διεπαφή HTML5 που αντιπροσωπεύει μια εικόνα bitmap. Επιτρέπει την αποδοτική αποκωδικοποίηση και επεξεργασία εικόνων εκτός του κύριου νήματος, μειώνοντας το κόστος απόδοσης και βελτιώνοντας την αποκρισιμότητα. Μόλις δημιουργηθεί, ένα αντικείμενο ImageBitmap μπορεί να χρησιμοποιηθεί άμεσα σε περιβάλλοντα απόδοσης όπως το Canvas 2D ή το WebGL, καθιστώντας το ισχυρό εργαλείο για εφαρμογές που χρησιμοποιούν πολλές εικόνες.

Γιατί να Χρησιμοποιήσουμε το ImageBitmap στο Look Scanned;

Παλαιότερα, το Look Scanned βασιζόταν στο Blob για να περάσει δεδομένα εικόνας μεταξύ των συναρτήσεων επεξεργασίας. Ωστόσο, το Blob δεν είναι ιδανικό για βελτιστοποίηση απόδοσης καθώς απαιτεί βήματα κωδικοποίησης και αποκωδικοποίησης. Αντίθετα, το ImageBitmap παρέχει άμεση πρόσβαση στα δεδομένα εικόνας, εξαλείφοντας περιττές λειτουργίες αποκωδικοποίησης και βελτιώνοντας σημαντικά την απόδοση απόδοσης.

Πώς Χρησιμοποιούμε το ImageBitmap στο Look Scanned

Το Look Scanned υποστηρίζει παλαιότερους περιηγητές, επομένως δεν μπορεί να μεταβεί πλήρως στο ImageBitmap χωρίς να διατηρήσει υποστήριξη για το Blob. Αυτή η διπλή υποστήριξη εξασφαλίζει συμβατότητα σε ένα ευρύ φάσμα περιηγητών. Για λεπτομέρειες συμβατότητας περιηγητή, ανατρέξτε στο caniuse.com. Επιπλέον, η περιορισμένη υποστήριξη canvas του Safari απαιτεί τη χρήση WebAssembly (WASM) για επεξεργασία εικόνων, που απαιτεί Blob ως μορφή εισόδου.

Για να το διαχειριστεί αυτό, το Look Scanned χρησιμοποιεί μια υβριδική προσέγγιση που υποστηρίζει τόσο το Blob όσο και το ImageBitmap ενώ σταδιακά μεταπίπτει στο δεύτερο. Παρακάτω είναι βασικές λεπτομέρειες υλοποίησης:

Φόρτωση και Αποκωδικοποίηση

async function loadImage(url): Promise<ImageBitmap | Blob> {
  const response = await fetch(url);
  const blob = await response.blob();
  if (window.createImageBitmap) {
    return createImageBitmap(blob);
  }
  // Εναλλακτική χρήση του Blob
  return blob;
}

Ενσωμάτωση WebAssembly

Για προηγμένη επεξεργασία, το Blob περνάει στο WASM για να εξασφαλιστεί η λειτουργικότητα ακόμα και σε μη υποστηριζόμενους περιηγητές. Πρέπει πρώτα να σχεδιάσουμε την εικόνα στο canvas και στη συνέχεια να χρησιμοποιήσουμε το canvas.toBlob για να πάρουμε το Blob.

Εναλλακτική Απόδοση

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

Βελτιώσεις Απόδοσης

Με την ενσωμάτωση του ImageBitmap, το Look Scanned έχει επιτύχει μια σημαντική μείωση στους χρόνους επεξεργασίας εικόνων—από 50ms σε 20ms ανά εικόνα. Αυτή η βελτίωση μεταφράζεται σε μια πιο ομαλή και πιο αποκρίσιμη εμπειρία χρήστη, ειδικά για εργασίες που περιλαμβάνουν σαρωμένα έγγραφα.

Απροσδόκητα Ευρήματα

Κατά την υλοποίηση, ανακαλύψαμε ότι η δημιουργία ενός νέου αντιγράφου ImageBitmap χρησιμοποιώντας το createImageBitmap πριν το μεταφέρουμε σε έναν εργάτη αποδίδει καλύτερη απόδοση από το να περάσουμε άμεσα το αρχικό αντικείμενο. Αυτή η συμπεριφορά μπορεί να οφείλεται σε βελτιστοποιήσεις του μηχανισμού περιηγητή για μεταφερόμενα αντικείμενα.

Υποστήριξη Περιηγητή

Το ImageBitmap υποστηρίζεται στους περισσότερους σύγχρονους περιηγητές, συμπεριλαμβανομένων των τελευταίων εκδόσεων του Chrome, Firefox, Edge και Safari. Για λεπτομέρειες συμβατότητας, ελέγξτε το createImageBitmap στο caniuse.com.

Συμπέρασμα

Η ενσωμάτωση του ImageBitmap στο Look Scanned έχει βελτιώσει σημαντικά την απόδοση επιτρέποντας την ασύγχρονη αποκωδικοποίηση, την αποδοτική απόδοση και την καλύτερη συμβατότητα με τους Web Workers. Ενώ η διατήρηση υποστήριξης για παλαιότερους περιηγητές απαιτεί συνεχή χρήση του Blob, η σταδιακή μετάβαση στο ImageBitmap εξασφαλίζει μακροπρόθεσμα οφέλη απόδοσης.

Αξιοποιώντας αυτές τις εξελίξεις, το Look Scanned προσφέρει μια ταχύτερη, πιο αποκρίσιμη εμπειρία για τους χρήστες του. Δοκιμάστε το και βιώστε τη διαφορά από πρώτο χέρι!