Liu Jun explains how Bilibili’s engineers replaced traditional pre‑processed SVG masks with a real‑time, browser‑based machine‑learning pipeline—using MediaPipe SelfieSegmentation, OffscreenCanvas, and Web Workers—to extract human contours and block faces in danmaku, achieving roughly 5 % CPU load on a 2020 M1 MacBook.
This article explains how to leverage Web Workers and OffscreenCanvas to offload heavy Excel file generation and bulk image compression from the main thread, improving UI responsiveness and reducing rendering stalls in typical backend‑admin web applications.
This article walks through the design and implementation of a web‑based video cutter, covering its overall architecture, the use of ffmpeg compiled to WebAssembly, OffscreenCanvas rendering, and worker threads, while providing code examples and practical tips for achieving smooth preview and export functionality.
Bilibili’s WasmPlayer is a WebAssembly‑based HEVC software decoder that runs entirely in C/C++, handling demuxing, decoding, resampling and A/V sync on worker threads, using SIMD, AudioWorklet and OffscreenCanvas to deliver smooth 4K 60 fps web video playback with reduced bandwidth and CPU load.
Canvas performance hinges on the number and size of drawn shapes, so optimizing by reducing draw‑calls, using layered or clipped rendering, and offloading heavy drawing to OffscreenCanvas or Web Workers can preserve frame rates and keep the UI responsive.
Optimizing HTML5 canvas performance involves reducing draw calls, using layered and clipped rendering, performing quick bounding‑box checks, and offloading heavy drawing to OffscreenCanvas with Web Workers, enabling smooth animation even when thousands of shapes are rendered.
