webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 性能分析工具

Browse Source
This commit is contained in:
qianguyihao
2021-04-27 12:54:33 +08:00
parent 4deee86009
commit a5b3248b50
4 changed files with 123 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
13-前端性能优化/00-前端性能优化认知.md
View File

@@ -41,7 +41,7 @@
- 70% 的人上来就说减少合并资源、减少请求、数据缓存这些优化手段。
- 15% 的人会提到需要在 DevTools 下先看看首屏时间，围绕首屏来做优化。
- 15% 的人会提到需要在 DevTools 下先看看首屏时间，可以先围绕首屏来做优化。
- 10%的人会提到需要接入一个性能平台来看看现状，诊断一下。
@@ -66,7 +66,7 @@
正因为如此，我们才需要通过性能优化的技巧，并结合其他的技术手段来不断提高网站和App的用户体验，从而助力公司的业务增长；同时，我们也可以借此提升自己的技术实力，这对个人的职业成长也会以后很大的帮助。
3、只要产品上线了，随着**业务规模量和用户访问量的扩大**，性能优化就是不可回避的话题。在遇到性能问题时，有些人的解决办法是：用一些粗糙的手段把问题绕过去，但却给后面的人埋下了坑。有些人说出一句万能的话：
3、只要产品上线了，随着**业务规模量和用户访问量的扩大**，性能优化就是不可回避的话题。在遇到性能问题时，有些人的解决办法是：用一些粗糙的手段把问题绕过去，但却给后面的人埋下了坑。这些人常说的依据口头禅是：
![](http://img.smyhvae.com/20210115-2150.jpg)
@@ -79,6 +79,12 @@
- 腾讯根据长期数据监控发现，页面一秒钟延迟会造成页面访问量下降9.4%，跳出率增加8.3%，转化率下降3.5%。
### 补充
有些同学做事有拖延症，经常喜欢刷朋友圈、刷微博、看新闻，导致工作效率很低。为了解决这个问题，其实有个办法就是：把你的浏览器或者指定的软件，添加一个5秒的延迟，这时候，当你访问所有的网站，都会很慢。坚持一个月，你会发现，你再也不想看这些网站了，工作效率明显提升了许多。
这件事情从侧面也反映出：网站的性能如果不够好，对用户来说是一种折磨。时间一长，用户就不想用这个网站了。性能和网站的利益直接相关。涉及到：流量、搜索、转化率、用户体验。
## 如何学习性能优化

187
13-前端性能优化/01-性能优化的指标和工具.md → 13-前端性能优化/01-前端性能分析工具和指标.md
View File

@@ -6,11 +6,15 @@
### 打开网站的初体验
我们以淘宝网站为例。
我们以淘宝网站为例，按下F12打开浏览器的调试模式。
![](http://img.smyhvae.com/20210115_1601.png)
上图中，鼠标长按刷新图标，松开鼠标后，会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。PS：只有淘宝等少数网站有这个选项，其他很多网站都没有。
上图中，鼠标右键点击“刷新”图标（或者鼠标长按刷新图标，松开鼠标后），会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。
补充：这三个选项都是在调试模式下（按下F12弹出调试面板）才会出现的。
浏览器的DevTools初印象：
![](https://img.smyhvae.com/20210115_1617.png)
@@ -18,7 +22,7 @@
我们可以看到淘宝网站的一些指标：
- 资源量是 1.3M。
- 总资源量是 1.3M。
- DOM加载完成时间（DOMContentLoaded）：511ms。这是一个很关键的指标。
- 其他资源的总加载时间是 1.05秒。
@@ -335,6 +339,106 @@ Timing参数中，尤其注意看`DCL`（DOMContentLoaded），即DOM加载完
## 使用LightHouse分析性能
我们之所以使用不同的性能测量工具，是因为他们都有不同的特点。这一段要讲的 lighthouse 既可以帮我们生成简易的测试报告，还可以给出一些针对性的优化建议。后面要讲的 WebPageTest 可以帮我们生成详细的性能测试报告。
我们先来看看 Lighthouse。
### Lighthouse 介绍
![](http://img.smyhvae.com/20210115-1739.png)
lighthouse 是 chrome 浏览器的一个性能测量工具。我们先来看看它的性能指标，至于它具体使用，后续的内容再详细介绍。
淘宝跑分举例：
![](http://img.smyhvae.com/20210115-1758.png)
京东跑分举例：
![](http://img.smyhvae.com/20210115-1759.png)
Lighthouse 跑分里，最重要的两个指标如下：
- **First Contentful Paint（白屏时间）**：**从白屏到第一次出现内容的时间。**我们可以看到，上面提供了一些加载过程的截图，10屏里如果只有1到2屏是白屏，说明体验还是可以的。
- **Speed Index**：速度指数。
我们不需要关心这个指数是怎么来的，因为背后涉及一套很复杂的公式，我们暂时只需关注这个数值。
Speed Index 标准为4秒（超过4秒算比较慢的），我们测的淘宝的 speed index 是0.5s，很快了。但我们要结合网站本身的业务来**权衡**。并不是分数越高性能越高，比如百度这样的网站，页面上的内容很少，测出来的分数肯定很完美。而淘宝需要展示很多内容给用户看。所以，这个指标只是一个指导作用，并不一定能够达到最优的数值。
Lighthouse 的分析结果里，也给出了颜色标注：
- 红色：比较严重的性能问题
- 黄色：需要做适当优化
- 绿色：说明性能表现很好。
另外，Lighthouse 还会给出一些优化建议：
- Opportunities:优化建议。
- Diagnostics：问题诊断。
- Passed audits：表示这部分没有问题。
### 举例：确认某个JS 是否必须在首屏加载
就拿B站来举例，来看看它的lighthouse报告：
![](http://img.smyhvae.com/20210116_0107.png)
上图中给出了一个优化建议：有些JS文件不是首屏加载必须的。
![](http://img.smyhvae.com/20210116_0108.png)
我们随便拿一个JS文件来测试（比如上图中，Header标签里的JS文件）。做法如下：
![](http://img.smyhvae.com/20210116-0901.png)
如上图所示，在 chrome 控制台输入快捷键「Cmd + Shift + P」，然后输入文本`block`，选择`Show Network request blocking`：
![](http://img.smyhvae.com/20210116-0903.png)
按照上面的步骤添加规则，点击add后，效果如下：
![](http://img.smyhvae.com/20210116-0904.png)
然后，我们切换到控制台的 network面板，并刷新页面：
![](http://img.smyhvae.com/20210116-0905.png)
然后观察这个js资源是不是首屏加载所必须的。但我们也不能就此定论说这个资源一定可以延迟加载，也许它就是想让页面在一开始loading的时候就捕获日志。
对于我们自己的网站，这个资源是首屏加载必须的吗？一定要在第一时间加载吗？需要根据特定的业务做衡量。
### 通过npm运行 Lighthouse工具
```bash
# 安装
npm install -g lighthouse
# 执行
lighthouse https://www.jd.com
# 输出性能检测报告
Generating results...
html output witten to /Users/smyh/Documents/wpt-mac-agent/www.jd.com._2021-01-16_09-00-00.html
```
## 使用 WebPageTest 评估网站性能
@@ -422,90 +526,23 @@ First View展示的是：首次访问时，总的加载时间。这里面提供
我们可以在局域网部署 WebPageTest 工具，具体方法可自行研究。
## 使用LightHouse分析性能
我们之所以使用不同的性能测量工具，是因为他们都有不同的特点。WebPageTest 可以生成详细的性能测试报告；而 接下来要讲的 lighthouse 不仅可以帮我们生成测试报告，还可以给出一些针对性的优化建议。
### Lighthouse 介绍
![](http://img.smyhvae.com/20210115-1739.png)
lighthouse 是 chrome 浏览器的一个性能测量工具。我们先来看看它的性能指标，至于它具体使用，后续的内容再详细介绍。
淘宝跑分举例：
## chrome插件：PageSpeed Insights
![](http://img.smyhvae.com/20210115-1758.png)
京东跑分举例：
另外，google官方也有一个网址：https://developers.google.com/speed/pagespeed/insights/?hl=zh-cn
![](http://img.smyhvae.com/20210115-1759.png)
但是这个网站在使用时，经常挂掉。
这个插件是2018年的，已经好几年没更新了。大家参考即可。
Lighthouse 跑分里，最重要的两个指标如下：
- **First Contentful Paint**：**从白屏到第一次出现内容的时间。**我们可以看到，上面提供了一些加载过程的截图，10屏里如果只有1到2屏是白屏，说明体验还是可以的。
- **Speed Index**：速度指数。
我们不需要关心这个指数是怎么来的，因为背后涉及一套很复杂的公式，我们暂时只需关注这个数值。
Speed Index 标准为4秒（超过4秒算比较慢的），我们测的淘宝的 speed index 是0.5s，很快了。但我们要结合网站本身的性质来权衡。并不是分数越高性能越高，比如百度这样的网站，页面上的内容很少，测出来的分数肯定很完美。而淘宝需要展示很多内容给用户看。所以，这个指标只是一个指导作用，并不一定能够达到最优的数值。
另外，Lighthouse 还会给出一些优化建议：
- Opportunities:优化建议。
- Diagnostics：问题诊断。
- Passed audits：表示这部分没有问题。
### 举例：确认某个JS 是否必须在首屏加载
就拿B站来举例，来看看它的lighthouse报告：
![](http://img.smyhvae.com/20210116_0107.png)
上图中给出了一个优化建议：有些JS文件不是首屏加载必须的。
![](http://img.smyhvae.com/20210116_0108.png)
我们随便拿一个JS文件来测试（比如上图中，Header标签里的JS文件）。做法如下：
![](http://img.smyhvae.com/20210116-0901.png)
如上图所示，在 chrome 控制台输入快捷键「Cmd + Shift + P」，然后输入文本`block`，选择`Show Network request blocking`：
![](http://img.smyhvae.com/20210116-0903.png)
按照上面的步骤添加规则，点击add后，效果如下：
![](http://img.smyhvae.com/20210116-0904.png)
然后，我们切换到控制台的 network面板，并刷新页面：
![](http://img.smyhvae.com/20210116-0905.png)
然后观察这个js资源是不是首屏加载所必须的。但我们也不能就此定论说这个资源一定可以延迟加载，也许它就是想让页面在一开始loading的时候就捕获日志。
对于我们自己的网站，这个资源是首屏加载必须的吗？一定要在第一时间加载吗？需要根据特定的业务做衡量。
### 通过npm运行 Lighthouse工具
```bash
# 安装
npm install -g lighthouse
# 执行
lighthouse https://www.jd.com
# 输出性能检测报告
Generating results...
html output witten to /Users/smyh/Documents/wpt-mac-agent/www.jd.com._2021-01-16_09-00-00.html
```

2
15-前端进阶/02-前端书籍推荐.md
View File

@@ -2,7 +2,7 @@
## JavaScript 书籍
### 《》

2
17-推荐链接/北京有哪些IT互联网大厂.md
View File

@@ -78,6 +78,8 @@
- 多抓鱼
- 神策
### 三线大厂
- 58同城