update

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)
 
 
-
-
-
-## 总结
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```