How To Dev

Introduction In the previous article, I introduced Core Web Vitals as well as how to optimize for the LCP index and in this article, we will continue with the next index, which is INP. This index measures responsiveness when users interact, as fetching too much data then rendering a large list (like hundreds of thousands of items) will block the Main-thread. The solutions I will mention in this article to optimize INP include: Virtualization: there are many packages supporting Data-heavy Lists, you can choose to apply them effectively, just render what is in the viewport. Handling thousands of DOM nodes simultaneously and continuously is the main factor directly affecting the INP index. Web Workers: If you need to process heavy logic (calculating, formatting a large amount of data) before displaying, push that logic part to a Web Worker to free up the Main-thread. Debouncing & Transitions: Use a combination of debounce and hooks like useTransition or useDeferredValue to mark state ...

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