How To Dev

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 ...

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 ...