微谈 Web 前端性能优化

web 应用性能优化一般在于产品交付的阶段，当然在开发周期允许的情况下，有意识对可能导致性能问题提前考虑是大大有利的。 web 应用的性能优化包括服务端与客户端（浏览器），服务端在于响应速度，客户端则在于渲染交互，前端的优化往往能起到立竿见影的效果。另外对于开发过程的优化也属于性能优化的范畴，例如利用 webpack 进行开发如何提升工作效率。

本次的研究是以浏览器端的性能优化为主，整体思路是：从浏览器输入URL 到页面渲染出来经历的过程。具体的计划如下：

• 工具监控篇（在后面所有的篇章都会涉及到，因此先放到前面）
  • 常见性能指标，perfomance 工具
  • 通用测试工具—— Chrome Performane、LightHouse 与性能API、PhantomJS
  • 微观性能优化工具（针对算法）
• 网络篇
  • 《从浏览器输入 URL 到页面加载完成的过程》所涉及到性能相关的内容总览。
  • 图片优化——图片格式、在线生成图片等。
  • 打包工具性能优化——webpack、Gzip 压缩、如何减少打包时间、减少打包后的文件体积。
• 缓存篇
  • 浏览器缓存机制——缓存位置、强缓存、如何避免缓存静态资源。
  • 浏览器本地存储——cookie、storage、indexDB。
• 渲染篇
  • 理解浏览器背后的渲染原理——如何解析一个 HTML 页面。
  • DOM优化——优化原理、回流与重绘。
  • Event Loop 与异步更新策略（这部分的原理可以看这个仓库JS 事件循环与异步更新，这次侧重于性能方面）。
• 应用篇
  • 编码优化——CSS、JS（事件的节流与防抖）、耗性能操作和时间复杂度。
  • 内存管理-JS 栈、堆
  • 大数据量下的渲染优化策略
  • 框架性能优化——Vue 应用优化相关知识、VueCli 的性能相关设置、首屏优化、微前端的性能知识。（review vue-source-code 系列）

更新日志

声明

本书的内容会借鉴和参考社区优秀的文章，如有侵犯你的权益，请联系我修改删除，感谢社区的贡献🙏。

如果本仓库对你有帮助，请点个 star，也是对作者的鼓励。