 当前图书最新荐购
关于我们
书单推荐 新书推荐 |
前端性能揭秘 
定 价：100 元
9 7 4 8 4 7 2 1 4 2 0 1 7 读者对象:初级和高级前端工程师，或有兴趣了解 Web 性能的工程师。 
本书主要介绍用于指导前端性能优化工作的通用优化方法，从网络、浏览器、构建工具、跨端技术和CDN 等方面介绍不同技术、系统对性能的影响，同时帮助读者了解如何有效优化性能。本书从性能的度量、分析和实验这三个方面开始介绍。首先介绍性能优化的一些通用方法，然后将性能作为一个切面帮助读者了解与前端技术栈和性能有关的知识。从这个切面观察，这些系统的工作原理等知识被赋予了另外一层意义，通过这种联系把工作原理真正运用到工作中，在性能优化方面发挥重要作用。本书面向的读者为具有一定经验的 Web 开发工程师，以及对前端开发或 Web 开发有一定了解的开发人员。同时，假定读者能够进行简单的网页开发，并且具备相关的基础知识。
佘锦鑫，花名当轩。毕业于江南大学理学院，阿里巴巴前前端技术专家，曾负责Alibaba.com海外版性能优化，讲师、开源爱好者。现就职于网易云音乐，对Web性能、跨端、可视化搭建等领域有较深入的理解。
第 1 篇 从 Vite 起步
第 1 章 从实践开始 ··························.2 1.1 Hello World ···························.2 现在开始 ··························.2 使用 DevTools ····················.4 第一个优化 ·······················.6 1.2 现实开发的例子 ······················.7 设置开发环境 ·····················.7 Vite ································.8 vite build ··························.9 进一步优化 ·····················.11 引入 antd ························.11 按需引入 ························.13 动态 import ·····················.14 1.3 小结 ································.15 第 2 篇 性能优化方法论 第 2 章 度量 ································.18 2.1 科学的方法 ·························.19 从一个客户反馈说起 ··········.19 不度量性能，就无法优化 性能 ······························.19 真实的用户端性能 ·············.20 2.2 初识 Performance API ··············.21 performance.now()方法 ·········.21 构建首屏指标 ···················.23 2.3 均值、分位数和秒开率 ············.23 均值 ·····························.24 分位数 ···························.25 秒开率 ···························.26 如何选择合适的统计指标 ·····.26 2.4 度量首屏 ···························.27 FP ································.27 FCP ······························.27 FMP ·····························.28 如何度量 FMP ··················.28 选定并度量首屏 ················.30 2.5 度量流畅度 ·························.30 度量流畅度的指标 ·············.31 可视化工具 ·····················.31 用户端度量 ·····················.32 2.6 Core Web Vitals ····················.34 LCP ······························.34 FID ·······························.38 CLS ······························.39 2.6 小结 ·································.41 第 3 章 分析 ································.42 3.1 分析方法 ···························.43 确定目标 ························.43 收集数据 ························.43 清洗数据 ························.44 统计值分析 ·····················.44 时序分析 ························.45 维度分析 ························.46 相关性分析 ·····················.48 3.2 常用的过程指标 ····················.48 TTFB ····························.49 DOMReady 和 Load ············.50 3.3 Performance API 详解 ··············.51 Navigation Timing API ·········.51 Peformance Entry API ··········.53 Resource Timing ················.54 Navigation Timing Level 2 ·····.55 Paint Timing ····················.56 User Timing ·····················.56 3.4 分阶段性能分析 ···················.58 常用的指标 ·····················.58 其他值得分析的指标 ··········.59 3.5 小结 ································.59 第 4 章 实验 ································.60 4.1 优化不是照搬军规 ·················.61 时代在发展 ·····················.61 优化的木桶效应明显 ··········.62 用户环境差异大 ················.62 性能实验 ························.62 4.2 用实验验证优化 ···················.63 混沌问题 ························.64 设计实验 ························.64 分桶 ·····························.65 上报和分析数据 ················.68 A/B Test 背后的数学 ···········.68 结论不重要，重要的是方法 ··.69 4.3 用实验改进优化 ···················.69 建立模型 ························.69 实验修正 ························.70 4.4 小结 ································.71 第 5 章 工具 ································.72 5.1 DevTools ···························.73 Network 面板 ···················.73 Performance 面板 ···············.76 5.2 WebPageTest ·······················.81 发起测试 ························.82 报告 ······························.83 Waterfall 视图 ··················.83 5.3 小结 ································.87 第 3 篇 网络协议与性能 第 6 章 TTFB 为什么这么长 ··············.90 6.1 TTFB 的合理值 ····················.91 精确定义 ························.92 RTT ······························.92 RTT 一般需要多久 ·············.93 TTFB 的构成····················.93 实验环境验证 ···················.94 6.2 如何优化 TTFB ····················.95 减少请求的传输量 ·············.96 减少服务器端的处理时间 ·····.96 减少 RTT ························.98 TTFB 的值越小越好吗 ·········.98 6.3 小结 ·································.99 第 7 章 建立连接为什么这么慢 ·········.100 7.1 建立连接应该耗时多久 ···········.101 TCP 协议 ·······················.101 建立连接需要多少个 RTT ····.101 抓包验证 ·······················.102 7.2 如何优化建立连接的耗时 ········.103 减少物理距离 ··················.103 preconnect ······················.103 复用连接 ·······················.103 域名收拢 ·······················.104 TCP Fast Open ·················.104 QUIC 和 HTTP/3 ··············.104 7.3 小结 ·······························.105 第 8 章 Fetch 之前浏览器在干什么 ····.106 8.1 重定向 ·····························.107 HTML 重定向 ·················.109 有哪些重定向 ·················.109 8.2 浏览器打开耗时 ··················.112 初始化标签页的时间 ·········.112 unload 的耗时 ··················.112 8.3 如何优化 beforeFetch 耗时 ·······.114 重定向逻辑前置 ···············.115 合并重定向 ····················.115 避免使用短链 ·················.116 使用 beforeFetch 度量和 分析 ····························.116 8.4 小结 ·······························.117 第 9 章 HTTPS 协议比 HTTP 协议 更慢吗 ····························.118 9.1 HTTPS 协议为什么安全 ··········.119 对称加密和非对称加密 ·······.119 SSL/TLS 的实现 ···············.120 SSL/TLS 握手 ·················.122 TLS False Start ·················.124 TLS 1.3 ·························.124 9.2 HTTPS 协议如何吊销证书 ········.125 CRL ·····························.125 OCSP ···························.126 OCSP Stapling ·················.126 浏览器支持的情况 ············.126 证书类型 ·······················.127 证书验证机制对性能的影响 ···.129 9.3 HTTPS 协议更慢吗 ···············.129 确保证书链完整 ···············.129 启用 TLS 1.3 ···················.129 不滥用 EV 证书 ···············.130 开启 OSCP Stapling ···········.130 9.4 小结 ································.130 第 10 章 HTTP/2、HTTP/3 和性能 ·····.131 10.1 HTTP/2 和性能 ···················.131 连接复用为什么不生效 ······.131 头部压缩对我们有什么影响 ··.137 为什么没有广泛使用 Server Push ···························.140 10.2 为什么还需要 HTTP/3 ···········.144 HTTP/2 存在什么问题 ·······.145 HTTP/3 如何解决问题 ·······.146 10.3 小结 ······························.148 第 11 章 压缩和缓存 ·····················.150 11.1 传输速度和压缩速度如何兼得 ···.151 Content-Encoding ·············.151 gzip 压缩和 br 压缩 ··········.152 实时压缩 ······················.152 离线压缩 ······················.153 如何优化传输性能 ···········.154 11.2 HTTP 缓存什么时候会失效 ·····.154 缓存不仅仅是浏览器的 事情 ···························.154 缓存 Header ···················.154 11.3 小结 ······························.157 第 4 篇 浏览器与性能 第 12 章 浏览器和性能 ···················.160 12.1 第一次渲染时都发生了什么 ····.161 最小的渲染路径 ··············.162 尽快返回 HTML ··············.167 减少资源的阻塞 ··············.167 12.2 为什么 DOM 操作很慢 ··········.168 帧 ··································.168 重排 ·······························.169 重绘 ·······························.170 访问 DOM 属性 ················.170 如何优化 DOM 操作 ··········.171 12.3 小结 ······························.172 第 13 章 异步任务和性能 ················.173 13.1 事件循环机制 ····················.174 为什么要有事件循环 ········.174 多线程阻塞模型 ··············.174 事件循环 ······················.175 13.2 宏任务和微任务 ·················.176 13.3 Promise 的 polyfill 性能 ··········.178 如何正确实现 Promise ·······.178 13.4 requestAnimationFrame ··········.180 13.5 小结 ······························.181 第 14 章 内存为什么会影响性能 ········.182 14.1 内存 ······························.182 内存管理 ·························.183 14.2 内存泄漏 ·························.188 内存泄漏和性能 ··············.188 常见的导致内存泄漏的原因 ··.188 内存泄漏问题的诊断工具 ···.189 14.3 小结 ······························.191 第 15 章 使用 ServiceWorker 改善 性能 ······························.193 15.1 ServiceWorker 概述 ··············.194 AppCache······················.194 ServiceWorker·················.195 ServiceWorker 能做什么 ·····.195 15.2 使用 ServiceWorker 进行缓存 ···.196 Cache API ·····················.196 IndexDB ·······················.201 控制缓存的 Cache Key ······.201 更加灵活的缓存更新策略 ···.203 15.3 API 提前加载 ····················.204 15.4 ServiceWorker 冷启动 ···········.205 开启 Navigation Preload ·····.206 消费 Navigation Preload ·····.206 15.5 小结 ······························.207 第 16 章 字体对性能的影响 ·············.208 16.1 字体导致的布局偏移 ············.208 如何定位布局偏移 ···········.208 16.2 如何避免字体带来的布局偏移 ···.210 如何尽快加载字体 ···········.211 字体文件的格式 ··············.211 字体的加载 ···················.212 预加载字体 ···················.213 裁剪字体的大小 ··············.214 16.3 小结 ······························.214 第 5 篇 前端工程与性能 第 17 章 构建工具和性能 ················.218 17.1 为什么需要打包 ·················.219 CommonJS ····················.220 AMD ···························.220 CMD ···························.221 异步模块加载器 ··············.222 依赖加载优化 ················.223 模块打包器 ···················.224 ES Module ····················.225 17.2 构建工具可以做什么 ············.226 构建工具和构建优化 ········.227 为什么要优化打包体积 ·····.227 Bundle 分析 ···················.228 Tree Shaking ··················.229 Scope Hoisting ················.231 Code Splitting ·················.233 代码压缩 ······················.234 Vite 和 Bundleless ············.237 17.3 小结 ······························.237 第 18 章 服务器端渲染和性能 ··········.239 18.1 SSR 和同构 ······················.241 18.2 SSR 的性能优化 ·················.241 缓存 ·······························.242 数据预取 ·························.245 按需渲染 ·························.245 流式渲染 ·························.246 18.3 小结 ······························.246 第 6 篇 跨端技术与 CDN 第 19 章 WebView 和性能 ···············.248 19.1 WebView 和 Native 的区别 ······.249 LayoutInflater ·················.249 加载 XML 的具体过程 ······.250 Measure ························.250 Layout ·························.251 Paint ···························.252 Surface ·························.253 SurfaceFlinger ·················.253 差异 ····························.253 19.2 WebView 的通信成本 ···········.254 JavaScript 调用 Native ········.254 Native 调用 JavaScript ········.258 双向通信 ······················.258 通信对性能的影响 ···········.259 减少通信数据量 ··············.259 避免频繁通信 ·················.259 19.3 React Native 的懒加载有何 不同 ······························.260 Web 实现 ·····················.260 基于滚动容器的懒加载 ·····.260 基于位置获取的懒加载 ·····.262 虚拟列表 ······················.263 19.4 React Native 如何减小打包 体积 ······························.265 Metro ··························.265 度量 ···························.266 分析 ···························.266 手动 Tree Shaking ············.267 利用 Babel 插件进行优化 ···.269 体积和性能的关系 ···········.271 19.5 API 并行请求 ····················.271 发起请求 ·························.272 请求拦截 ·························.273 一致性检验 ······················.274 命中率分析 ······················.274 19.6 小结 ······························.274 第 20 章 CDN 和性能 ····················.275 20.1 什么是 CDN ······················.275 解析 ·······························.276 边缘节点 ·························.276 回源 ·······························.277 缓存策略 ·························.277 20.2 如何提升缓存命中率 ············.278 如何在端侧统计缓存命中的 情况 ····························.278 减少缓存分裂 ·················.279 缓存忽略动态参数 ···········.279 归一化 Vary Header ··········.280 长效缓存 ······················.280 20.3 动态加速 ·························.281 海外加速 ·························.282 连接复用 ·························.282 客户端连接复用 ················.282 HTTPS 优化 ·····················.283 动静分离 ·························.283 压缩 ·······························.284 什么场景适合使用动态加速 ··.284 20.4 自动 polyfill ······················.284 什么是 polyfill ················.284 Polyfill.io ······················.285 实现原理 ······················.287 20.5 边缘计算和性能 ·················.288 CDN 的可编程功能 ··········.288 Hello World ···················.289 自定义 Cache Key ············.289 前置重定向 ···················.290 流式渲染 ······················.290 20.6 小结 ······························.291
你还可能感兴趣
我要评论
|
