通过内联关键CSS并异步加载非关键CSS，减少渲染阻塞；2. 避免@import，采用并行加载或文件合并；3. 优化样式规则，使用transform、will-change等减少重排重绘，提升移动端页面呈现速度与交互流畅性。
在移动端开发中，CSS的引入方式直接影响页面加载速度和渲染性能。不合理的CSS处理会导致关键渲染路径阻塞、首屏延迟、频繁重绘等问题。通过优化CSS引入策略，可以显著减少重排重绘、加快页面呈现速度。
使用内联关键CSS（Critical CSS）
将首屏渲染所需的最小化CSS直接嵌入HTML的中，避免额外网络请求阻塞渲染。
- 提取关键路径上的样式，比如头部、按钮、首屏布局等
- 非关键CSS通过异步方式加载
- 配合服务端渲染或构建工具（如PurgeCSS、Critical）自动化提取
这样能让用户“更快看到内容”，提升感知性能。
异步加载非关键CSS
对于不影响首屏展示的CSS文件，应避免阻塞渲染。传统标签会同步下载CSS，拖慢页面。
立即学习“前端免费学习笔记（深入）”；
- 使用JavaScript动态插入link标签，实现异步加载
- 利用
rel="preload"提前加载但不立即应用 - 示例代码：
或通过脚本延迟加载：
const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'theme.css'; document.head.appendChild(link);避免使用@import引入CSS
@import会在CSS文件下载后才去获取被导入的资源，造成请求链式阻塞，增加关键路径长度。
- 特别是在移动端网络较慢时，层级
@import可能导致多轮往返延迟 - 应改用多个
标签并行加载，或合并文件
减少重绘与重排：优化样式书写方式
即使CSS成功加载，不当的样式规则仍会引发频繁重绘或重排，影响滚动和交互流畅性。
- 避免使用
width、height、top等触发布局变化的属性做动画，改用transform - 使用
will-change提示浏览器提前优化图层 - 对频繁更新的元素启用
transform: translateZ(0)或contain: layout进行隔离 - 批量修改DOM样式，避免多次触发计算样式
基本上就这些。移动端的性能优化不只是“压缩文件”那么简单，从引入方式到规则书写，每个环节都影响用户体验。合理组织CSS加载流程，能有效减少渲染阻塞和视觉延迟。
