网页性能优化，各种指标检测，谷歌统计使用,pagespeed，使用 Performance API

我有一棵树

已于 2024-02-21 00:05:55 修改

阅读量556

点赞数

文章标签：前端

于 2023-07-19 14:43:49 首次发布

本文链接：https://blog.csdn.net/qq_17335549/article/details/131807558

版权

每日鸡汤：每个你想要学习的瞬间都是未来的你像自己求救

前端性能优化是个很重要的模块，但是如何查看性能优化后的网页的效果也是很重要的，要从技术的层面总结，不能只靠用户的感受。

常用的评估网页应用性能的指标有 LCP, FID, CLS, FCP, INP, TTFB 等，查看某个网址的性能指标的方法有以下两种

没错这个是我在谷歌统计中发现的，真的很好用。随便输入一个网站就可以看到结果类似下图，可以看到各种指标的耗时

还有一个愚蠢的问题，就是我之前看到别人发这么一个图片，我百思不得其解到底是那个网站的截图啊，各种搜索还是没有结果，但是十分肯定的是从https://search.google.com/这个网站点击什么进去的。英文不太好，再次记录一下这个的入口

不瞒你说，我真的找了好久才找到这里，被自己蠢哭，这次记录下来，可别像无头苍蝇一样乱撞了。

Performance API 是 js 中的一组 api 用于精确度量、控制、增强浏览器的性能表现。

性能监测：检测页面的加载时间，资源加载时间，脚本加载时间等关键性能指标，使用 performance.timing 对象来获取页面加载阶段的时间戳，并计算相应的性能指标
用户体验检测：使用 navigation timing 和 user timing api 来检测页面交互过程中的性能表现，可以使用performance.getEntriesByType('navigation') 和 performance.mark() 等方法来收集用户体验数据。
资源加载优化：通过监测资源加载时间和顺序，优化页面中的资源加载顺序和方式，以减少页面加载时间和提高用户体验。可以使用 performance.getEntriesByType('resource') 来获取资源加载信息，并根据需要进行优化。
代码性能优化：使用 Performance API 中的 User Timing API 来监测 JavaScript 代码的执行时间和性能瓶颈，以优化代码逻辑和执行效率。可以使用 performance.mark() 和 performance.measure() 来标记和测量代码段的执行时间。
页面性能分析：结合 Performance API 提供的性能数据，使用性能分析工具（如 Chrome DevTools 中的 Performance 面板）来分析页面性能，并找出性能瓶颈和优化方案。可以通过查看时间线、调用栈、水平线等图表来识别性能问题并进行优化。

开发者工具中的性能分析工具 performance 面板和 performance api 都可以用于性能反喜和调试，但是实现原理不同