近期的一个项目要做大屏然后让AI写了个页面但是用着用着发现一打开首页大屏cpu 风扇就狂转打开任务管理器发现有个叫 google chrome helper(gpu)的进程一直疯狂占用 cpu倒也不是特别疯狂但是持续有个10%这就不正常了如果是峰值偶尔高一点还正常但是持续10%非常诡异起初以为是地图的问题因为地图一般是动态的占用 cpu 可能很高但是我把地图去掉后发现仍然有问题于是就再让 AI 看AI 虽然能写但是出问题后它就开始胡说八道了我已经告诉他跟地图没关系结果回答还是那一套什么数据更新会触发重新渲染巴拉巴拉两天了一直没解决。因为我的前端经验不是很丰富所以我没办法排查也不知道怎么排查所以只能还得请教 AI这次换了一个 AI 问别说这次 AI 还真的把问题发现了他是这么说的为什么其他页面正常只有 DashboardPage 高 关键差异DashboardPage 是全屏布局 对比其他页面 HistoryDataPage、ReportPage 等内容在 .soft-card 内有固定宽度不会撑满视口 DashboardPage用了 h-full、flex: 1占满整个视口 当 DashboardPage 占满视口时任何内部变化Chrome 都会认为可能影响整个屏幕于是 GPU 进程需要准备整个屏幕大小的纹理 任何小变化都触发全屏重绘 加上 contain: layout style paint 后Chrome 知道 即使这个容器占满视口它内部的变化也是独立的不需要重新计算整个文档。 图示对比 没有 contain 时 plain ┌─────────────────────────────────────┐ │ body │ │ ┌───────────────────────────────┐ │ │ │ DashboardPage (全屏) │ │ │ │ ┌─────┐ ┌─────────────────┐ │ │ │ │ │stats│ │ map charts │ │ │ │ │ └─────┘ └─────────────────┘ │ │ │ │ ↑ 内部变化 │ │ │ │ ↓ 触发整个 body 重绘 │ │ │ └───────────────────────────────┘ │ │ ↑ 也影响 Sidebar │ └─────────────────────────────────────┘ ↑ 也影响全局 transition 计算 有 contain: layout style paint 时 plain ┌─────────────────────────────────────┐ │ body │ │ ┌───────────────────────────────┐ │ │ │ DashboardPage (独立容器) │◄─┼── contain 边界 │ │ ┌─────┐ ┌─────────────────┐ │ │ ↑ 内部变化 │ │ │stats│ │ map charts │ │ │ ↓ 只影响自己 │ │ └─────┘ └─────────────────┘ │ │ │ └───────────────────────────────┘ │ │ ↑ 不影响 Sidebar │ └─────────────────────────────────────┘ ↑ 不影响全局样式计算所以它真的不是在胡说它真的懂至少比我懂虽然说不让对 AI 说谢谢但是我在博客说一句谢谢 吧这样不会消耗多少算力原理大家自己看吧。
)
