diff --git a/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md b/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md index b6334f3..fdb5046 100644 --- a/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md +++ b/13-前端面试/02-前端性能优化/01-性能优化的指标和工具.md @@ -367,26 +367,26 @@ WebPageTest 在世界各地提供了非常多的服务器，在每个服务器 淘宝网站性能测试报告： -- 2021年1月：https://www.webpagetest.org/result/210115_DiCB_f1344d732760365151755e89765b2d37/ - - 2020年6月：https://webpagetest.org/result/200616_JK_78eebda338285ffe0c2e154ca5032839/ +- 2021年1月：https://www.webpagetest.org/result/210115_DiCB_f1344d732760365151755e89765b2d37/ + JD网站性能测试报告： - 2021年1月：https://www.webpagetest.org/result/210115_DiGT_8d7370e91230b7d077e40b7aafb485a5/ 拿到 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：第一个请求的响应时间。可以反映后台的处理能力，以及网络回路的情况。 - Start Render：从白屏到首次渲染的时间。 - Speed Index：速度指数。 - **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**。 @@ -394,7 +394,8 @@ 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的使用情况。 - 多张图片的资源请求。 -![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) + 上面这张图的意思是：302表示重定向，也就是说，这个资源已经不在原来请求的位置了，需要重定向才能找到真实的位置。这个地方其实可以做一个优化： > 不需要去访问之前的无效的资源，可以直接去访问重定向后的那个资源。 - - ### 局域网部署 WebPageTest 工具 如果我们开发的页面，还没有上线，公网则无法访问。这个时候我们也想通过WebPageTest看看网站的性能，那要怎么办呢？ 我们可以在局域网部署 WebPageTest 工具，具体方法可自行研究。 - - ## 使用LightHouse分析性能 我们之所以使用不同的性能测量工具，是因为他们都有不同的特点。WebPageTest 可以生成详细的性能测试报告；而 接下来要讲的 lighthouse 不仅可以帮我们生成测试报告，还可以给出一些针对性的优化建议。 - ### Lighthouse 介绍 ![](http://img.smyhvae.com/20210115-1739.png) @@ -565,7 +562,7 @@ window.addEventListener('load', (event) => { let timing = performance.getEntriesByType('navigation')[0]; console.log(timing.domInteractive); console.log(timing.fetchStart); - + let diff = timing.domInteractive - timing.fetchStart; console.log("TTI: " + diff); // 打印 TTI 参数 }) @@ -633,7 +630,7 @@ var type = connection.effectiveType; function updateConnectionStatus() { // type是之前的网络状态，connection.effectiveType是当前最新的网络状态 console.log("Connection type changed from " + type + " to " + connection.effectiveType); - + type = connection.effectiveType; } @@ -646,13 +643,11 @@ connection.addEventListener('change', updateConnectionStatus); Connection type changed from 4g to 3g ``` -### 检测元素的可见状态，方便做曝光埋点 +### 检测元素的可见状态，做曝光埋点 我们可以通过`IntersectionObserver：`这个API来检测元素的可见状态： -![](http://img.smyhvae.com/20210116-1119.png) - - +![](http://img.smyhvae.com/20210117_1635.png) 做曝光上报的埋点：判断某个DOM（或者某个楼层）是否出现在视窗中，出现了就收集数据上报给服务端。 @@ -664,43 +659,3 @@ Connection type changed from 4g to 3g - [点击埋点和曝光卖点的封装](https://github.com/Hugohui/vueTrackSdk) - - - -## 总结 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -``` \ No newline at end of file