前端性能揭秘(博文视点出品)

前端性能揭秘(博文视点出品)

查阅电子书
手机扫码
  • 微信扫一扫

    关注微信公众号

因版权原因待上架

编辑推荐

本书虽名为前端性能揭秘,但涉及领域远远不止前端。系统性从性能的度量、分析、优化、防腐,抽丝剥茧般地娓娓道来——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


前端性能揭秘(博文视点出品)是2022年由电子工业出版社出版,作者佘锦鑫(当轩)。

得书感谢您对《前端性能揭秘(博文视点出品)》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。

购买这本书

你可能喜欢
从零开始搭建前端监控平台 电子书
本书共8章,第1章和第2章分别介绍搭建前端监控平台的必要性以及如何确定前端监控平台的功能,第3章介绍数据上报的方法,第4章介绍前端监控平台各功能模块的总体设计,第5章介绍相关数据处理工作,第6章和第7章分别介绍后端服务搭建和前端界面搭建,第8章介绍前端监控平台的具体使用场景。
JavaScript前端开发模块化教程 电子书
1.模块化的写作手法,突出实践动手能力,更符合学习要求。2.突出前端工程师职业能力培养3.融入jQueryUI和BootstrapUI组件开发模式4.直戳前端组件开发核心技术5.成果导向理念6.任务驱动教学
Android性能优化入门与实战 电子书
全面剖析Android App性能优化技术。
前端程序员面试笔试宝典 电子书
本书是一本前端程序员面试笔试的应试类用书,在内容上,除了讲解如何解答前端程序员面试笔试问题,还引入了相关知识点辅以说明,让读者能够更加容易理解。
Bootstrap Web前端开发技术(微课版) 电子书
本书系统介绍Bootstrap5的相关知识及其应用,知识全面、案例丰富、易学易用。本书共11章,内容可以归纳为4部分,即Bootstrap5的基本知识、弹性布局和栅格布局、组件和表单、实际网站的设计和实现;同时,本书还将Bootstrap5与之前的版本及DIV+CSS布局进行对比,从多个维度介绍基于Bootstrap5的Web前端开发技术的优势。此外,编者细致整理了本书所有案例的源码和素材资源,以