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

前端付豪
573 阅读3分钟

1、开篇

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

image.png

image.png

2、性能指标和 优化目标

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

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

  • 基础部分

image.png

  • waterfall 细节 TTFB Time to first byte

image.png

  • 结果保存

image.png

  • lighthouse image.png

  • 比较重要的宏观指标 

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

  • 如何查看页面的 fps 

     1、mac command shift + p  选择 rendering 
 2、选择 Frame Rendering Stats

image.png

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

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

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

image.png

image.png

  • 将 指标列出来

image.png

image.png

image.png

  • 性能测量 工具

image.png

4、WebPageTest 评估网站性能

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

image.png

  • 输入 淘宝地址开始测试

image.png

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

image.png

image.png

  • TBT

image.png

  • 关于 瀑布流 部分

image.png

image.png

  • LCP

image.png

  • 本地起 ？暂时不需要

5、Lighthouse 评估网站性能

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

image.png

  • 这些建议 可以去更改

image.png

  • 中文展示 有点瓜皮。。。

  • 还有一个重要的事情，如何将一些请求 block 住 不让发送

image.png

image.png

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

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

image.png

  • 压缩之后

image.png

image.png

image.png

  • performance 鼠标按住 就可移动

image.png

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

image.png

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

image.png

  • esc 妙用 image.png

7、常用的性能测量 APIs

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

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

image.png

  • 怎么实现这个 问题

image.png

image.png

  • 更多计算 性能相关的公式 在这里 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、如何将 任务中的长任务 找到 并且 取出来 ？

image.png

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

image.png

  • 页面打印结果

image.png

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

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

image.png

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

image.png

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

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

image.png

  • 最重要的是 connection.effectiveType
avatar
文章
阅读
粉丝