Узнайте, как повысить производительность рендеринга на холсте с помощью OffscreenCanvas
Интерфейс OffscreenCanvas позволяет использовать контексты рендеринга холста (2D и WebGL) в Workers. Это увеличивает параллелизм в Интернете, что приводит к повышению производительности в многоядерных системах.
Используя OffscreenCanvas, мы можем визуализировать холст в рабочем потоке, чтобы основной поток не был нарушен, чтобы наше веб-приложение работало без сбоев.
О поддержке OffscreenCanvas в браузере можно узнать здесь, CanIUse.
Есть два способа использовать OffscreenCanvas
- Создание OffscreenCanvas из существующего холста
- Создание OffscreenCanvas вручную и рендеринг его на существующий холст
1. Создание OffscreenCanvas из существующего холста
Мы можем вызвать метод transferControlToOffscreen для элемента холста, чтобы получить элемент OffscreenCanvas, который можно передать работнику. Операции, примененные к OffscreenCanvas, будут автоматически отображаться на исходном холсте.
Пример
В приведенном выше коде мы создали offscreenCanvas из элемента canvas, который передается рабочему, и рендеринг будет происходить в рабочем потоке.
В файле offscreen_worker.js
Примечание. Если вы уже использовали getContext на этом холсте, вы не сможете передать его рабочему.
2. Создание OffscreenCanvas вручную и рендеринг его на существующий холст
Второй способ - создать объект OffscreenCanvas и выполнить рендеринг на этом холсте, а затем извлечь данные изображения из offscreenCanvas и отобразить их обратно на исходный холст. Используя этот способ, мы можем визуализировать сразу несколько холстов.
Чтобы отобразить изображение (ImageBitmap) из offscreenCanvas, вы можете использовать ImageBitmapRenderingContext контекст, который можно создать, вызвав canvas.getContext("bitmaprenderer") в исходном элементе холста. Этот контекст предоставляет только функциональные возможности для замены содержимого холста заданным ImageBitmap.
В worker мы воспользуемся холстом и сделаем некоторую анимацию:
Вы можете использовать offscreenCanvas в своем веб-приложении, если ваше приложение включает в себя некоторые сложные операции отрисовки на холсте.
Спасибо за прочтение. Следуйте Javascript Jeep🚙💨.
