BestHub
Sign in
Tag

OffscreenCanvas

1 views collected around this technical thread.

Bilibili Tech
Bilibili Tech
Jun 9, 2023 · Artificial Intelligence

Implementing Face Blocking Danmaku Using Machine Learning in Browser

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.

MediaPipeOffscreenCanvasPerformance Tuning
0 likes · 9 min read
Implementing Face Blocking Danmaku Using Machine Learning in Browser
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 29, 2022 · Frontend Development

Using Web Workers for Large Excel Export and Batch Image Compression in Frontend Projects

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.

Excel ExportOffscreenCanvasfrontend performance
0 likes · 14 min read
Using Web Workers for Large Excel Export and Batch Image Compression in Frontend Projects
Bilibili Tech
Bilibili Tech
Apr 22, 2022 · Frontend Development

Bilibili's WasmPlayer: WebAssembly-based HEVC Soft Decoding Solution for Web Video Playback

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.

AudioWorkletHEVCOffscreenCanvas
0 likes · 13 min read
Bilibili's WasmPlayer: WebAssembly-based HEVC Soft Decoding Solution for Web Video Playback
DeWu Technology
DeWu Technology
Dec 23, 2021 · Frontend Development

Canvas Performance Optimization Techniques

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.

OffscreenCanvasOptimizationPerformance
0 likes · 15 min read
Canvas Performance Optimization Techniques
DeWu Technology
DeWu Technology
Dec 16, 2021 · Frontend Development

Canvas Performance Optimization Techniques

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.

OffscreenCanvasOptimizationPerformance
0 likes · 14 min read
Canvas Performance Optimization Techniques