https://github.com/nstseek/repaint-efficiency-example
A simple example demonstrating a common website layout with multiple layers to avoid unnecessary page repaintings.
https://github.com/nstseek/repaint-efficiency-example
chrome compositor css devtools html layers layout paint painting performance rendering repaint threads
Last synced: 3 months ago
JSON representation
A simple example demonstrating a common website layout with multiple layers to avoid unnecessary page repaintings.
- Host: GitHub
- URL: https://github.com/nstseek/repaint-efficiency-example
- Owner: nstseek
- Created: 2023-07-20T16:41:09.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-21T07:58:53.000Z (almost 2 years ago)
- Last Synced: 2025-01-16T09:39:22.145Z (5 months ago)
- Topics: chrome, compositor, css, devtools, html, layers, layout, paint, painting, performance, rendering, repaint, threads
- Language: HTML
- Homepage: https://repaint-efficiency-example.vercel.app
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Repaint efficiency example
This project demonstrates a common webpage layout that has a fixed header and a fixed footer with a scrollable content in the middle.
It creates three layers avoid page repainting every time the user scrolls the page.
A simple demonstration on how to have a efficient webpage in exchange for a few extra layers, consuming more memory.
You can check the project right [here](https://repaint-efficiency-example.vercel.app/)
The project will present a live demo to you and teach you how to use Chrome DevTools to notice the different layers and repaints.