update: 性能分析工具

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

@@ -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秒的延迟，这时候，当你访问所有的网站，都会很慢。坚持一个月，你会发现，你再也不想看这些网站了，工作效率明显提升了许多。
+
+这件事情从侧面也反映出：网站的性能如果不够好，对用户来说是一种折磨。时间一长，用户就不想用这个网站了。性能和网站的利益直接相关。涉及到：流量、搜索、转化率、用户体验。
+
 
 
 ## 如何学习性能优化

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

@@ -6,19 +6,23 @@
 
 ### 打开网站的初体验
 
-我们以淘宝网站为例。
+我们以淘宝网站为例，按下F12打开浏览器的调试模式。
 
 ![](http://img.smyhvae.com/20210115_1601.png)
 
-上图中，鼠标长按刷新图标，松开鼠标后，会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。PS：只有淘宝等少数网站有这个选项，其他很多网站都没有。
+上图中，鼠标右键点击“刷新”图标（或者鼠标长按刷新图标，松开鼠标后），会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。
+
+补充：这三个选项都是在调试模式下（按下F12弹出调试面板）才会出现的。
+
+浏览器的DevTools初印象：
 
 ![](https://img.smyhvae.com/20210115_1617.png)
 
 上图中，打开 chrome 调试工具，点开「设置」icon，下面的四个选项中，除了“Group by frame”之外，其他的三个选项都可以勾选上。
 
 我们可以看到淘宝网站的一些指标：
 
-- 资源量是 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,91 +526,24 @@ First View展示的是：首次访问时，总的加载时间。这里面提供
 
 我们可以在局域网部署 WebPageTest 工具，具体方法可自行研究。
 
-## 使用LightHouse分析性能
 
-我们之所以使用不同的性能测量工具，是因为他们都有不同的特点。WebPageTest 可以生成详细的性能测试报告；而 接下来要讲的 lighthouse 不仅可以帮我们生成测试报告，还可以给出一些针对性的优化建议。
-### Lighthouse 介绍
 
-![](http://img.smyhvae.com/20210115-1739.png)
+## chrome插件：PageSpeed Insights
 
-lighthouse 是 chrome 浏览器的一个性能测量工具。我们先来看看它的性能指标，至于它具体使用，后续的内容再详细介绍。
 
 
-淘宝跑分举例：
+另外，google官方也有一个网址：https://developers.google.com/speed/pagespeed/insights/?hl=zh-cn
 
+但是这个网站在使用时，经常挂掉。
 
-![](http://img.smyhvae.com/20210115-1758.png)
+这个插件是2018年的，已经好几年没更新了。大家参考即可。
 
-京东跑分举例：
 
-![](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  还会给出一些优化建议：
-
-- 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
-```
-
 
 
 ## 实时动态测量性能的API

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

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

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

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