Оптимізація продуктивності має вирішальне значення під час створення сучасних веб-додатків, таких як Look Scanned, особливо при роботі з зображеннями. Потужним, але недостатньо використовуваним інструментом для досягнення значного покращення продуктивності є інтерфейс ImageBitmap. У цій публікації блогу ми дослідимо, що таке ImageBitmap, чому він ефективний і як він був інтегрований у Look Scanned для покращення продуктивності рендерінгу.

Що таке ImageBitmap?

ImageBitmap — це HTML5 інтерфейс, який представляє растрове зображення. Він дозволяє ефективне декодування та обробку зображень поза основним потоком, знижуючи навантаження на рендерінг і покращуючи відзивність. Після створення об’єкт 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 досяг значного зменшення часу обробки зображень — з 50мс до 20мс на зображення. Це покращення призводить до більш плавного та відзивного користувацького досвіду, особливо для завдань, що включають скановані документи.

Несподівані Відкриття

Під час реалізації ми виявили, що створення нової копії ImageBitmap за допомогою createImageBitmap перед передачею її worker’у дає кращу продуктивність, ніж пряма передача оригінального об’єкта. Така поведінка може бути пов’язана з оптимізаціями рушія браузера для об’єктів, що передаються.

Підтримка Браузерів

ImageBitmap підтримується в більшості сучасних браузерів, включаючи останні версії Chrome, Firefox, Edge та Safari. Для деталей про сумісність перевірте createImageBitmap на caniuse.com.

Висновок

Інтеграція ImageBitmap у Look Scanned помітно покращила продуктивність, дозволивши асинхронне декодування, ефективний рендерінг та кращу сумісність з Web Workers. Хоча підтримка старих браузерів вимагає продовження використання Blob, поступова міграція на ImageBitmap забезпечує довгострокові переваги продуктивності.

Використовуючи ці досягнення, Look Scanned надає швидший, більш відзивний досвід для своїх користувачів. Спробуйте його та відчуйте різницю на власному досвіді!