web性能实战

出版者:人民邮电出版社

作者:【美】杰里米.瓦格纳

页数:324

译者:张俊达

价格:99.00元

装帧:平装

isbn号码:9787115538321

丛书系列:图灵程序设计丛书·Web开发系列

具体描述

对于网站来说，精巧的功能、时尚的设计和良好的营销策略固然重要，但如果访问者认为网站速度慢，那么它依然是失败的。由于网络环境不可预测，而且现在的网站比以往任何时候都庞大，所以需要通过提升速度来在竞争中脱颖而出。

本书是创建快速网站的指南，指导你如何以正确的方式创建高性能网站。书中介绍了如何加快向用户交付站点资源的速度、提高渲染速度、减少网站占用空间；探讨了HTTP/2等能够大幅提升网站速度的技术；阐述了如何构建一个自动化的工作流以完成常见的优化任务，同时提高开发效率。

如果你是Web开发人员，想创建快速灵活的网站，或者提升已有网站的性能，打造更佳的用户体验，那么本书不失为一个理想的选择。

“对于现代Web开发人员来说，这是一份非常实用、容易上手的参考资料，运用通俗易懂的语言阐明了那些看起来很神秘的Web优化技巧。仔细读读这本书，你将获得确保网站既快速灵活又能提供良好带宽的技能。”——Ethan Marcotte，《移动优先与响应式Web设计》作者

“这是一本实用的指南，带领读者了解并解决各种Web性能问题。”——Alexey Galiullin，Global Orange

“这是一本关于Web性能的非常有价值的书，它能够为你和用户节省大量宝贵的时间。”——Kevin Liao，Sotheby's

“这本书全面介绍了可用来提升Web性能的工具和技术。”——Noreen Dertinger，Dertinger Informatics

作者简介

杰里米·瓦格纳（Jeremy Wagner）

Web性能咨询师、Web前端开发者，在多家机构和大公司积累了十余年经验。撰写过大量Web性能方面的图书和文章，还经常在各种Web开发会议上发表演讲。

目录信息

第1 章 理解Web 性能 　　 1
1.1 理解Web 性能 　　 1
1.1.1 Web 性能和用户体验 　　 1
1.1.2 Web 浏览器如何与Web 服务器通信 　　 2
1.1.3 Web 页面如何加载 　　 4
1.2 上手准备 　　 5
1.2.1 安装Node.js 和Git 　　 6
1.2.2 下载并运行客户的网站 　　 6
1.2.3 模拟网络连接 　　 7
1.3 检查客户网站 　　 8
1.4 优化客户网站 　　 10
1.4.1 缩小资源 　　 11
1.4.2 使用服务器压缩 　　 13
1.4.3 压缩图像 　　 16
1.5 最终性能测试 　　 18
1.6 小结 　　 19
第2 章 使用评估工具 　　 20
2.1 使用Google PageSpeed Insights 进行评估　　 20
2.1.1 评估网站性能 　　 20
2.1.2 使用Google Analytics 进行批量报告 　　 23
2.2 使用基于浏览器的评估工具 　　 24
2.3 检查网络请求 　　 25
2.3.1 查看计时信息 　　 25
2.3.2 查看HTTP 请求和响应头 　　 27
2.4 渲染性能检查工具 　　 29
2.4.1 理解浏览器如何渲染网页 　　 29
2.4.2 使用Google Chrome 的Performance 面板 　　 30
2.4.3 识别问题事件：jank 是元凶 　　 32
2.4.4 用JavaScript 在时间线中标记点 　　 37
2.4.5 其他浏览器中的渲染分析器 　　 38
2.5 在Chrome 中对JavaScript 进行基准测试 　　 39
2.6 模拟和监控设备 　　 40
2.6.1 在桌面Web 浏览器中模拟设备 　　 41
2.6.2 在Android 设备上远程调试网站 　　 42
2.6.3 在iOS 设备上远程调试网站 　　 43
2.7 创建自定义网络节流配置 　　 44
2.8 小结 　　 45
第3 章 优化CSS 　　 47
3.1 直入主题，保持DRY 　　 47
3.1.1 简写CSS 　　 47
3.1.2 使用CSS 浅选择器 　　 50
3.1.3 挑选浅选择器 　　 51
3.1.4 LESS 和SASS 预编译器：简单就是美 　　 52
3.1.5 不要重复自己 　　 53
3.1.6 实现DRY 　　 53
3.1.7 使用csscss 查找冗余 　　 54
3.1.8 分割CSS 　　 56
3.1.9 自定义框架下载 　　 57
3.2 移动优先即用户优先 　　 58
3.2.1 移动优先与桌面优先 　　 58
3.2.2 Mobilegeddon 算法 　　 61
3.2.3 使用Google 的移动友好指南 　　 62
3.2.4 验证网站的移动友好性 　　 63
3.3 对CSS 进行性能调整 　　 63
3.3.1 避免使用 @import 声明 　　 63
3.3.2 @import 串行请求 　　 64
3.3.3 并行请求 　　 64
3.3.4 在中放置CSS 　　 65
3.3.5 防止无样式内容闪烁 　　 65
3.3.6 提高渲染速度 　　 66
3.3.7 使用更快的选择器 　　 66
3.3.8 构建和运行基准测试 　　 67
3.3.9 检查基准测试结果 　　 68
3.3.10 尽可能使用flexbox 　　 69
3.3.11 对比盒子模型和flexbox 样式 　　 69
3.3.12 检查基准测试结果 　　 70
3.4 使用CSS 过渡 　　 71
3.4.1 使用CSS 过渡 　　 71
3.4.2 观察CSS 过渡性能 　　 73
3.4.3 使用will-change 属性优化过渡 　　 74
3.5 小结 　　 75
第4 章 理解关键CSS 　　 76
4.1 关键CSS 及其解决的问题 　　 76
4.1.1 理解折叠 　　 76
4.1.2 理解渲染阻塞 　　 77
4.2 关键CSS 的原理 　　 78
4.2.1 加载首屏样式 　　 79
4.2.2 加载首屏以外内容的样式 　　 79
4.3 实现关键CSS 　　 80
4.3.1 配置并运行菜谱网站 　　 81
4.3.2 识别和分离首屏CSS 　　 82
4.3.3 加载首屏以外内容的CSS 　　 88
4.4 权衡收益 　　 89
4.5 提升可维护性 　　 91
4.6 多页网站的注意事项 　　 91
4.7 小结 　　 92
第5 章 响应式图像 　　 94
5.1 为什么要考虑图像传输 　　 94
5.2 理解图像类型及其应用 　　 96
5.2.1 使用光栅图像 　　 96
5.2.2 使用SVG 图像 　　 99
5.2.3 选择图像格式 　　 100
5.3 CSS 中的图像传输 　　 101
5.3.1 使用媒体查询在CSS 中适配显示器 　　 101
5.3.2 通过媒体查询适配高DPI 显示器 　　 104
5.3.3 在CSS 中使用SVG 背景图像 　　 106
5.4 在HTML 中传输图像 　　 106
5.4.1 图像的全局max-width规则 　　 107
5.4.2 使用srcset 　　 107
5.4.3 使用元素 　　 110
5.4.4 使用Picturefill 提供polyfill支持 　　 114
5.4.5 在HTML 中使用SVG 　　 116
5.5 小结 　　 117
第6 章 图像的进一步处理　　 118
6.1 使用图像雪碧图 　　 118
6.1.1 准备工作 　　 119
6.1.2 生成雪碧图 　　 119
6.1.3 使用生成的雪碧图 　　 121
6.1.4 使用雪碧图时的考量 　　 122
6.1.5 使用Grumpicon 回退到光栅图像雪碧图 　　 123
6.2 缩小图像 　　 124
6.2.1 使用imagemin 优化光栅图像 　　 125
6.2.2 优化SVG 图像 　　 129
6.3 使用WebP 编码图像 　　 131
6.3.1 使用imagemin 编码有损WebP 图像 　　 132
6.3.2 使用imagemin 编码无损WebP 图像 　　 133
6.3.3 支持不支持WebP 的浏览器 　　 134
6.4 懒加载图像 　　 136
6.4.1 配置标记 　　 137
6.4.2 编写懒加载程序 　　 138
6.4.3 考虑不支持JavaScript 的用户 　　 144
6.5 小结 　　 146
第7 章 更快的字体 　　 148
7.1 明智地使用字体 　　 149
7.1.1 选择字体和字体变体 　　 149
7.1.2 构建你自己的@font-face级联 　　 151
7.2 压缩EOT 和TTF 字体格式 　　 154
7.3 取字体子集 　　 156
7.3.1 手动生成字体子集 　　 156
7.3.2 使用unicode-range 属性传输字体子集 　　 160
7.4 优化字体加载 　　 166
7.4.1 理解字体加载的问题 　　 166
7.4.2 使用CSS font-display属性 　　 168
7.4.3 使用字体加载API 　　 169
7.4.4 使用Font Face Observer作为回退 　　 173
7.5 小结 　　 175
第8 章 保持JavaScript 的简洁与快速 　　 176
8.1 影响脚本加载行为 　　 176
8.1.1 合理放置
· · · · · · (收起)

用户评价

《Web性能实战》这本书，让我对Web性能优化有了全新的认识。在此之前，我总觉得性能优化就是一些零散的技巧，比如压缩图片、合并CSS/JS文件、开启Gzip压缩等等。但这本书让我明白，性能优化是一个系统工程，需要从多个维度去考量和实践。 书中对浏览器渲染机制的深入讲解，是我之前从未接触过的。它详细描述了从HTML解析到DOM树构建，再到CSSOM树构建，以及最终的渲染树生成和页面绘制的全过程。这让我能够理解，为什么某些代码的写法会导致浏览器反复重绘，或者为什么某个CSS属性会引发布局重排。这些底层原理的理解，比单纯记住一些优化技巧要重要得多。 此外，书中对JavaScript性能的分析也相当到位。它不仅介绍了如何避免阻塞渲染的JS，还讲解了如何利用Web Workers进行后台计算，以及如何优化Event Loop，减少不必要的JS执行。这些内容，对于提升用户体验至关重要。我印象最深刻的是关于“性能预算”的章节，它教会我如何设定一个可衡量的性能目标，并在此基础上进行迭代优化，这是一种非常科学的管理方法。

《Web性能实战》这本书，简直是我近期的“宝藏”。作为一名每天都在与代码打交道的开发者，我深切体会到，速度就是一切。一个加载缓慢的网站，不仅仅是用户的不满，更是业务的损失。然而，现实中的性能优化，往往是一个充满挑战且耗时耗力的过程。 这本书最让我感到欣慰的是，它提供了一个非常完整的性能优化框架。它不是简单地列举一些零散的技巧，而是从整体的视角出发，带领读者一步步深入理解Web性能的方方面面。从用户浏览器的角度，到网络传输的链路，再到服务器端的响应，每一个环节都被作者深入剖析。 我特别喜欢书中对JavaScript执行性能的讲解。它详细阐述了Event Loop的工作机制，如何避免长时间运行的JavaScript函数，以及如何利用Web Workers进行异步计算。这些内容，对于提升网页的交互性和响应速度至关重要。而且，书中还提到了如何进行代码分割和懒加载，这对于优化首屏加载时间，改善用户初次访问体验非常有帮助。

《Web性能实战》这本书，简直是为我量身定做的！作为一名经常需要面对大量数据展示和复杂交互的前端开发人员，我深知网站的响应速度对用户体验的直接影响。过去，我尝试过各种零散的优化方法，但总是感觉效果不尽如人意，甚至有些时候，为了优化某个小点，反而引入了新的问题。 这本书最让我惊艳的地方在于，它没有仅仅停留在“是什么”的层面，而是深入到了“为什么”以及“如何做”的更深层次。它系统地梳理了Web性能的方方面面，从最底层的网络协议、浏览器渲染原理，到上层的JavaScript执行、资源加载策略，再到后期的监控和持续优化，都进行了详尽的阐述。 尤其是在资源优化方面，书中对图片格式的选择（WebP、AVIF）、懒加载、预加载、预连接等策略的讲解，以及对字体加载的优化建议，都非常具有指导意义。我之前对图片优化只停留在压缩层面，而这本书让我了解了响应式图片、Art Direction等更高级的应用，让我能够根据不同的设备和屏幕尺寸，加载最合适的图片，从而显著降低加载时间。

我最近一直在钻研《Web性能实战》这本书，可以说，它彻底颠覆了我之前对Web性能优化的理解。我之前一直认为，性能优化就是一些零散的技巧，比如压缩图片、合并CSS/JS文件、开启Gzip压缩等等。但这本书让我明白，性能优化是一个系统工程，需要从多个维度去考量和实践。 书中对浏览器渲染机制的深入讲解，是我之前从未接触过的。它详细描述了从HTML解析到DOM树构建，再到CSSOM树构建，以及最终的渲染树生成和页面绘制的全过程。这让我能够理解，为什么某些代码的写法会导致浏览器反复重绘，或者为什么某个CSS属性会引发布局重排。这些底层原理的理解，比单纯记住一些优化技巧要重要得多。 此外，书中对JavaScript性能的分析也相当到位。它不仅介绍了如何避免阻塞渲染的JS，还讲解了如何利用Web Workers进行后台计算，以及如何优化Event Loop，减少不必要的JS执行。这些内容对于提升用户体验至关重要。我印象最深刻的是关于“性能预算”的章节，它教会我如何设定一个可衡量的性能目标，并在此基础上进行迭代优化，这是一种非常科学的管理方法。

一直以来，我都对Web性能优化有着浓厚的兴趣，但总感觉自己缺乏一套系统性的知识体系。市面上关于性能优化的书籍和文章很多，但要么过于理论化，要么过于零散，很难真正地指导实践。《Web性能实战》这本书，正好弥补了这一不足。 这本书最让我称赞的是它的深度和广度。它不仅深入浅出地讲解了浏览器渲染原理、网络协议等底层知识，还详细介绍了各种实用的优化技术，如代码分割、懒加载、预加载、缓存策略等。我尤其喜欢书中关于“性能预算”的讲解，它提供了一种科学的方法来管理和衡量Web性能，让优化不再是无头绪的探索，而是有目标、有计划的推进。 书中对JavaScript性能的分析也让我受益匪浅。它详细讲解了如何避免阻塞渲染的JavaScript，如何优化异步操作，以及如何利用Web Workers来提升应用的响应速度。这些内容，对于构建现代、高性能的Web应用至关重要。而且，书中还对性能监控工具的使用进行了详细的介绍，让我能够更好地发现和解决性能瓶颈。

拿到《Web性能实战》这本书，我第一感觉就是：终于有一本书，不再是简单地堆砌概念，而是真正地接地气，直击痛点。作为一名多年来一直奋斗在Web开发一线的老兵，我深知性能优化的重要性，也体会过因为性能问题导致的各种“心累”。用户体验差，转化率低，SEO排名下降，这些都是性能不佳带来的直接后果。 本书最大的亮点在于它的实践性。作者并非只是理论的搬运工，而是将自己多年的实战经验，通过清晰的逻辑和丰富的案例，融入到书中的每一个章节。我非常喜欢书中对“关键渲染路径”的讲解，它以一种非常直观的方式，帮助我理解了浏览器加载和渲染页面的过程，并指出了在这个过程中可以进行优化的关键节点。 我特别欣赏书中对JavaScript性能的剖析。它不仅讲了如何避免长任务、如何优化异步操作，还探讨了如何利用Service Worker来提升离线体验和应用性能。这些内容，对于构建 modernen Web 应用至关重要。而且，书中对性能监控工具的使用和解读，也给了我很大的启发。学会如何利用Chrome DevTools、Lighthouse等工具来发现性能瓶颈，并根据数据进行有针对性的优化，这是非常宝贵的技能。

我最近正在如饥似渴地阅读《Web性能实战》这本书，感觉自己像是打开了一扇新的大门。作为一名在Web开发领域摸爬滚打多年的开发者，我一直都明白性能的重要性，但总感觉自己在优化过程中，像是在摸着石头过河，缺乏系统性的指导。 这本书最让我印象深刻的是其对浏览器渲染过程的细致讲解。从HTML解析到DOM树、CSSOM树的构建，再到渲染树的生成和页面的绘制，作者用清晰的图示和生动的语言，将这个复杂的内部机制展现在我面前。这让我深刻理解了为什么某些CSS属性会导致页面重排，为什么JS的执行会阻塞渲染。这种底层原理的理解，让我的优化不再是盲目的尝试，而是有针对性的策略。 此外，书中对网络层面的优化也做了非常详尽的阐述。从HTTP协议的细节，到DNS预解析、TCP连接优化，再到CDN的使用和缓存策略，每一个环节都涉及到了。我尤其欣赏书中关于CDN的文章，它不仅介绍了CDN的基本原理，还详细讲解了如何配置CDN，如何利用边缘缓存来提升用户访问速度。这对于提升全球用户的访问体验非常有帮助。

《Web性能实战》这本书，对我来说，就像是一次醍醐灌顶的体验。作为一名一直致力于提升用户体验的开发者，我深知Web性能的重要性，但常常在实践中感到力不从心。市面上关于性能优化的文章太多，但大多零散且不够深入，往往学完之后，也只能知其然，而不知其所以然。 这本书最大的特点在于其系统性和深入性。它没有停留在表面，而是从最根本的浏览器工作原理讲起，一步步深入到网络传输、前端代码、资源优化、乃至最后的性能监控。我尤其欣赏书中对HTTP/2和HTTP/3协议的介绍，这让我对现代Web通信有了更深的理解，也为我指明了如何利用这些新协议来提升加载速度。 书中对JavaScript性能的讲解也让我受益匪浅。它不仅介绍了如何避免阻塞渲染的JS，还深入探讨了如何利用Web Workers进行并行计算，以及如何通过代码分割、懒加载等技术来优化首屏加载时间和用户交互响应。这些具体的实践建议，让我能够直接应用到我的项目中，并看到了立竿见影的效果。

这本《Web性能实战》在我手中沉甸甸的，每一页都充满了作者的心血与实践经验。作为一个长期从事前端开发、对网站响应速度有着近乎偏执追求的开发者，我一直在寻找一本能够真正深入浅出、解决实际问题的书籍。市面上关于性能优化的文章、博客、教程汗牛充栋，但往往碎片化，难以形成系统性的认知，而且很多内容停留在理论层面，缺乏落地指导。《Web性能实战》恰恰弥补了这一空白。 本书并非简单地罗列各种优化技巧，而是从宏观到微观，层层剥茧，深入剖析了影响Web性能的各个环节。从浏览器渲染机制的底层原理，到网络传输的优化策略，再到前端代码的精细调优，每一个章节都充实而有深度。我尤其喜欢书中对“关键渲染路径”的讲解，它不仅清晰地阐述了浏览器加载和渲染页面的过程，更重要的是，它提供了一套清晰的思路，告诉我们如何在性能瓶颈的关键点上进行精准打击。书中列举的案例也非常贴合实际，比如如何通过代码分割、延迟加载、预加载等技术来减少首屏加载时间，以及如何优化图片、字体等资源来降低页面整体体积。这些技巧并非纸上谈兵，而是作者在实际项目中反复验证过的有效方法，读来让人豁然开朗，恨不得立刻应用到自己的项目中去。

《Web性能实战》这本书，对我而言，就像是黑夜中一盏指路的明灯，驱散了我心中关于Web性能优化的迷雾。作为一名略有些年头的Web开发者，我曾无数次地在性能瓶颈前抓耳挠腮，面对用户抱怨网站加载缓慢、操作卡顿，那种无力感是难以言喻的。市面上的性能优化书籍，有的过于理论化，读起来像是在啃一本枯燥的教科书，学完之后却不知道如何下手；有的则过于浅显，仅仅停留在一些表面的技巧，无法触及问题的本质。 而《Web性能实战》这本书，则完全不同。它以一种非常务实的态度，从最基础的浏览器工作原理入手，循序渐进地讲解了各种影响性能的关键因素。书中对HTTP协议的讲解，让我对网络传输的效率有了更深刻的理解，而对于TCP连接、TLS握手这些细节的剖析，更是让我认识到，原来一个小小的网络请求背后，蕴含着如此多的学问。更让我惊喜的是，本书对于前端工程化、构建工具（如Webpack、Rollup）的运用，以及如何利用CDN、缓存等策略来提升资源加载速度，都有非常详尽的阐述。这些内容，直接关系到日常开发中的实践，让我能够更有效地优化我的代码和部署流程。

挺实用的，技术也比较新，推荐。

挺实用的，技术也比较新，推荐。

挺实用的，技术也比较新，推荐。

挺实用的，技术也比较新，推荐。

挺实用的，技术也比较新，推荐。