第1章 性能优化介绍
背景
性能优化的意义何在
WPOStats性能优化案例库-业界经验
优化做些什么
行业的行动标准是什么
性能优化思维导图
第2章 性能优化的指标和工具
为什么要进行Web性能优化
性能-web网站和应用的支柱
寻找性能瓶颈
-
了解性能指标-多快才算快
-
利用测量工具和APIs
-
优化问题，重新测量（迭代）
移动端挑战多
-
设备硬件，网速，屏幕尺寸，交互方式
-
用户更缺少耐心，>3秒加载导致53%的跳出率
-
持续增长的移动用户和移动电商业务
性能指标和优化目标-了解行业标准
性能优化-加载
-
理解加载瀑布图
-
基于HAR存储与重建性能信息
-
速度指数（Speed Index）
-
重要测量指标
Speed Index
TTFB
页面加载时间
首次渲染
性能优化-响应
-
交互动作的反馈时间
-
帧率FPS
-
异步请求的完成时间
RAIL测量模型
什么是RAIL
Response响应
Animation动画
Idle空闲
Load加载
使用WebPageTest评估Web网站性能
WebPageTest官网
领卡页性能测试
本地部署WebPageTest
采用docker镜像
docker pull webpagetset/server
使用LightHouse分析性能
npm i -g lighthouse
lighthouse https://xxxxxxxxx
使用Chrome DevTools分析性能
1.Audit(Lighthouse)
2.Throttling调整网络吞吐
3.Performance性能分析
4.Network网络加载分析
常用的性能测量APIs
关键时间节点（Navigation Thing, Resource Timing）
网络状态（Network APIs）
客户端服务端协商（HTTP Clinet Hints）网页显示状态（UI APIs）
DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart
