webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
qianguyihao 2021-01-17 16:36:46 +08:00
parent ba5f4b4b7a
commit b80ee60568
1 changed files with 13 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md
View File

@ -367,26 +367,26 @@ WebPageTest 在世界各地提供了非常多的服务器，在每个服务器
淘宝网站性能测试报告： 淘宝网站性能测试报告：
- 2021年1月：https://www.webpagetest.org/result/210115_DiCB_f1344d732760365151755e89765b2d37/
- 2020年6月：https://webpagetest.org/result/200616_JK_78eebda338285ffe0c2e154ca5032839/ - 2020年6月：https://webpagetest.org/result/200616_JK_78eebda338285ffe0c2e154ca5032839/
- 2021年1月：https://www.webpagetest.org/result/210115_DiCB_f1344d732760365151755e89765b2d37/
JD网站性能测试报告： JD网站性能测试报告：
- 2021年1月：https://www.webpagetest.org/result/210115_DiGT_8d7370e91230b7d077e40b7aafb485a5/ - 2021年1月：https://www.webpagetest.org/result/210115_DiGT_8d7370e91230b7d077e40b7aafb485a5/
拿到 WebPageTest 报告之后，我们来看看报告里的几个重点指标。 拿到 WebPageTest 报告之后，我们来看看报告里的几个重点指标。
![Xnip2021-01-16_13-14-24](/Users/meiyamin/Downloads/前端性能优化/image/Xnip2021-01-16_13-14-24.png) ![](http://img.smyhvae.com/20210116_1314.png)
1、摘要里的参数： 1、摘要里的参数：（如上图）
- First Byte：第一个请求的响应时间。可以反映后台的处理能力，以及网络回路的情况。 - First Byte：第一个请求的响应时间。可以反映后台的处理能力，以及网络回路的情况。
- Start Render：从白屏到首次渲染的时间。 - Start Render：从白屏到首次渲染的时间。
- Speed Index：速度指数。 - Speed Index：速度指数。
- **Total Blocking Time**：页面被阻塞，导致用户不能交互的累计时间。 - **Total Blocking Time**：页面被阻塞，导致用户不能交互的累计时间。
![Xnip2021-01-16_13-15-04](/Users/meiyamin/Downloads/前端性能优化/image/Xnip2021-01-16_13-15-04.png) ![](http://img.smyhvae.com/20210116_1315.png)
2、详情里的参数：**First View**。 2、详情里的参数：**First View**。
@ -394,7 +394,8 @@ First View展示的是：首次访问时，总的加载时间。这里面提供
点击进入 First View 的详情之后，可以看到：所有的资源请求，都会在这里列出来。如下： 点击进入 First View 的详情之后，可以看到：所有的资源请求，都会在这里列出来。如下：
![Xnip2021-01-16_13-16-11](/Users/meiyamin/Downloads/前端性能优化/image/Xnip2021-01-16_13-16-11.png)
![](http://img.smyhvae.com/20210116_1316.png)
@ -403,7 +404,7 @@ First View展示的是：首次访问时，总的加载时间。这里面提供
- CPU Utilization：CPU的使用情况。 - CPU Utilization：CPU的使用情况。
- 多张图片的资源请求。 - 多张图片的资源请求。
![Xnip2021-01-16_13-16-50](/Users/meiyamin/Downloads/前端性能优化/image/Xnip2021-01-16_13-16-50.png) ![](http://img.smyhvae.com/20210116_1317.png)
上图中，我们可以看到：多张图片的开始请求时间都是相同的。也就是说，如果让资源做**并行加载**，我们就可以加大地减少加载时间，**最终所消耗的时间就由最大的图片来决定**。这是一个很好的优化技巧，至于具体是怎么实现的，可以自行了解。 上图中，我们可以看到：多张图片的开始请求时间都是相同的。也就是说，如果让资源做**并行加载**，我们就可以加大地减少加载时间，**最终所消耗的时间就由最大的图片来决定**。这是一个很好的优化技巧，至于具体是怎么实现的，可以自行了解。
@ -412,24 +413,20 @@ First View展示的是：首次访问时，总的加载时间。这里面提供
![](http://img.smyhvae.com/20210115-2250.png) ![](http://img.smyhvae.com/20210115-2250.png)
上面这张图的意思是：302表示重定向，也就是说，这个资源已经不在原来请求的位置了，需要重定向才能找到真实的位置。这个地方其实可以做一个优化： 上面这张图的意思是：302表示重定向，也就是说，这个资源已经不在原来请求的位置了，需要重定向才能找到真实的位置。这个地方其实可以做一个优化：
> 不需要去访问之前的无效的资源，可以直接去访问重定向后的那个资源。 > 不需要去访问之前的无效的资源，可以直接去访问重定向后的那个资源。
### 局域网部署 WebPageTest 工具 ### 局域网部署 WebPageTest 工具
如果我们开发的页面，还没有上线，公网则无法访问。这个时候我们也想通过WebPageTest看看网站的性能，那要怎么办呢？ 如果我们开发的页面，还没有上线，公网则无法访问。这个时候我们也想通过WebPageTest看看网站的性能，那要怎么办呢？
我们可以在局域网部署 WebPageTest 工具，具体方法可自行研究。 我们可以在局域网部署 WebPageTest 工具，具体方法可自行研究。
## 使用LightHouse分析性能 ## 使用LightHouse分析性能
我们之所以使用不同的性能测量工具，是因为他们都有不同的特点。WebPageTest 可以生成详细的性能测试报告；而 接下来要讲的 lighthouse 不仅可以帮我们生成测试报告，还可以给出一些针对性的优化建议。 我们之所以使用不同的性能测量工具，是因为他们都有不同的特点。WebPageTest 可以生成详细的性能测试报告；而 接下来要讲的 lighthouse 不仅可以帮我们生成测试报告，还可以给出一些针对性的优化建议。
### Lighthouse 介绍 ### Lighthouse 介绍
![](http://img.smyhvae.com/20210115-1739.png) ![](http://img.smyhvae.com/20210115-1739.png)
@ -646,13 +643,11 @@ connection.addEventListener('change', updateConnectionStatus);
Connection type changed from 4g to 3g Connection type changed from 4g to 3g
``` ```
### 检测元素的可见状态，方便做曝光埋点 ### 检测元素的可见状态，做曝光埋点
我们可以通过`IntersectionObserver：`这个API来检测元素的可见状态： 我们可以通过`IntersectionObserver：`这个API来检测元素的可见状态：
![](http://img.smyhvae.com/20210116-1119.png) ![](http://img.smyhvae.com/20210117_1635.png)
做曝光上报的埋点：判断某个DOM（或者某个楼层）是否出现在视窗中，出现了就收集数据上报给服务端。 做曝光上报的埋点：判断某个DOM（或者某个楼层）是否出现在视窗中，出现了就收集数据上报给服务端。
@ -664,43 +659,3 @@ Connection type changed from 4g to 3g
- [点击埋点和曝光卖点的封装](https://github.com/Hugohui/vueTrackSdk) - [点击埋点和曝光卖点的封装](https://github.com/Hugohui/vueTrackSdk)
## 总结
```
```