Web 前端性能优化框架

Links

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

优化框架

• 提交加载速度（减少代码体积）
  • 打包优化（构建层面的工具）
    • webpack-bundle-analyzer 分析 JS 资源包大小
    • 如何优雅的治理前端模块依赖关系？ dependency-cruiser
    • 代码压缩
  • 资源请求/HTTP
    • 静态资源使用 CDN 加速
    • 静态资源（CDN）使用第三方域名，避免浏览器并发限制
  • 减少 http 请求
    • 合理使用 base64 图片
    • 雪碧图 sprite
    • 浏览器缓存机智
• 开发优化
  • 优化 js 代码结构，减少冗余代码
  • 代码规范、代码检查
    • 统一 IDE 插件
  • 减少 DOM 操作

性能工具

• window.performance
  • 为什么说你是外包和培训的，因为你不关注性能【Performance对象与性能监控讲解】
  • 使用Chrome Performance进行性能调优
• lighthouse
  • https://github.com/GoogleChrome/lighthouse
  • https://developers.google.com/web/tools/lighthouse/?hl=zh-cn
  • Lighthouse集成CI
    • https://github.com/GoogleChromeLabs/lighthousebot
    • https://github.com/GoogleChrome/lighthouse-ci

性能工具

• 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

其它

• css svg canvas iconfont 代替图片

• 懒加载

  <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优化 html5离线化 浏览器缓存 js-sdk 接口缓存策略 接口服务调用优化 图片优化 html代码优化 css代码优化 js代码优化 webpack打包优化 页面静态化ssr pwa 页面加载策略优化