---
title: "Покращення Продуктивності на 60% з ImageBitmap у Look Scanned"
description: "Дізнайтеся, як інтеграція ImageBitmap у Look Scanned покращує продуктивність, дозволяючи асинхронне декодування та ефективний рендерінг, зберігаючи при цьому сумісність зі старими браузерами."
date: 2025-01-18T11:15:33.000Z
lang: uk
source: https://lookscanned.io/uk/blog/boost-performance-with-imagebitmap
tags: ["продуктивність", "imagebitmap", "зображення", "браузер"]
---

# Покращення Продуктивності на 60% з ImageBitmap у Look Scanned

Оптимізація продуктивності має вирішальне значення під час створення сучасних веб-додатків, таких як [Look Scanned](https://lookscanned.io), особливо при роботі з зображеннями. Потужним, але недостатньо використовуваним інструментом для досягнення значного покращення продуктивності є інтерфейс `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](https://caniuse.com/createimagebitmap). Крім того, обмежена підтримка canvas у Safari вимагає використання WebAssembly (WASM) для обробки зображень, яке потребує `Blob` як вхідний формат.

Для управління цим Look Scanned використовує гібридний підхід, який підтримує як `Blob`, так і `ImageBitmap`, поступово мігруючи до останнього. Нижче наведені ключові деталі реалізації:

### Завантаження та Декодування

```typescript
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`.

### Резервний Рендерінг

```typescript
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](https://caniuse.com/createimagebitmap).

## Висновок

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

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