前端全链路优化实战课
15
15
1.0x
00:00/00:00
登录|注册

08|网页指标:如何快速把Web Vitals集成到实际项目?

你好,我是三桥。
这节课,我将为你介绍实现前端全链路指标数据的第一步,把 Web Vitals 集成到你的项目。
我们先了解一下前端项目的现状。
近年来,前端开发者从 0 到 1 开发新项目,技术选型这方面基本上会将 Vue 和 React 作为前端开发首选框架之一,因为它们的模块化开发模式能让我们方便、快速地引入第三方框架或库,为开发更复杂的功能提供强大的后盾。
实际上,前端工程师需要负责的项目并不仅仅局限于 Vue 和 React 这两种框架,有些公司还在维护着最传统的旧前端系统,他们仍然使用着古老的技术栈,例如 JSP、ASP、PHP 以及 jQuery 等。
那在这种环境下,前端同学应该如何把 Web Vital 的网页指标应用到不同架构的前端项目上,并实现全链路的分析和体验优化呢?这是一个很有趣的题目。

使用 Web Vitals 的第一步

Web Vitals 网页指标是由 Google 提出的。Google 还开发了一套前端 SDK,方便前端同学直接通过函数获取网页指标数据。
通常,想要前端项目中使用第三方库可以通过 NPM 安装依赖或者 script 链接引入的方式实现。而 Web Vitals 库正好可以支持这两种方式。
如果前端项目是通过 NPM 安装依赖,比如 Vue 或 React 项目,就可以直接使用 npm、yarn 或 pnpm 安装命令来安装 Web Vitals。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

1. Web Vitals是由Google提出的网页指标,可以通过NPM安装或script标签引入Web Vitals库。 2. Web Vitals库提供了6种网页指标的方法,包括onCLS、onFID、onINP、onLCP、onTTFB,可以通过这些方法获取网页指标数据。 3. 在Vue项目中,可以通过import引入Web Vitals库,并在mounted生命周期内调用相应的方法来获取网页指标数据。 4. 在React项目中,也可以通过import引入Web Vitals库,并在组件中使用useEffect来调用相应的方法获取网页指标数据。 5. Web Vitals库的onXXX方法提供了回调函数和可选的参数属性,可以根据需求传入自定义的回调函数和调整指标报告的阈值。 6. 通过获取网页指标数据,可以实现全链路的分析和体验优化,提升前端项目的性能和用户体验。 7. 将Web Vitals库整合到前端全链路的方法,包括定义存储当前页面网页指标数据的属性perfData,实现回调函数report,设计函数mapMetric来处理获取到的指标数据,并讨论了Web Vitals的局限性。 8. Web Vitals的局限性包括未来可能发生的变化以及浏览器的兼容性问题,但这并不妨碍通过它发现网页性能问题。 9. 思考题:何时上报网页指标数据?

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《前端全链路优化实战课》
新⼈⾸单¥59
立即购买
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
显示
设置
留言
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部
文章页面操作
MAC
windows
作用
esc
esc
退出沉浸式阅读
shift + f
f11
进入/退出沉浸式
command + ⬆️
home
滚动到页面顶部
command + ⬇️
end
滚动到页面底部
⬅️ (仅针对订阅)
⬅️ (仅针对订阅)
上一篇
➡️ (仅针对订阅)
➡️ (仅针对订阅)
下一篇
command + j
page up
向下滚动一屏
command + k
page down
向上滚动一屏
p
p
音频播放/暂停
j
j
向下滚动一点
k
k
向上滚动一点
空格
空格
向下滚动一屏
播放器操作
MAC
windows
作用
esc
esc
退出全屏
⬅️
⬅️
快退
➡️
➡️
快进
空格
空格
视频播放/暂停(视频全屏时生效)