前端性能揭秘

书籍作者：佘锦鑫	ISBN：9787121442407
书籍语言：简体中文	连载状态：全集
电子书格式：pdf,txt,epub,mobi,azw3	下载次数：8368
创建日期：2023-04-27	发布日期：2023-04-27
运行环境：PC/Windows/Linux/Mac/IOS/iPhone/iPad/Kindle/Android/安卓/平板

内容简介

本书主要介绍用于指导前端性能优化工作的通用优化方法，从网络、浏览器、构建工具、跨端技术和CDN 等方面介绍不同技术、系统对性能的影响，同时帮助读者了解如何有效优化性能。本书从性能的度量、分析和实验这三个方面开始介绍。首先介绍性能优化的一些通用方法，然后将性能作为一个切面帮助读者了解与前端技术栈和性能有关的知识。从这个切面观察，这些系统的工作原理等知识被赋予了另外一层意义，通过这种联系把工作原理真正运用到工作中，在性能优化方面发挥重要作用。本书面向的读者为具有一定经验的 Web 开发工程师，以及对前端开发或 Web 开发有一定了解的开发人员。同时，假定读者能够进行简单的网页开发，并且具备相关的基础知识。

作者简介

佘锦鑫，花名当轩。毕业于江南大学理学院，阿里巴巴前前端技术专家，曾负责阿里海外版性能优化，讲师、开源爱好者。现就职于网易云音乐，对Web性能、跨端、可视化搭建等领域有较深入的理解。

编辑推荐

1.前端老鸟也不甚了了的前端性能优化硬核知识。

2.性能是前端技术挑战巅峰与工程师追求的极限。

3.涉及底层网络到上层框架值得长期投入众课题。

4.三位一体思路：性能度量+工具分析+优化解决。

5.从用户体验角度理解浏览器处理页面生命流程。

6.剖析数据收集分析、各项性能指标定义及优化。

前言

推荐序

对于工程师来说，性能永远是绕不开的话题。目前硬件和网络都在飞速发展，然而新的软件和交互形式在发挥想象力的同时也在最大化地发挥硬件和网络的潜力，从长远来看性能仍然是工程师关心的话题。

对于用户来说，性能同样是用户体验的核心与基础，大部分用户可能并不理解性能这个概念，但他们永远想要启动更快、响应更迅速的软件。

相比其他工程师，前端工程师是直接和用户打交道的一群人，直接对用户机器上运行的软件体验负责。当讨论后端性能时，在大部分情况下讨论的是吞吐量、并发数和响应时间等，关心的是软件运行在服务器上的性能表现。当讨论前端性能时，在更多情况下讨论的是用户感受到的白屏时间、延迟和卡顿等。这种差异使前端性能和用户体验的关联更加密切，也赋予了前端工程师独特的使命。

想要解决性能问题，开发人员需要分析现状、提出设想、进行验证，而这些都需要开发人员对相关系统的知识有足够的了解。本书从两个方面介绍了性能领域，前面介绍了“度量、分析、实验”的方法论，后面则以性能为切面介绍了前端生态与性能有关的方方面面。

读者在阅读本书时可以按照自己的需要决定阅读顺序，但至少先完整地阅读方法论部分。相比具体的知识点，方法论能为真正的性能优化工作提供通用化的思路，性能优化作为一个系统化的工程需要行之有效的思路，而不仅仅是照搬点状的知识点。

而以性能为切面也可以为读者看待前端生态提供一个不一样的视角，很多基础知识看起来和日常工作似乎没有太多的联系，但从性能的视角可以看到这些协议、工具、方案背后的思考和对实际应用的切实影响。性能并非孤立的技术领域，而是和系统中的每个环节都息息相关，为读者更深入地理解系统提供了视角。

写前端性能优化对作者有很高的要求，要有深度实践的经验并形成一定的方法论。当轩是资深开源开发人员，曾在第十五届D2前端技术论坛担任讲师。希望本书能够给广大读者带来醍醐灌顶式的帮助。

——Node.js布道者，《狼书》作者，桑世龙（花名狼叔）

前言

性能对于开发人员来说是一个经久不衰的话题，也是用户体验的重要因素。当打开一个页面或 App 时，无论你是在寻找商品、阅读高质量的新闻，还是在看有趣的短视频，都不愿意等待。

很多人可能有耐心花费一两个小时在一家火锅店门口排队，但几乎没有人愿意等 30s 去加载一个短视频。事实上，对于大多数的 App 或网站来说，别说是 30s，即使是 3s 也足以让大量用户放弃等待转而去做其他的事情。

Google 发现，如果页面加载时间超过 3s，53%的移动网站访问活动将难以为继。

有人可能会问，如今计算机和手机的性能都在飞速发展，性能优化还重要吗？5G 时代已经来临，无处不在的高速网络是否已经让我们不需要再那么在意性能问题？

其实，在 Web 领域，安迪-比尔定律仍然成立。

安迪-比尔定律源于“Andy gives, Bill takes away.”。Andy 指的是 Intel 原 CEO 安迪·格鲁夫，Bill 则是 Microsoft 原 CEO 比尔·盖茨。这句话的意思是，Intel 一旦向市场推广了一种新型芯片，Microsoft 就会及时升级自己的软件产品，以匹配新型芯片的高性能。硬件提高的性能，很快就被软件消耗掉了。

对于 Web 领域来说，网络和终端设备的性能确实在飞速发展。然而，几十年来 Web 技术也变得越来越复杂，在网络上传输的不再是一个简单的页面。Web 技术本身也在不停地更新换代，传输页面的体积、执行脚本的复杂度等都在不断增加。

让我们回到万维网（World Wide Web）诞生的 20 世纪 90 年代，第一个网页浏览器WorldWideWeb 仅支持 HTML 格式的图片、文字和超链接。

经过几十年的发展，在网络上传输的内容越来越丰富，使用浏览器打开的不再是一个仅包含图片、文字和超链接的页面，而是高清流媒体、实时网络直播，甚至是直接在浏览器中运行的专业协同应用。

可以预见的是，这种复杂度会日益增加，越来越多原来只能在桌面平台上运行的大型软件也出现在了 Web 平台上，以借助 Web 平台易于传播、跨平台等特性，充分发挥协作互通的优势。例如，如图 0-2 所示的设计协同工具 Figma，就可以完全运行在浏览器中，而以往这种专业的设计工具只能作为桌面软件使用。

从 2011 年到 2020 年，桌面端和移动端的页面传输字节数（加载完成一个页面需要传输的数据量）逐年上涨，分别约增加了 329%和 1178%。

同时，随着网络基础建设的不断更新换代，更多原来受限于基础设施无法广泛满足的需求大量涌现。例如，近几年短视频的兴起，很大程度上就是因为大多数用户的网络能够在可以接受的时间内加载完视频。用户随时看新鲜且有趣视频的需求一直存在，只是之前的硬件条件难以满足用户的需求。

这就是安迪-比尔定律在 Web 领域没有失效的原因。可以想象，随着未来网络状况的进一步改善，又会有新的媒体和应用形式消耗提升的网络传输能力。它既可能是基于 AR、VR 的视频会议、协作办公，也可能是更加复杂、支持更多人参与协作的办公协同工具。尽管提供硬件和软件的可能不再是 Intel 和 Microsoft，但只要人们对于新功能和体验的追求一直存在，性能优化就是经久不衰的话题。

1.性能优化的魅力

上面从现实的角度出发解释了性能优化的重要性，可见重视性能优化是有客观基础的。

其实，性能优化本身就具备无可比拟的魅力。

很多人都听过斯坦门茨画一条线 1 万美元的故事，有些人说这个故事反映了知识就是财富，有些人说这个故事反映了细节决定成败。故事的真实性已经无法考证，但是笔者非常喜欢这个故事。

故事是下面这样的。美国福特公司曾经有一台电机出现故障，导致整个车间都不能运转。福特公司请来很多专家检查，就是找不到问题在哪里。于是请来斯坦门茨，斯坦门茨在电机旁聚精会神地听了 3 天，又要了梯子，爬上爬下忙了很久。最后他在电机的一个部位用粉笔画了一条线，写下了“这里的线圈多绕了 16 圈”。福特公司按图索骥解决了故障。

在平均月薪为 5 美元的当时，斯坦门茨索要了 1 万美元的酬劳：画一条线，1 美元；知道在哪儿画线，9999 美元。

如果说工程师最大的快乐来自创造，那么笔者认为第二大的快乐来自对精密系统的理解。从中不仅可以领略前人解决问题的设计方案所蕴含的智慧，还能享受抽丝剥茧最终精准找到问题的成就感。

性能优化就是一个典型场景，我们要做的是理解复杂系统并从中找到性能问题的关键所在。有时我们甚至能根据问题的表现和对系统的理解，在没有直接发现具体问题时就推测出出现问题的真正原因。例如，海王星先通过数学推算被发现再被人们实际观测到的过程就充满了预言的魔力。

海王星的发现史如下。

?? 1821 年天王星（不是海王星）的轨道表发布，但是观测表明轨道存在偏差，于是有人猜测其受到附近一个巨大天体的扰动。

?? 1846 年，通过数学方法推导出了海王星的轨道，之后开始搜寻，并于当年 9 月 23 日发现海王星。

2.性能优化 = 分析方法 + 技术原理

自工作以来，笔者有幸接触过不同场景的性能优化，包括面向计算机的和面向手机的、纯 Web 技术的和 Weex/React Native 等技术的，以及国内的和海外的。

每次接触到一个新场景，笔者都发现上一个场景的经验很难直接发挥作用，了解性能优化的读者大多听说过“雅虎三十五条优化军规”，里面总结了性能优化需要遵循的一些规则，如合并请求等。在大多数情况下，直接套用这些规则并不会为页面带来非常明显的性能收益。

但是，其背后的分析思路总是相似的，能够用来找到一套行之有效的方法帮助我们一步步接近性能目标。相比于记住正确但未必有效的具体规则，掌握这些通用的方法能让我们在复杂的生产环境中找到正确的道路。

因此，本书把“度量”、“分析”和“实验”部分放在开头部分，把方法放在具体的技术细节之前，用案例和思考相结合的方式建立面对性能问题时的解决思路，有了方法的指导，我们在遇到具体问题的时候才能进行具体分析。

如果说分析方法是解决性能问题的指南针，那么对技术原理和系统的理解就是照明灯，只有方向但看不到脚下的路是无法前行的。优化一个系统的性能也一样，即使分析出这个系统在某个阶段的性能存在问题，如果不理解系统背后的运行原理，就好像知道方向却看不见路，只能摸黑前进。

笔者在优化过程中常常根据一些有趣的知识来梳理思路，所以在介绍如何做性能优化的同时，也以性能为引子来介绍网络、浏览器、前端技术栈等的技术原理。其中的很多原理读者可能从其他地方了解过，但是带着对性能的疑问阅读本书，可以帮助读者了解更多前人为了更好的体验和性能在这些复杂系统中付出的心血。

3.关于本书

比较幸运的是，自工作以来笔者在不同的场景一直面临各种性能挑战。刚开始只是打地鼠式地逐个解决问题，在凭着猜测和主观感受进行简单的优化后就认为已经解决了性能问题。随着面临的挑战越来越多，笔者不得不思考如何科学地衡量当前的性能状况、如何科学地分析性能存在的问题和优化方向，以及如何科学地验证优化的效果。

在优化过程中，性能作为一个引子贯穿整个与 Web 开发相关的各种系统及这些系统的原理，笔者认为这些平时看起来并没有直接作用的理论知识其实可以切实帮助我们改善用户体验，并且改善的效果直接反映为数字指标。

笔者撰写本书一方面是对过去几年的工作进行总结，另一方面也希望能给想要提高用户端性能、改善用户体验但是不知道应该从哪里开始的读者一些启发。对于想在 Web 技术上更进一步的读者来说，性能也是一个非常有趣的话题和线索。

性能是一个涉及甚广且技术细节较多的话题，笔者在写作过程中尽可能搜集相关标准、资料来验证书中的细节。由于笔者的经验和视野有限，加上部分技术细节存在时效性问题，因此书中难免存在局限和疏漏，如有可改进之处欢迎各位读者批评斧正。

前端性能揭秘

内容简介

作者简介

编辑推荐

前言

目录