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 requestAnimationFrame (rAF) is a powerful browser API that helps achieve smoother interface changes by synchronizing rendering with the screen's refresh rate. Using rAF helps optimize performance, minimize lag (jank), and save energy by pausing calculations when the browser tab is inactive. Prerequisites In this article, I will continue to use the example from the previous article to optimize, so I will not provide the complete code but only the updated part; please refer to the previous article for the full content. Detail Update the OptimizedCanvas.tsx file as follows: import Konva from 'konva' import React , {useCallback, useEffect, useMemo, useRef, useState} from 'react' import {Layer, Stage} from 'react-konva' import useImage from 'use-image' import {ShapeItem} from './ShapeItem' import type {ShapeData, ViewRect} from './type' import {generateData, HEIGHT, IMAGE_URL, TOTAL_OBJECTS, WIDTH} from ...