https://github.com/jecyu/web-performance-optimization

Web 性能优化🚗
https://github.com/jecyu/web-performance-optimization

performance-analysis

Last synced: 13 days ago
JSON representation

Web 性能优化🚗

• Host: GitHub
• URL: https://github.com/jecyu/web-performance-optimization
• Owner: jecyu
• License: mit
• Created: 2020-05-26T09:46:34.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T21:45:22.000Z (almost 2 years ago)
• Last Synced: 2023-03-06T01:08:51.283Z (over 1 year ago)
• Topics: performance-analysis
• Language: Shell
• Homepage: https://jecyu.github.io/Web-Performance-Optimization/
• Size: 72.5 MB
• Stars: 50
• Watchers: 1
• Forks: 9
• Open Issues: 96
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 微谈 Web 前端性能优化

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

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

- 工具监控篇（在后面所有的篇章都会涉及到，因此先放到前面）

  - [x] 常见性能指标，perfomance 工具

  - [x] 通用测试工具—— Chrome Performane、LightHouse 与性能API、PhantomJS

  

  - [ ] 微观性能优化工具（针对算法）

- 网络篇

  - [x] 《从浏览器输入 URL 到页面加载完成的过程》所涉及到性能相关的内容总览。

  - [x] 图片优化——图片格式、在线生成图片等。

  - [ ] 打包工具性能优化——webpack、Gzip 压缩、如何减少打包时间、减少打包后的文件体积。

- 缓存篇

  - [x] 浏览器缓存机制——缓存位置、强缓存、如何避免缓存静态资源。

  - [x] 浏览器本地存储——cookie、storage、indexDB。

- 渲染篇

  - [x] 理解浏览器背后的渲染原理——如何解析一个 HTML 页面。

  - [x] DOM优化——优化原理、回流与重绘。

  - [x] Event Loop 与异步更新策略（这部分的原理可以看这个仓库[JS 事件循环与异步更新](https://jecyu.github.io/JS-Event-Loop/)，这次侧重于性能方面）。

- 应用篇

  - [x] 编码优化——CSS、JS（事件的节流与防抖）、耗性能操作和时间复杂度。

  - [ ] 内存管理-JS 栈、堆

  - [x] 大数据量下的渲染优化策略

  - [ ] 框架性能优化——Vue 应用优化相关知识、VueCli 的性能相关设置、首屏优化、微前端的性能知识。（review vue-source-code 系列）

![](./.vuepress/public/assets/2020-06-03-10-28-17-think-roadmap-02.png)

## 更新日志

## 声明

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

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