Web性能优化构建阶段 传输阶段https2, cdn 加载速度资源大小缓存cdn 渲染/运行构建相关tree sharking代码分割代码压缩Loader/Plugin 精简通过include限定 Loader 作用范围剔除无用 Plugin打包提速用thread-loader多线程处理 Loader如 Babel开启 webpack 5 持久化缓存cache: { type: filesystem }缓存相关使用强制缓存合协商缓存避免重复下载资源渲染相关复杂计算SSR白屏 骨架屏防抖节流避免重排重绘避免渲染阻塞CSS 优化关键 CSS首屏样式内联在head避免外部 CSS 阻塞非关键 CSS 用mediaprint/media(min-width: XXXpx)异步加载CSS 放在head不要放在底部JS 优化非关键 JS 放在/body前异步script async无序执行、script defer顺序执行长任务拆分用requestAnimationFrame/requestIdleCallback分片复杂计算丢Web Worker不阻塞主线程资源预加载长列表/大数据优化资源相关资源预加载减少bundle大小图片资源压缩cdn图片懒加载接口预请求缓存React性能优化资源相关首页加载速度优化拆包静态资源 CDN 部署图片懒加载渲染memouseMemouseCallback长列表懒加载虚拟滚动防抖节流重排重绘清理副作用骨架屏接口缓存预请求串行执行 并行接口合并无关页面/代码删除中间页RN性能优化RN容器初始化 提前RN bundle大小拆包提前下载无关页面/中间透明页删除短链直达骨架屏Native测提前渲染骨架屏RN再更新数据动态化更快的版本覆盖能力接口预请求放native提前加载串行执行 并行接口合并缓存渲染关键路径做减法非关键路径做异步与剥离日志完善/投入产出比/业务逻辑循序渐进/灰度/回滚 前期中期后期工具React DevTools开启高亮重渲染定位无效渲染组件Lighthouse检测首屏加载、性能得分、资源冗余问题。全面性能评分含指标优化建议适合整体评估。Chrome Performance录制渲染、脚本执行耗时定位卡顿瓶颈指标RN指标业务指标交易成功率交易耗时用户留存率较大金额分布退款量红包领取数量欺诈量各个入口引流情况技术指标pv页面曝光量流程转换率流程耗时订单量api错误率api耗时页面加载耗时TTI依赖服务成功率秒开率Web指标FCPLCPTTI
)
