离线页面卡顿主因是CSS未适配离线环境：全量Bootstrap阻塞渲染、contain因尺寸不可控失效、动画触发重排；需重构CSS编译链，剔除JS依赖组件样式，硬编码容器尺寸确保contain生效，并用transform替代left/width等高危属性。
离线页面在移动端卡顿，核心不是“没网”，而是CSS仍按在线逻辑加载、解析和执行——比如全量Bootstrap样式照常阻塞渲染，contain属性因尺寸不可控被静默忽略，动画还用left/width触发重排。必须把CSS当作运行时资源来管，而不是静态文件。
为什么离线时Bootstrap页面反而更慢
离线状态下，浏览器缓存机制会放大原本就存在的CSS问题：
- 全量
bootstrap.min.css（200KB+）仍被完整加载进CSSOM，哪怕只用.btn和.container，解析时间不减反增（无网络延迟掩盖，CPU瓶颈暴露） -
contain: layout paint在离线页里几乎全失效：因为多数离线页面靠Service Worker缓存HTML+CSS，但未同步固化容器尺寸（如.card高度由JS动态注入内容决定），浏览器直接跳过隔离 - 媒体查询断点堆叠（如
@media (max-width: 375px)、@media (max-width: 414px)）导致CSSOM构建变慢——离线时无CDN预解析，每个断点都要本地逐个匹配 -
will-change: transform写死在CSS里，离线后图层长期驻留内存，低端安卓机易触发GC卡顿
离线专用CSS编译链：functions→variables→仅需模块
别让Service Worker缓存一个“假精简版”。真正生效的离线CSS，必须从Sass源码重编，且剔除所有JS依赖型组件的样式（它们离线时根本不会初始化）：
- 必须保留：
@import "bootstrap/scss/functions"、@import "bootstrap/scss/variables"、@import "bootstrap/scss/mixins"（顺序不能错，否则$grid-columns报错） - 可安全删除：
tooltip、popover、modal、dropdown、offcanvas——这些纯CSS规则离线后无JS驱动，既不显示也不参与布局，删了不影响视觉，还能省80KB+ - 必须保留：
reboot、type、grid、utilities（forms按需，若离线页无表单可删） - 编译后体积应压到60KB以内；若仍超80KB，检查是否误留了
print或reboot里的@font-face（离线页通常不用自定义字体）
contain属性在离线页里怎么写才真生效
离线环境无法靠JS动态补尺寸，所以contain必须配合**绝对可预测的尺寸声明**，且避开Flex/Grid父容器干扰：
立即学习“前端免费学习笔记（深入）”；
- 只加在高度明确的块上：如
.card设height: 144px或min-height: 144px，.list-group-item设aspect-ratio: 4/1; width: 100% - 禁用
min-content、fit-content、height: auto——这些值在离线渲染中无法收敛，浏览器直接忽略contain - 绝对不要在
.navbar或.container-fluid上加contain：它们依赖视口宽度计算，离线时无resize事件触发重算，尺寸上下文丢失 - 验证是否生效：打开
chrome://tracing，过滤Paint事件块——若contain区域的绘制时间没明显收敛，说明尺寸没锁住，写了也白写
动画与交互的离线CSS红线
离线页没有JS兜底，所有动画和状态切换必须100%靠CSS完成，且避开移动端高危属性：
- 位移/缩放只用
transform: translateX()和transform: scale()，禁用left、top、width、height——这些在离线时无法被JS修正，一卡就是整帧 -
max-height过渡必须配精确值：.navbar-collapse.show { max-height: 280px; transition: max-height 0.4s ease }，禁用max-height: none或120vh（离线时vh可能未初始化） -
will-change必须由JS控制：Service Worker激活后，在用户首次触摸前1帧设置el.style.willChange = 'transform'，动画结束立刻清空，否则离线状态下图层永不释放 - 按钮点击反馈改用
:active+transform: scale(0.98)，并加touch-action: manipulation消除300ms延迟（iOS Safari离线时该属性仍生效）
最难的不是写对contain或删掉tooltip，而是确认每个加了contain的容器，在离线首屏渲染那一刻，其height/width/min-height已由CSS硬编码锁定——任何依赖JS注入、窗口大小或内容测量的尺寸，都会让contain变成一句无效注释。
