新書推薦:
《
控制权视角下的家族企业管理与传承
》
售價:HK$
87.4
《
冯友兰和青年谈心系列
》
售價:HK$
167.3
《
利他主义的生意:偏爱“非理性”的市场(英国《金融时报》推荐读物!)
》
售價:HK$
77.3
《
认知行为疗法:心理咨询的顶层设计
》
售價:HK$
99.7
《
FANUC工业机器人装调与维修
》
售價:HK$
99.7
《
吕著中国通史
》
售價:HK$
62.7
《
爱琴海的光芒 : 千年古希腊文明
》
售價:HK$
199.4
《
不被他人左右:基于阿德勒心理学的无压力工作法
》
售價:HK$
66.1
|
編輯推薦: |
1.全面讲解Web性能工具和技术,让种种Web性能问题迎刃而解; 2.注重实战,结合丰富示例,助你创建快速灵活的网站,提升用户体验。 对于网站来说,精巧的功能、时尚的设计和良好的营销策略固然重要,但如果访问者认为网站速度慢,那么它依然是失败的。由于网络环境不可预测,而且现在的网站比以往任何时候都庞大,所以需要通过提升速度来在竞争中脱颖而出。 本书是创建快速网站的指南,指导你如何以正确的方式创建高性能网站。书中介绍了如何加快向用户交付站点资源的速度、提高渲染速度、减少网站占用空间;探讨了HTTP2等能够大幅提升网站速度的技术;阐述了如何构建一个自动化的工作流以完成常见的优化任务,同时提高开发效率。 如果你是Web开发人员,想创建快速灵活的网站,或者提升已有网站的性能,打造更佳的用户体验,那么本书不失为一个理想的选择。
|
內容簡介: |
在Web 变得越来越复杂的时代,解决Web 性能问题正当时。本书旨在帮助读者创建更加快速的网站,内容涵盖Web 性能的基础知识、性能评估工具、CSS 优化、图像优化、字体优化、JavaScript 相关的内容、Brotli 压缩算法、资源提示、配置缓存策略、HTTP2,等等。
|
關於作者: |
杰里米瓦格纳(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 和Git6
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 章 优化CSS47
3.1 直入主题,保持DRY47
3.1.1 简写CSS47
3.1.2 使用CSS 浅选择器50
3.1.3 挑选浅选择器51
3.1.4 LESS 和SASS 预编译器:简单就是美52
3.1.5 不要重复自己53
3.1.6 实现DRY53
3.1.7 使用csscss 查找冗余54
3.1.8 分割CSS56
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 在中放置CSS65
3.3.5 防止无样式内容闪烁65
3.3.6 提高渲染速度66
3.3.7 使用更快的选择器66
3.3.8 构建和运行基准测试67
3.3.9 检查基准测试结果68
3.3.10 尽可能使用flexbox69
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 章 理解关键CSS76
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 实现关键CSS80
4.3.1 配置并运行菜谱网站81
4.3.2 识别和分离首屏CSS82
4.3.3 加载首屏以外内容的CSS88
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 使用srcset107
5.4.3 使用元素110
5.4.4 使用Picturefill 提供polyfill支持114
5.4.5 在HTML 中使用SVG116
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 使用字体加载API169
7.4.4 使用Font Face Observer作为回退173
7.5 小结175
第8 章 保持JavaScript 的简洁与快速176
8.1 影响脚本加载行为176
8.1.1 合理放置script元素177
8.1.2 使用异步脚本加载178
8.1.3 使用async178
8.1.4 在多脚本加载中可靠地使用async180
8.2 使用更简洁的兼容jQuery 的替代方案 182
8.2.1 比较替代方案182
8.2.2 探索竞品182
8.2.3 比较大小182
8.2.4 比较性能183
8.2.5 实现替代方案185
8.2.6 使用Zepto185
8.2.7 理解使用Shoestring 或Sprint的注意事项185
8.3 脱离jQuery 编码186
8.3.1 检查DOM 是否准备就绪186
8.3.2 选择元素并绑定事件187
8.3.3 使用classList 操作元素上的类188
8.3.4 读取和修改元素属性与内容189
8.3.5 使用Fetch API 发起AJAX请求192
8.3.6 使用Fetch API192
8.3.7 Fetch API 的polyfill193
8.4 使用requestAnimationFrame设置动画194
8.4.1 requestAnimationFrame一览194
8.4.2 计时器函数驱动的动画和requestAnimationFrame194
8.4.3 比较性能195
8.4.4 实现requestAnimationFrame 196
8.4.5 了解Velocity.js198
8.5 小结199
第9 章 使用Service Worker 提升性能200
9.1 何为Service Worker200
9.2 编写第一个Service Worker202
9.2.1 安装Service Worker203
9.2.2 注册Service Worker203
9.2.3 拦截并缓存网络请求207
9.2.4 衡量性能收益209
9.2.5 优化网络请求的拦截行为209
9.3 更新Service Worker212
9.3.1 文件版本控制212
9.3.2 清理旧缓存214
9.4 小结215
第10 章 微调资源传输217
10.1 压缩资源217
10.1.1 遵循压缩指导原则218
10.1.2 使用Brotli 压缩221
10.2 缓存资源225
10.2.1 理解缓存225
10.2.2 制定最佳缓存策略230
10.2.3 使缓存资源失效233
10.3 使用CDN 资源234
10.3.1 使用CDN 托管资源 234
10.3.2 CDN 发生故障怎么办236
10.3.3 使用子资源完整性验证CDN 资源237
10.4 使用资源提示239
10.4.1 使用preconnect 资源提示239
10.4.2 使用prefetch 和preload资源提示241
10.5 小结243
第11 章 HTTP2 未来展望245
11.1 理解HTTP2 的必要性245
11.1.1 理解HTTP1 中的问题246
11.1.2 通过HTTP2 解决常见的HTTP1 问题248
11.1.3 在Node 中编写一个简单的HTTP2 服务器251
11.1.4 观察收益253
11.2 探索HTTP2 对应的优化技术变化255
11.2.1 资源粒度与缓存效率255
11.2.2 识别HTTP2 的性能反模式256
11.3 使用服务器推送抢先发送资源257
11.3.1 理解服务器推送及其工作原理258
11.3.2 使用服务器推送258
11.3.3 测量服务器推送性能261
11.4 同时优化HTTP1 和HTTP2262
11.4.1 HTTP2 服务器如何处理不支持HTTP2 的浏览器262
11.4.2 划分用户263
11.4.3 根据浏览器功能提供资源264
11.5 小结269
第12 章 使用gulp 自动化优化任务270
12.1 关于gulp270
12.1.1 为什么要使用构建系统271
12.1.2 gulp 的工作原理272
12.2 奠定基础273
12.2.1 组织项目文件夹273
12.2.2 安装gulp 及其插件274
12.3 编写gulp 任务277
12.3.1 剖析gulp 任务277
12.3.2 编写核心任务279
12.3.3 编写实用程序任务285
12.4 深入理解gulp 插件288
12.5 小结289
附录A 工具参考290
附录B 常用jQuery 功能的原生等价实现295
|
|