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 报告之后，我们来看看报告里的几个重点指标。
-
+
-1、摘要里的参数：
+1、摘要里的参数：（如上图）
- First Byte：第一个请求的响应时间。可以反映后台的处理能力，以及网络回路的情况。
- Start Render：从白屏到首次渲染的时间。
- Speed Index：速度指数。
- **Total Blocking Time**：页面被阻塞，导致用户不能交互的累计时间。
-
+
2、详情里的参数：**First View**。
@@ -394,7 +394,8 @@ First View展示的是：首次访问时，总的加载时间。这里面提供
点击进入 First View 的详情之后，可以看到：所有的资源请求，都会在这里列出来。如下：
-
+
+
@@ -403,7 +404,7 @@ First View展示的是：首次访问时，总的加载时间。这里面提供
- CPU Utilization：CPU的使用情况。
- 多张图片的资源请求。
-
+
上图中，我们可以看到：多张图片的开始请求时间都是相同的。也就是说，如果让资源做**并行加载**，我们就可以加大地减少加载时间，**最终所消耗的时间就由最大的图片来决定**。这是一个很好的优化技巧，至于具体是怎么实现的，可以自行了解。
@@ -412,24 +413,20 @@ First View展示的是：首次访问时，总的加载时间。这里面提供
+
上面这张图的意思是：302表示重定向，也就是说，这个资源已经不在原来请求的位置了，需要重定向才能找到真实的位置。这个地方其实可以做一个优化：
> 不需要去访问之前的无效的资源，可以直接去访问重定向后的那个资源。
-
-
### 局域网部署 WebPageTest 工具
如果我们开发的页面，还没有上线，公网则无法访问。这个时候我们也想通过WebPageTest看看网站的性能，那要怎么办呢？
我们可以在局域网部署 WebPageTest 工具，具体方法可自行研究。
-
-
## 使用LightHouse分析性能
我们之所以使用不同的性能测量工具，是因为他们都有不同的特点。WebPageTest 可以生成详细的性能测试报告；而 接下来要讲的 lighthouse 不仅可以帮我们生成测试报告，还可以给出一些针对性的优化建议。
-
### Lighthouse 介绍
@@ -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来检测元素的可见状态：
-
-
-
+
做曝光上报的埋点：判断某个DOM（或者某个楼层）是否出现在视窗中，出现了就收集数据上报给服务端。
@@ -664,43 +659,3 @@ Connection type changed from 4g to 3g
- [点击埋点和曝光卖点的封装](https://github.com/Hugohui/vueTrackSdk)
-
-
-
-## 总结
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```
\ No newline at end of file