https://almazhecker.github.io/almazich/tags/performance/ Recent content in Performance on Almaz Altynbek uulu https://almazhecker.github.io/almazich/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E https://almazhecker.github.io/almazich/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E Hugo -- 0.147.0 en Fri, 02 May 2025 15:04:00 +0000 https://almazhecker.github.io/almazich/posts/optimized-css/ Fri, 02 May 2025 15:04:00 +0000 https://almazhecker.github.io/almazich/posts/optimized-css/ <p>The performance of lightweight pages can sometimes lag, while heavier applications run smoothly. This discrepancy lies in browser rendering threads and the pixel pipeline.</p> <h2 id="core-threads-in-browser-rendering">Core Threads in Browser Rendering</h2> <p>Browsers typically utilize three primary threads:</p> <ol> <li> <p><strong>UI Thread</strong> Handles browser interface elements (tabs, address bar), separate from page rendering.</p> </li> <li> <p><strong>Renderer Thread (Main Thread)</strong> Executes JavaScript, HTML, and CSS. It handles:</p> <ul> <li>DOM/CSSOM parsing</li> <li>Style calculation</li> <li>Layout (reflow)</li> <li>Painting</li> </ul> </li> <li> <p><strong>Compositor Thread</strong> Uses the GPU to render the final output to the screen. It operates independently from the main thread, optimized for:</p>