一张Web性能优化参考图

Web 性能的重要性不言而喻：性能为何至关重要。

性能优化涉及的点比较多，我们经常能看到一些文章列举了多少条性能优化的点，但是这些优化手段的出发点是什么？怎么能有效地把它们串联起来，在实际项目中进行合理的运用呢？恩，官方文档 肯定是我们参考的依据，另外，思维导图也是个好东西。

【相关tag（性能优化 - github梳理）】：浏览器基础、性能指标与衡量、DevTool性能调试与实践、构建优化（构建工具、HTTP）、前端缓存、静态资源优化、编码优化、防抖和节流 等。

嗨，送你一张Web性能优化地图 这篇文章，也对性能优化的几个方面进行了总结分类，可以看到很多相似点。

纸上得来终觉浅，绝知此事要躬行。当我们有了理论体系之后，接下来要做的就是随时思考如何将理论应用到实践中，比如我们可以利用 webpack 来进行构建优化，就能解决大部分的性能问题，然后就是平常在编码层面的一些优化。

当我们有了知识体系之后，就会跟以往看到一个理论然后照做的方式不同，我们会知道为什么会产生性能问题，然后有针对性的去改进，而不是做一些微优化。

知识体系很重要，要不然会迷失在零散碎片的海洋中。

往期文章：

浏览器渲染优化
我只是想弄懂缓存而已~
使用Webpack4优化Web性能

持续搜罗性能优化好文：

• 性能优化——掘金收藏列表

♣ 渲染优化

• 网络性能管理详解 - 阮一峰的网络日志
• 你不知道的浏览器页面渲染机制

♣ React优化

• 21 项优化 React App 性能的技术

♣ 零散优化

• 前端性能优化的常用手段

♣ 工具&量化

• PageSpeed Insights 规则
• 项目优化却体现不出自己的价值？