很多人可能有耐心花费一两个小时在一家火锅店门口排队,但几乎没有人愿意等30s去加载一个短视频。

事实上,对于大多数的 App 或网站来说,别说是30s,即使是3s也足以让大量用户放弃等待转而去做其他的事情。

别想了,这本前端性能秘籍,你铁定需要!_网络

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

性能对于开发人员来说是一个经久不衰的话题,也是用户体验的重要因素。

有人可能会问:

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

这就要从 Web 领域一大性能原理——安迪-比尔定律说起。

1

安迪-比尔定律

安迪-比尔定律

安迪-比尔定律源于“Andy gives, Bill takes away.”

Andy 指的是 Intel 原 CEO 安迪·格鲁夫,Bill 则是 Microsoft 原 CEO 比尔·盖茨。

这句话的意思是,Intel 一旦向市场推广了一种新型芯片,Microsoft 就会及时升级自己的软件产品,以匹配新型芯片的高性能。

硬件提高的性能,很快就被软件消耗掉了。

别想了,这本前端性能秘籍,你铁定需要!_人工智能_02

对于 Web 领域来说,网络和终端设备的性能确实在飞速发展。然而,几十年来 Web 技术也变得越来越复杂,在网络上传输的不再是一个简单的页面。

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

经过几十年的发展,在网络上传输的内容越来越丰富,使用浏览器打开的是高清流媒体、实时网络直播,甚至是直接在浏览器中运行的专业协同应用。

可以预见的是,越来越多原来只能在桌面平台上运行的大型软件也出现在了 Web 平台上,以借助 Web 平台易于传播、跨平台等特性,充分发挥协作互通的优势。

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

随着网络基础建设的不断更新换代,更多原来受限于基础设施无法广泛满足的需求大量涌现。例如,近几年短视频的兴起,很大程度上就是因为大多数用户的网络能够在可以接受的时间内加载完视频。

这就是安迪-比尔定律,可以想象,随着未来网络状况的进一步改善,又会有新的媒体和应用形式消耗提升的网络传输能力。

尽管提供硬件和软件的可能不再是 Intel 和 Microsoft,但只要人们对于新功能和体验的追求一直存在,性能优化就是经久不衰的话题。

2

性能优化的魅力

很多人都听过斯坦门茨画一条线 1 万美元的故事,故事是这样的:

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

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

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

性能优化就是一个典型场景,要做的是理解复杂系统并从中找到性能问题的关键所在。有时甚至能根据问题的表现和对系统的理解,在没有直接发现具体问题时就推测出现问题的真正原因,整个过程充满了预言的魔力。

3

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

不同场景的性能优化经验不同,面向计算机的和面向手机的、纯 Web 技术的和 Weex/React Native 等技术的,以及国内的和海外的,上一个场景的经验很难对下一个场景直接发挥作用。

了解性能优化的读者大多听说过“雅虎三十五条优化军规”,里面总结了性能优化需要遵循的一些规则,如合并请求等。但在大多数情况下,直接套用这些规则并不会为页面带来非常明显的性能收益。

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

如果说分析方法是解决性能问题的指南针,那么对技术原理和系统的理解就是照明灯,只有方向但看不到脚下的路是无法前行的。

优化一个系统的性能也一样,分析出这个系统在某个阶段的性能存在问题,却不理解系统背后的运行原理,就好像知道方向却看不见路,只能摸黑前进。

因此,方法与技术原理结合才是性能优化的制胜法宝。

《前端性能揭秘》就以此为原则给了一套通用的解决方案,力求授人以渔而非授人以鱼。

别想了,这本前端性能秘籍,你铁定需要!_编程语言_03

内容简介

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

本书分为两个部分:

  • 如何系统地进行性能优化;
  • 以性能为切面了解前端生态:网络协议、浏览器、构建工具、跨端、CDN 等等。

虽然名为前端性能揭秘,但涉及领域远远不止前端。全书系统性从性能的度量、分析、优化、防腐,抽丝剥茧般地娓娓道来,既有大量理论基础,也有扎实实战佐证,值得一读。

别想了,这本前端性能秘籍,你铁定需要!_人工智能_04

作者简介

别想了,这本前端性能秘籍,你铁定需要!_编程语言_05

佘锦鑫(花名当轩)

毕业于江南大学理学院,阿里巴巴前前端技术专家,曾负责Alibaba.com海外版性能优化,讲师、开源爱好者。

现就职于网易云音乐,对Web性能、跨端、可视化搭建等领域有较深入的理解。

精彩书评

当轩的这本书介绍了从“度量、分析、实验”的方法论到前端生态有关性能的方方面面,是在深度实践中沉淀出的方法论和知识。当轩曾是我在阿里巴巴的同事,资深开源开发人员,曾在第十五届D2前端技术论坛担任讲师。希望这本书能够给广大读者带来醍醐灌顶式的帮助,诚意力荐。