概览

为什么

• 提高用户体验
• 增加页面访问量
• 提高搜索引擎排名
• 减少服务器压力
• 节约成本
• 提高用户留存率

浏览器

1. 了解渲染原理、流程
2. v8
3. url地址回车到渲染第一次
4. 谷歌浏览器各个开发者控制平台
   1. 火焰图

性能优化关键指标

优化方式

• 代码层面
  • HTML
  • CSS
  • JS
• 框架
  • Vue
  • React
    • React性能优化实战
  • Vite
    • vite打包性能优化以及填坑
  • Webpack
• 网络
  • 推荐链接
    • 前端缓存 - 掘金
    • 一文！彻底弄懂前端缓存
  • 缓存
    • 浏览器缓存
    • http缓存
  • CDN
  • HTTP2
• 图片
  • WebP
  • 懒加载

好文推荐

• 前端大师课：最有用的Hybrid/H5性能优化
• 谷歌 Google I/O：提升Web核心性能指标的九个建议
• 前端性能指标—首屏时间统计
• 中高级前端工程师必备14种性能优化方案
• 前端性能优化 24 条建议（2020） - 掘金
• ❬前端❭ 优化实战（性能、安全、架构、算法、面试）
• 前端性能优化知识梳理 - 掘金
• 性能优化】性能测量工具-Lighthouse
• 性能优化进阶 💥 前端性能埋点&监控体系建设！- 掘金