《前端性能揭秘》 - 佘锦鑫[当轩] - 电子工业出版社 - 香港大書城

	登入帳戶　 \|　訂單查詢　 \|　購物車/收銀台(0)　\|　在線留言板　 \|　付款方式　 \|　運費計算　 \|　聯絡我們　 \|　幫助中心　\|　加入書簽
		會員登入新用戶登記

HOME

新書上架

暢銷書架

好書推介

2023年度TOP

臺灣用戶

品種：超過100萬種各類書籍/音像和精品，正品正價，放心網購，悭钱省心

服務：香港／台灣／澳門／海外

送貨：速遞／郵局／服務站

新書上架：簡體書繁體書
暢銷書架：簡體書繁體書
好書推介：簡體書繁體書

『簡體書』前端性能揭秘

書城自編碼： 3792901
分類：簡體書→大陸圖書→計算機/網絡→计算机理论
作者：佘锦鑫[当轩]
國際書號(ISBN)： 9787121442407
出版社：电子工业出版社
出版日期： 2022-09-01

頁數/字數： /
書度/開本： 16开釘裝：平装

售價：HK$ 118.0

我要買件

** 我創建的書架 **
未登入.

新書推薦：

《爱琴海的光芒：千年古希腊文明》
售價：HK$ 199.4

《不被他人左右：基于阿德勒心理学的无压力工作法》
售價：HK$ 66.1

《 SDGSAT-1卫星热红外影像图集》
售價：HK$ 445.8

《股市趋势技术分析（原书第11版）》
售價：HK$ 221.8

《汉匈战争全史》
售價：HK$ 99.7

《恶的哲学研究（社会思想丛书）》
售價：HK$ 109.8

《不止江湖》
售價：HK$ 98.6

《天才留步！——从文艺复兴到新艺术运动（一本关于艺术天才的鲜活故事集，聚焦艺术史的高光时刻！）》
售價：HK$ 154.6

建議一齊購買：

HK$ 111.3
《Power BI数据可视化从入门到实战》

HK$ 122.5
《数据科学——它的内涵、方法、意义与发展》

HK$ 120.0
《非线性系统控制设计与分析》

HK$ 99.1
《Grasshopper参数化非线性设计》

HK$ 154.8
《优化理论与实用算法》

HK$ 104.3
《计算机科学引论（2021英文精编版）》

編輯推薦：

本书虽名为前端性能揭秘，但涉及领域远远不止前端。系统性从性能的度量、分析、优化、防腐，抽丝剥茧般地娓娓道来——
1.前端老鸟也不甚了了的前端性能优化硬核知识。
2.性能是前端技术挑战巅峰与工程师追求的极限。
3.涉及底层网络到上层框架值得长期投入众课题。
4.三位一体思路：性能度量工具分析优化解决。
5.从用户体验角度理解浏览器处理页面生命流程。
6.剖析数据收集分析、各项性能指标定义及优化。
本书既有大量理论基础，也有扎实实战佐证，值得一读。

內容簡介：

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

關於作者：

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

第 1 篇从 Vite 起步
第 1 章从实践开始 ··························· 2
1.1 Hello World ···························· 2
1.2 现实开发的例子 ······················· 7
1.3 小结 ································· 15
第 2 篇性能优化方法论
第 2 章度量 ································· 18
2.1 科学的方法 ·························· 19
2.2 初识 Performance API ··············· 21
2.3 均值、分位数和秒开率 ············· 23
2.4 度量首屏 ···························· 27
2.5 度量流畅度 ·························· 30
2.6 Core Web Vitals ····················· 34
2.6 小结 ·································· 41
第 3 章分析 ································· 42
3.1 分析方法 ···························· 43
3.2 常用的过程指标 ····················· 48
3.3 Performance API 详解 ··············· 51
3.4 分阶段性能分析 ···················· 58
3.5 小结 ································· 59
第 4 章实验 ································· 60
4.1 优化不是照搬军规 ·················· 61
4.2 用实验验证优化 ···················· 63
4.3 用实验改进优化 ···················· 69
4.4 小结 ································· 71
第 5 章工具 ································· 72
5.1 DevTools ···························· 73
5.2 WebPageTest ························ 81
5.3 小结 ································· 87
第 3 篇网络协议与性能
第 6 章 TTFB 为什么这么长 ··············· 90
6.1 TTFB 的合理值 ····················· 91
6.2 如何优化 TTFB ····················· 95
6.3 小结 ·································· 99
第 7 章建立连接为什么这么慢 ·········· 100
7.1 建立连接应该耗时多久 ············ 101
7.2 如何优化建立连接的耗时 ········· 103
7.3 小结 ································ 105
第 8 章 Fetch 之前浏览器在干什么 ····· 106
8.1 重定向 ······························ 107
8.2 浏览器打开耗时 ··················· 112
8.3 如何优化 beforeFetch 耗时 ········ 114
8.4 小结 ································ 117
第 9 章 HTTPS 协议比 HTTP 协议
9.1 HTTPS 协议为什么安全 ··········· 119
9.2 HTTPS 协议如何吊销证书 ········· 125
9.3 HTTPS 协议更慢吗 ················ 129
9.4 小结 ································· 130
第 10 章 HTTP/2、HTTP/3 和性能 ······ 131
10.1 HTTP/2 和性能 ···················· 131
10.2 为什么还需要 HTTP/3 ············ 144
10.3 小结 ······························· 148
第 11 章压缩和缓存 ······················ 150
11.1 传输速度和压缩速度如何兼得 ···· 151
11.2 HTTP 缓存什么时候会失效 ······ 154
11.3 小结 ······························· 157
第 4 篇浏览器与性能
第 12 章浏览器和性能 ···················· 160
12.1 第一次渲染时都发生了什么 ····· 161
12.2 为什么 DOM 操作很慢 ··········· 168
12.3 小结 ······························· 172
第 13 章异步任务和性能 ················· 173
13.1 事件循环机制 ····················· 174
13.2 宏任务和微任务 ·················· 176
13.3 Promise 的 polyfill 性能 ··········· 178
13.4 requestAnimationFrame ··········· 180
13.5 小结 ······························· 181
第 14 章内存为什么会影响性能 ········· 182
14.1 内存 ······························· 182
14.2 内存泄漏 ·························· 188
14.3 小结 ······························· 191
第 15 章使用 ServiceWorker 改善
15.1 ServiceWorker 概述 ··············· 194
15.2 使用 ServiceWorker 进行缓存 ···· 196
15.3 API 提前加载 ····················· 204
15.4 ServiceWorker 冷启动 ············ 205
15.5 小结 ······························· 207
第 16 章字体对性能的影响 ·············· 208
16.1 字体导致的布局偏移 ············· 208
16.2 如何避免字体带来的布局偏移 ···· 210
16.3 小结 ······························· 214
第 5 篇前端工程与性能
第 17 章构建工具和性能 ················· 218
17.1 为什么需要打包 ·················· 219
17.2 构建工具可以做什么 ············· 226
17.3 小结 ······························· 237
第 18 章服务器端渲染和性能 ··········· 239
18.1 SSR 和同构 ······················· 241
18.2 SSR 的性能优化 ·················· 241
18.3 小结 ······························· 246
第 6 篇跨端技术与 CDN
第 19 章 WebView 和性能 ················ 248
19.1 WebView 和 Native 的区别 ······· 249
19.2 WebView 的通信成本 ············ 254
19.3 React Native 的懒加载有何
19.4 React Native 如何减小打包
19.5 API 并行请求 ····················· 271
19.6 小结 ······························· 274
第 20 章 CDN 和性能 ····················· 275
20.1 什么是 CDN ······················· 275
20.2 如何提升缓存命中率 ············· 278
20.3 动态加速 ·························· 281
20.4 自动 polyfill ······················· 284
20.5 边缘计算和性能 ·················· 288
20.6 小结 ······························· 291

內容試閱：

推荐序
对于工程师来说，性能永远是绕不开的话题。目前硬件和网络都在飞速发展，然而新的软件和交互形式在发挥想象力的同时也在最大化地发挥硬件和网络的潜力，从长远来看性能仍然是工程师关心的话题。
对于用户来说，性能同样是用户体验的核心与基础，大部分用户可能并不理解性能这个概念，但他们永远想要启动更快、响应更迅速的软件。
相比其他工程师，前端工程师是直接和用户打交道的一群人，直接对用户机器上运行的软件体验负责。当讨论后端性能时，在大部分情况下讨论的是吞吐量、并发数和响应时间等，关心的是软件运行在服务器上的性能表现。当讨论前端性能时，在更多情况下讨论的是用户感受到的白屏时间、延迟和卡顿等。这种差异使前端性能和用户体验的关联更加密切，也赋予了前端工程师独特的使命。
想要解决性能问题，开发人员需要分析现状、提出设想、进行验证，而这些都需要开发人员对相关系统的知识有足够的了解。本书从两个方面介绍了性能领域，前面介绍了“度量、分析、实验”的方法论，后面则以性能为切面介绍了前端生态与性能有关的方方面面。
读者在阅读本书时可以按照自己的需要决定阅读顺序，但至少先完整地阅读方法论部分。相比具体的知识点，方法论能为真正的性能优化工作提供通用化的思路，性能优化作为一个系统化的工程需要行之有效的思路，而不仅仅是照搬点状的知识点。
而以性能为切面也可以为读者看待前端生态提供一个不一样的视角，很多基础知识看起来和日常工作似乎没有太多的联系，但从性能的视角可以看到这些协议、工具、方案背后的思考和对实际应用的切实影响。性能并非孤立的技术领域，而是和系统中的每个环节都息息相关，为读者更深入地理解系统提供了视角。
写前端性能优化对作者有很高的要求，要有深度实践的经验并形成一定的方法论。当轩是资深开源开发人员，曾在第十五届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 技术上更进一步的读者来说，性能也是一个非常有趣的话题和线索。
性能是一个涉及甚广且技术细节较多的话题，笔者在写作过程中尽可能搜集相关标准、资料来验证书中的细节。由于笔者的经验和视野有限，加上部分技术细节存在时效性问题，因此书中难免存在局限和疏漏，如有可改进之处欢迎各位读者批评斧正。

書城介紹　 \|　合作申請　\|　索要書目　 \|　新手入門　\|　聯絡方式　 \|　幫助中心　\|　找書說明　 \|　送貨方式　\|　付款方式	香港用户　 \|　台灣用户　\|　大陸用户　\|　海外用户

	megBook.com.hk
Copyright © 2013 - 2024 （香港）大書城有限公司　 All Rights Reserved.