跟AI学一手之渲染隔离
近期的一个项目要做大屏，然后让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 说谢谢，但是我在博客说一句谢谢 吧，这样不会消耗多少算力，原理大家自己看吧。