微谈 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,也是对作者的鼓励。