Kakao FE Platform Team Shares Performance Improvements for Photo Editor Using WebAssembly

The Kakao FE Platform Team shared their experience improving the performance of a web photo editor using WebAssembly (WASM). The existing JavaScript-based photo editor suffered from server communication costs as a major bottleneck, but by applying WASM to process images directly on the client side, they eliminated network latency.

Performance Comparison and Root Cause Analysis

The team tested Gray scale, Threshold, Histogram equalize, Gaussian blur, Canny edge detection, and other 5 filters, resulting in the WASM implementation showing approximately 2–3x faster performance compared to JavaScript. This is because WASM is in the form of an already compiled binary file, so the browser's parsing and optimization processes are omitted or simplified.

JavaScript engines go through complex processes such as AST transformation, JIT compilation, and re-optimization, but WASM provides pre-optimized bytecode through the LLVM compiler, resulting in shorter execution preparation times. Additionally, WASM uses explicit types, so there is no type inference overhead as in JavaScript.

Limitations and Future Direction

WASM has a performance degradation of about 20% compared to Native code, but it is very efficient considering security constraints. However, the current Emscripten tool has limitations in supporting Number and Array types, and does not provide Garbage Collection (GC), so memory management must be done manually. Despite these limitations, the team continues to adopt WASM to improve the performance of complex image processing logic.