引言

Web 性能优化是一个经久不衰的话题。借助 web.dev for China 中的一句话：网页性能似乎是一个小众主题，但实际上它既广泛又非常深入。鉴于 Web 性能课程作为一个学科的深度，至关重要的几点是：性能优化部分既简单易学又很有趣！且包含丰富的信息。

性能是前端领域关注度非常高的话题，页面性能的好坏会直接影响用户体验，前端工程师往往会对页面性能不断改进，这个改进过程就叫性能优化。

根据笔者理解总体上说，Web 的性能优化在两个方面，一方面是首页加载性能，另一方面是更新性能，从这两个指标看待性能优化很多问题都可以得到解决方案。再到具体细节上，性能优化可以从改变文件资源大小出发、可以从合理服务器部署出发、可以从浏览器内存管理出发、可以从优化线程出发、可以从优化 CSS 动画出发、可以从优化代码结构出发、也可以从优化加载算法出发等等，涉及到方方面面，是一个非常综合性的学科。

---

知识库特色

• 较为全面的性能优化知识: 涵盖性能分析、静态资源优化、渲染优化、网络优化等多个方面。
• 体验为主的学习方式: 不同于传统的理论讲解，本文档以实际操作为主，在每个页面中都会有优化体验的环节，你可以尽可能的破坏这个网站。
• 丰富的案例和工具: 每个页面都有相关的案例和工具，可以帮助你更好地理解和实践性能优化。
• 持续更新: 性能优化是一个不断发展的领域，本文档会持续更新，以保持内容的时效性和准确性。
• 适合初学者和进阶者: 无论你是初学者还是进阶者，都可以在本文档中找到适合自己的内容。

---

使用方法【尽可能破环】

为了能让读者能够体会到 Web 性能优化的重要性，我们在文档中插入了很多破环环节，你可以尝试破坏这些环节，看看会发生什么。 比如下面这几个按钮，你可以依次点击一下，看看会发生什么。

// 递归计算斐波那契数列，随着数列的增加，计算时间会指数级增加，当达到 45 时，页面甚至会崩溃。
const fibonacci = (n: number): number => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

在后面的章节中，我们将会介绍如何优化这种耗时的计算，使页面能够更加流畅地运行。

---

测试

---