diff --git a/13-前端性能优化/00-前端性能优化认知.md b/13-前端性能优化/00-前端性能优化认知.md index c3f3251..ed7591d 100644 --- a/13-前端性能优化/00-前端性能优化认知.md +++ b/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秒的延迟，这时候，当你访问所有的网站，都会很慢。坚持一个月，你会发现，你再也不想看这些网站了，工作效率明显提升了许多。 + +这件事情从侧面也反映出：网站的性能如果不够好，对用户来说是一种折磨。时间一长，用户就不想用这个网站了。性能和网站的利益直接相关。涉及到：流量、搜索、转化率、用户体验。 + ## 如何学习性能优化 diff --git a/13-前端性能优化/01-性能优化的指标和工具.md b/13-前端性能优化/01-前端性能分析工具和指标.md similarity index 93% rename from 13-前端性能优化/01-性能优化的指标和工具.md rename to 13-前端性能优化/01-前端性能分析工具和指标.md index ced572e..83fc39a 100644 --- a/13-前端性能优化/01-性能优化的指标和工具.md +++ b/13-前端性能优化/01-前端性能分析工具和指标.md @@ -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 -``` diff --git a/15-前端进阶/02-前端书籍推荐.md b/15-前端进阶/02-前端书籍推荐.md index 6d7c5e2..f5fc427 100644 --- a/15-前端进阶/02-前端书籍推荐.md +++ b/15-前端进阶/02-前端书籍推荐.md @@ -2,7 +2,7 @@ ## JavaScript 书籍 - +### 《》 diff --git a/17-推荐链接/北京有哪些IT互联网大厂.md b/17-推荐链接/北京有哪些IT互联网大厂.md index 152a05d..dbc92bb 100644 --- a/17-推荐链接/北京有哪些IT互联网大厂.md +++ b/17-推荐链接/北京有哪些IT互联网大厂.md @@ -78,6 +78,8 @@ - 多抓鱼 +- 神策 + ### 三线大厂 - 58同城