https://blog.csdn.net/xmxt668/article/details/102529583
2-1 为什么要进行Web性能优化【企业刚需】
网页速度快，才可以吸引更多的用户，用户体验才可以。
搜索排名，会优先考虑高性能网站。
寻找性能瓶颈
了解性能指标--多快才算快
利用测量工具和APIs
优化问题，重新测量（迭代）
移动端挑战多
设备硬件，网速，屏幕尺寸，交互方式
用户更缺少耐心，>3秒加载导致53%对的跳出率
持续增长的移动用户和移动电商业务
2-2 性能指标和优化目标【了解行业标准】
1.随便打开一个网页，比如淘宝，用谷歌打开开发者工具，点击Network选项卡，点击Network Setting，选择除了Group by frame的其他的选择框。
2.刷新页面，选择刷新按钮的时候，点击右键，选择最后一个“清除缓存并硬性重新加载”选项，刷新之后可以看到页面加载时间
Network里面有个瀑布图，表示资源的加载，可以横向看和竖向看；横向看的是每项具体的资源，不同的颜色代表不同的环节，有排队，DNS查找，SSL，TTFB(从用户发出请求到数据返回的时间，反映了后台的处理时间和网络时间)，下载过程。资源如果并行加载，就会提升加载速度。
在NetWork里面可以看到2根竖线，蓝色的是DOM完成的时间，红色的是所有资源加载完成的时间
在Network里面的结果一次可能分析不完，我们可以先把结果保存下来，在空白处右键，点击Save all as HAR with content，这是一个统一的标准，主要将性能测试的结果保存起来，方便后续使用，或者导入到其他的性能分析工具中。
3.点击Lighthouse选项卡，这是google集成的一个性能测试的工具，报告总分是100分，使用这些工具的时候一定要多测试几次，取平均值。该选项卡下有几个指标，指标的黄色代表警告，绿色代表比较好，红色的代表不好。
First Contentful Paint:从白屏到出现内容的时间。不能一直白屏，可以慢慢地出现内容，不能等所有的内容返回再加载内容
Speed Index:速度指数，背后有个复杂的计算过程，一般4s以内，是比较好的，也要看页面的具体情况，不能一概追求这个指标，只能不断优化接近这个指标
4.上面的指标主要是网络的性能，还有用户的交互体验，淘宝随便点击一个一级菜单，二级菜单就会立即出现，响应速度比较快。还有画面的流畅度，接下来使用其他的工具，使用快捷键Ctrl+Shift+P调用出命令窗口：输入frame，点击Rendering Show frames per second (FPS) meter,这是个监控，
可以看到页面的帧数，淘宝可以达到很低(60fps)
优化所有的异步请求，争取很快能返回来，实在不行的话，可以加个Loading框
性能优化--加载
理解加载瀑布图
基于HAR存储与重建性能信息
速度指数
重要测量指标（Speed Index,TTFB,页面加载时间，首次渲染）
2-3 RAIL测量模型【黄金指南】
这是google提出的模型标准，要知道性能优化往哪个方向发展才好一点。受制于各种因素，直接输入网页链接，网页内容可以立刻加载出来。
什么是RAIL
Respose响应，对于用户而言，交互的响应
Animation 动画，动画给用户体验是否流畅
Idle空闲，让浏览器有足够的空闲时间，不能让主线程始终繁忙
chrome开发者工具里有个Performance的选项卡，可以看到主线程是否空闲
Load加载，资源加载时间
RAIL评估标准
响应：处理时间应在50ms以内完成
是基于用户调查得出的，用户可以接受的时间是100ms，从用户发出请求，到用户返回请求的过程，其实有很多过程，真正做数据数据的时间只有50ms。
动画：每10ms产生一帧 （1秒钟60帧，浏览器绘制需要事件）
空闲：尽可能增加空闲时间
当空闲足够的话，响应来的时候，才可以快速处理；业务相关的逻辑需要放到后台去做
加载：在5s内完成内容加载并可以交互
（加载，解析的时间是5s）
逐步发现问题，解决问题
性能测量工具
- Chrome DevTools开发调试，性能评测
- Lighthouse网站整体质量评估
- WebPageTest多测试地点、全面性能报告