重排重绘

2024年，一家大型体育用品电商网站发现他们的商品分类页面在移动端存在严重的响应性问题——用户点击筛选按钮后，页面需要数百毫秒才能响应。Chrome DevTools的性能分析显示，问题根源在于浏览器渲染管道的过度工作：每当用户操作触发DOM变化，浏览器就需要重新计算整个页面的布局，即使变化的只是屏幕可见区域之外的几个商品卡片。 ...

2025年，一位前端开发者在优化个人作品集时遇到了一个诡异的问题：在Chrome和Firefox上运行流畅的圆形遮罩动画，到了Safari却明显卡顿。他尝试了缩小遮罩范围、简化逻辑、限制变量作用域——都没有效果。最后，一个看似毫无意义的transform: translateZ(0)居然让Safari变得丝般顺滑。 ...

你打开Chrome的任务管理器，发现一个简单的网页竟然占用了多个进程——浏览器进程、渲染进程、GPU进程、网络服务进程，甚至还有扩展进程。这不是Chrome"吃内存"，而是现代浏览器架构的必然结果。 ...