前端性能优化实践之工具篇（1）

1、开篇

• 解决问题 你是在绕过问题，还是找到本质 解决了本质问题

2、性能指标和 优化目标

• 找个实际的例子说明这个事情 ， 打开淘宝

1、按住 刷新按钮 选择 清缓存强制刷新 
 2、然后在 network 看 资源情况 
 3、重点关注 waterfall 瀑布流 
 4、并且 放在一个 资源的 waterfall 上 就可 查看 它的详细内容了 
 5、
复制代码

• 基础部分
  

• waterfall 细节  TTFB  Time to first byte

• 结果保存

• lighthouse
  网络异常，图片无法展示

  |
  
  
• 比较重要的宏观指标

1、页面响应非常 迅速，包括交互菜单 搜索 和 搜索关联的东西 
2、页面流畅 不卡顿 1s 60fps
3、请求需要在 1s 内返回回来 ,不行就压缩，压缩还是不行，加 loading 过程，就不会显得生硬
复制代码

• 如何查看页面的 fps

1、mac command shift + p  选择 rendering 
 2、选择 Frame Rendering Stats
复制代码

• 再次强调  请求比较慢，则 添加 loading 效果

3、RAIL 性能 测量模型 google 给出

• 基于用户，让用户有很好的体验

• 将 指标列出来
  

• 性能测量 工具

4、WebPageTest 评估网站性能

1、打开站点 https://www.webpagetest.org/
2、简单配置一下 
3、start test 
4、拿到结果 需要注意 几个重要的指标 
复制代码

• 简单配置一下

• 输入 淘宝地址开始测试

• 拿到结果 需要 注意 下面几个 事情

• TBT

• 关于 瀑布流 部分

• LCP

• 本地起 ？暂时不需要

5、Lighthouse 评估网站性能

1、使用 在线版本 貌似更加准确 https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect
2、关心主要的指标 
3、给出的建议 是有效的 需要结合实际去 尝试一下 
复制代码

• 指标

• 这些建议 可以去更改

• 中文展示 有点瓜皮。。。
  
• 还有一个重要的事情，如何将一些请求 block 住 不让发送
  

6、使用 Chrome DevTools(最常用工具)  评估网站性能

1、先拿到 测试的项目 
2、npm i 安装依赖 然后启动项目 先看 network 部分 
3、再看 performance 
4、
复制代码

• network 部分

• 压缩之后

• performance 鼠标按住 就可移动

• 然后 在 domContentLoaded 前面一般 最下面 就是自己代码 部分 上面是框架部分

• 检查代码 发现此处有 延迟 删掉就行  注意 node 服务 需要重启

• esc 妙用
  网络异常，图片无法展示

  |

7、常用的性能测量 APIs

• 本节主要是几个 比较实用的例子说明，当然只是一个引子，更多的内容，需要阅读文档

1、想知道用户什么时候才能进行页面交互，如何拿到 TTI  并且可以发送给后端 进行处理

• 怎么实现这个 问题

• 更多计算 性能相关的公式 在这里 doc 文件夹下 放在此处 方便粘贴

DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart
复制代码

2、如何将 任务中的长任务 找到 并且 取出来 ？

• 在项目中设置 了 一个 1.5s 的任务

• 页面打印结果

3、如何检测 用户是否还停留在这个页面上 ？ 如何监听，感觉非常有用  

• 如果 切出去了，就不用继续加载东西，等回来之后再加载

• 然后 当用户 切出去时 再回来 发现 打印了

• 然后 就可以 针对 切出去时候 页面处理

4、如何拿到 用户当前的网络状态 ？ 这样的话可以在不同网络下处理，弱网则给小的图片，网络状态很好，则推流

• 最重要的是 connection.effectiveType