How do CSS containment, will-change, and GPU compositing layers affect browser rendering performance, and when does promoting a layer become counterproductive?

Imagine you're drawing a big picture with crayons. If you only color one part, you don't need to redraw the whole picture—just that part. CSS containment tells the browser to only redraw that part, making it faster. But if you use too many special papers (layers), your desk gets messy and slows you down.