How To Dev

Introduction In previous articles, I have guided you on using Viewport Culling and requestAnimationFrame to improve performance when using Konva to render 1,000 elements. Now, we will continue to improve further with Layer Caching and Tiling techniques to handle up to 10,000 elements. Prerequisites This article is extended from my previous articles, so please review the previous articles to grasp the necessary information before continuing. Detail Update file type.ts import type {GroupConfig} from 'konva/lib/Group' export interface ShapeData { id : string type : string x : number y : number size : number color : string } export interface ViewRect { x1 : number y1 : number x2 : number y2 : number } export interface ShapeItemProps extends GroupConfig { item : ShapeData image ?: HTMLImageElement onClick : ( id : string ) => void } export interface TileProps { items : ShapeData [] image : HTMLImageElement | undefined isZoomedOu...

Introduction In the previous article, I guided you on how to use Konva to create a simple WhiteBoard application; now we will continue to dive deeper into the performance issue when having to show too many elements on the UI to see how to solve it. Here you need to understand that to draw a single element on the browser, including colors, shadows, animations, and enabling event triggers, etc., all consume a corresponding amount of CPU/GPU; if you only show a small number of elements it is negligible, but if this number is large enough and your machine's configuration is not sufficient to meet the demand, it will cause lagging or make the app unusable. In this article, I will guide you on optimizing performance for a product to show 1000 elements on the UI while still operating smoothly using mathematical knowledge of Coordinate Transformation, also known as the Viewport Culling mechanism. Prerequisites If you don't know about Konva yet, please see the previous article to grasp ...