Web 性能优化框架

1 提交加载速度（减少代码体积）

2 打包优化（构建层面的工具）

综合工具

• webpack-bundle-analyzer 分析JS资源包大小
• dependency-cruiser 清理依赖

• 代码压缩

HTTP 请求

• 静态资源使用 CDN 加速
• 静态资源（CDN）使用第三方域名，避免浏览器并发限制

3 开发优化（代码优化、高性能代码）

• 代码规范、代码检查
• 减少dom操作

未整理 ↓

• JavaScript的时间消耗 加载速度
• Webpack打包后体积过大的优化思路

性能工具

https://github.com/GoogleChrome/lighthouse https://developers.google.com/web/tools/lighthouse/?hl=zh-cn

https://github.com/speedracer/speedracer

https://yellowlab.tools

https://www.oschina.net/p/tracing-framework

https://github.com/tkadlec/grunt-perfbudget

https://www.sitespeed.io

优化js代码结构，减少冗余代码

图片压缩

减少 http 请求：

• 使用 base64 代替 <2KB 的图片
• 雪碧图 sprite
• 合理使用缓存

其它：

• 压缩图片 图片格式
• css svg canvas iconfont 代替图片
• 懒加载
• cdn

<!---->

<img srcset="360.jpg 360w, 768.jpg 768w, 1200.jpg 1200w, 1920.jpg 1920w" sizes="(max-width: 360px) 100vw,
(max-width: 768px) 90vw,
(max-width: 1980px) 80vw"
src="360.jpg" alt="">

<picture>
  <source media="(min-width: 960px)" srcset=960.jpg">
  <source media="(min-width: 768px)" srcset="768.jpg">
  <img src="360.jpg" alt="">
</picture>

其它

1. 图片压缩
2. js、css压缩
3. 资源请求合并
4. 提取流程判断js到页面
5. 预先加载loading动画
6. 服务器配置资源缓存 cache
7. 静态资源域名（浏览器并发数限制）

DNS优化 cdn缓存 html5离线化 浏览器缓存 js-sdk WebView 接口缓存策略 接口服务调用优化 图片优化 html代码优化 css代码优化 js代码优化 webpack打包优化 页面静态化ssr pwa 页面加载策略优化