FE Developer's Dilemma for Improving Online Store Performance Part-1

The browser parses HTML to create DOM and CSSOM trees, builds a Render Tree by combining them, and then draws the screen through layout calculation and painting processes. Minimizing the Reflow and Repaint that occur during this process is key to performance optimization.

Infinite Scroll is a technique that prioritizes rendering only the elements visible within the user's viewport, adding only the necessary data as the user scrolls. This reduces the client resource consumption that occurs when handling large amounts of data.

The Oliveyoung team chose a custom implementation approach instead of an existing library, reducing build file size and increasing flexibility. As a result of applying this, key metrics such as FCP (First Contentful Paint) and LCP (Largest Contentful Paint) improved, securing initial loading speed and scroll responsiveness.