update: 性能分析工具
This commit is contained in:
qianguyihao
parent
4deee86009
commit
a5b3248b50
@ -41,7 +41,7 @@
|
||||
|
||||
- 70% 的人上来就说减少合并资源、减少请求、数据缓存这些优化手段。
|
||||
|
||||
- 15% 的人会提到需要在 DevTools 下先看看首屏时间，围绕首屏来做优化。
|
||||
- 15% 的人会提到需要在 DevTools 下先看看首屏时间，可以先围绕首屏来做优化。
|
||||
|
||||
- 10%的人会提到需要接入一个性能平台来看看现状，诊断一下。
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
|
||||
正因为如此，我们才需要通过性能优化的技巧，并结合其他的技术手段来不断提高网站和App的用户体验，从而助力公司的业务增长；同时，我们也可以借此提升自己的技术实力，这对个人的职业成长也会以后很大的帮助。
|
||||
|
||||
3、只要产品上线了，随着**业务规模量和用户访问量的扩大**，性能优化就是不可回避的话题。在遇到性能问题时，有些人的解决办法是：用一些粗糙的手段把问题绕过去，但却给后面的人埋下了坑。有些人说出一句万能的话：
|
||||
3、只要产品上线了，随着**业务规模量和用户访问量的扩大**，性能优化就是不可回避的话题。在遇到性能问题时，有些人的解决办法是：用一些粗糙的手段把问题绕过去，但却给后面的人埋下了坑。这些人常说的依据口头禅是：
|
||||
|
||||
|
||||
|
||||
@ -79,6 +79,12 @@
|
||||
|
||||
- 腾讯根据长期数据监控发现，页面一秒钟延迟会造成页面访问量下降9.4%，跳出率增加8.3%，转化率下降3.5%。
|
||||
|
||||
### 补充
|
||||
|
||||
有些同学做事有拖延症，经常喜欢刷朋友圈、刷微博、看新闻，导致工作效率很低。为了解决这个问题，其实有个办法就是：把你的浏览器或者指定的软件，添加一个5秒的延迟，这时候，当你访问所有的网站，都会很慢。坚持一个月，你会发现，你再也不想看这些网站了，工作效率明显提升了许多。
|
||||
|
||||
这件事情从侧面也反映出：网站的性能如果不够好，对用户来说是一种折磨。时间一长，用户就不想用这个网站了。性能和网站的利益直接相关。涉及到：流量、搜索、转化率、用户体验。
|
||||
|
||||
|
||||
|
||||
## 如何学习性能优化
|
||||
|
||||
@ -6,11 +6,15 @@
|
||||
|
||||
### 打开网站的初体验
|
||||
|
||||
我们以淘宝网站为例。
|
||||
我们以淘宝网站为例，按下F12打开浏览器的调试模式。
|
||||
|
||||
|
||||
|
||||
上图中，鼠标长按刷新图标，松开鼠标后，会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。PS：只有淘宝等少数网站有这个选项，其他很多网站都没有。
|
||||
上图中，鼠标右键点击“刷新”图标（或者鼠标长按刷新图标，松开鼠标后），会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。
|
||||
|
||||
补充：这三个选项都是在调试模式下（按下F12弹出调试面板）才会出现的。
|
||||
|
||||
浏览器的DevTools初印象：
|
||||
|
||||
|
||||
|
||||
@ -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 介绍
|
||||
|
||||
|
||||
|
||||
lighthouse 是 chrome 浏览器的一个性能测量工具。我们先来看看它的性能指标，至于它具体使用，后续的内容再详细介绍。
|
||||
|
||||
|
||||
淘宝跑分举例：
|
||||
|
||||
|
||||
|
||||
|
||||
京东跑分举例：
|
||||
|
||||
|
||||
|
||||
|
||||
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报告：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中给出了一个优化建议：有些JS文件不是首屏加载必须的。
|
||||
|
||||
|
||||
|
||||
我们随便拿一个JS文件来测试（比如上图中，Header标签里的JS文件）。做法如下：
|
||||
|
||||
|
||||
|
||||
如上图所示，在 chrome 控制台输入快捷键「Cmd + Shift + P」，然后输入文本`block`，选择`Show Network request blocking`：
|
||||
|
||||
|
||||
|
||||
按照上面的步骤添加规则，点击add后，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
然后，我们切换到控制台的 network面板，并刷新页面：
|
||||
|
||||
|
||||
|
||||
然后观察这个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 介绍
|
||||
|
||||
|
||||
|
||||
lighthouse 是 chrome 浏览器的一个性能测量工具。我们先来看看它的性能指标，至于它具体使用，后续的内容再详细介绍。
|
||||
|
||||
|
||||
淘宝跑分举例：
|
||||
## chrome插件：PageSpeed Insights
|
||||
|
||||
|
||||
|
||||
|
||||
京东跑分举例：
|
||||
另外，google官方也有一个网址：https://developers.google.com/speed/pagespeed/insights/?hl=zh-cn
|
||||
|
||||
|
||||
但是这个网站在使用时，经常挂掉。
|
||||
|
||||
这个插件是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报告：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中给出了一个优化建议：有些JS文件不是首屏加载必须的。
|
||||
|
||||
|
||||
|
||||
我们随便拿一个JS文件来测试（比如上图中，Header标签里的JS文件）。做法如下：
|
||||
|
||||
|
||||
|
||||
如上图所示，在 chrome 控制台输入快捷键「Cmd + Shift + P」，然后输入文本`block`，选择`Show Network request blocking`：
|
||||
|
||||
|
||||
|
||||
按照上面的步骤添加规则，点击add后，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
然后，我们切换到控制台的 network面板，并刷新页面：
|
||||
|
||||
|
||||
|
||||
然后观察这个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,7 +2,7 @@
|
||||
## JavaScript 书籍
|
||||
|
||||
|
||||
|
||||
### 《》
|
||||
|
||||
|
||||
|
||||
|
||||
@ -78,6 +78,8 @@
|
||||
|
||||
- 多抓鱼
|
||||
|
||||
- 神策
|
||||
|
||||
### 三线大厂
|
||||
|
||||
- 58同城
|
||||
|
||||
Loading…
Reference in New Issue
Block a user