前言

为什么要写这本书

随着前端技术的不断发展，Web应用所能承载的业务形态从包含动画、视频等丰富内容的信息展示，到逐渐接近原生应用的交互体验，已经变得越来越多样化、复杂化。这就要求优秀的Web应用不仅能够为用户提供满足需求的功能，同时还能够应对随之带来的性能挑战。

那么对一位合格的前端开发工程师来说，可以完成业务功能的需求开发只是基本要求，能够及时、准确地发现系统中存在的性能瓶颈，并给出合适的解决方案，这才是区分初、中级前端工程师与高级前端工程师的重要依据。

要具备这样的能力，除了平时通过性能调优去积累实践经验，构筑起关于前端性能的知识体系也尤为重要，在面对具体的性能问题时，能够知其然并知其所以然，才可以做到有的放矢，不至于出现优化了页面渲染性能反而降低了首屏加载速度的问题。

目前图书市场上关于前端性能优化方面的图书不少，但由于前端性能涉及知识面广泛，所以多数图书都只关注可能导致性能问题的部分领域，或偏重于优化实践的场景总结，而对于知识体系的搭建多有疏漏。

本书以Web前端性能入手，首先通过梳理页面生命周期进行知识体系的梳理与总结，然后从八个方面对性能优化进行详细深入且结合实践的讲解，最后以性能检测方法的介绍作为回顾和总结。本书不但可以帮助读者构建性能分析的知识体系，而且可以通过实践案例帮助读者提高分析与优化性能的实战能力。

本书有何特色

1. 注重性能优化知识体系的梳理和总结

为了让读者在面对性能问题时，能做到举一反三、触类旁通、知其然并知其所以然，本书对前端涉及性能优化的知识体系进行了全面的梳理与总结。

2. 涵盖了前端页面生命周期中各种影响性能的方面

本书以前端页面的生命周期为框架，涵盖内容包括图像优化、资源加载优化、前端代码编写优化、构建过程优化、客户端渲染优化、服务器端渲染优化、本地存储优化、缓存优化等方面。

3. 对各个性能影响方面的讲解做到了理论联系实践

本书针对八个影响前端性能的优化方面，以独立章节进行了详细介绍，不但包括细致的理论分析，而且也结合了实际案例，帮助读者更好地理解技术知识点，知道在实践中如何运用这些技术。

4. 八大性能优化方面，章节独立、工具性强

本书拆分出的八个影响前端性能的优化方面，在内容上具有一定的模块独立性。有性能优化经验的前端工程师，不仅可针对自身所面对的具体性能问题选择对应章节进行学习，也可在日后的工作实践中随时查阅和参考这些内容。

5. 突出性能检测实践

对性能优化工作来说，最怕的就是为了优化而优化，这样极有可能花费了大量的精力，还不一定能得到理想的性能优化收益。本书最后一章以性能检测为主旨，介绍了该如何恰当选取性能检测工具，以及如何利用它们来辅助进行性能检测与优化，最终达到最大化优化收益的效果。

6. 提供完善的技术支持和售后服务

本书提供了专门的技术支持邮箱：webperformance2020@163.com。读者在阅读本书过程中如有疑问可以通过该邮箱和作者联系。

本书内容及知识体系

第1篇　前端性能优化概述（第1～2章）

本篇介绍了性能优化是什么，以及前端页面的生命周期。其主要内容包括进行性能优化的起因、性能因素会带来哪些影响、评估性能的模型、性能优化的步骤及前端页面生命周期中的步骤等。

第2篇　典型模块的性能优化（第3～10章）

本篇介绍了前端性能优化中所涉及的八个典型模块的优化。其主要内容包括图像的优化、资源加载的优化、前端代码考虑性能的最佳实践、构建过程的优化、客户端渲染的优化、服务器端渲染、浏览器本地存储所带来的优化、利用缓存提升性能等。

第3篇　前端性能检测实践（第11章）

本篇介绍了前端性能检测中常用的一些检测工具及使用方法。其主要内容包括Lighthouse、PageSpeed Insight、WEBPAGETEST及Chrome开发者工具与相关的各个面板，诸如任务管理器、Network面板、Coverage代码执行覆盖率面板、Memory内存占用面板、Performance和Performance monitor性能检测面板。

适合阅读本书的读者

❑ 前端开发工程师。

❑ 希望完善关于前端性能知识体系的人员。

❑ 需要一本案头必备查询前端性能优化手册的人员。

阅读本书的建议

❑ 对前端性能优化的初学者，建议从第1章开始顺次阅读。

❑ 有一定性能优化经验的读者，可以根据实际情况选择具体模块章节进行针对性学习。

❑ 本书部分章节内容需要读者具备一定的JavaScript编程经验、前端构建工具的基本使用能力、现代常用前端框架的使用经验（如Vue和React），否则在阅读上会有一定的障碍。