window.performance页面性能关键指标计算

就想讲点测试 2023-05-13 13:59:28

课时名称	课时知识点
window.performance页面性能关键指标计算	window.performance页面性能关键指标计算，白屏时间、可交互时间，页面完全加载时间

...全文

82 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

内容概要：本文详细介绍了前端性能监控的重要性及具体实施方法，重点讲解了Chrome Performance工具的使用。文章指出，前端开发人员应关注页面性能指标如白屏时间、首次内容绘制时间等，这些指标能够反映页面性能状况。performance对象挂载于window下，其中的timing属性存储了大量关键节点的时间戳数据，可用于计算页面性能指标，如DNS解析耗时、TCP连接耗时、请求耗时等。文章列举了多个核心性能指标（FP、FCP、LCP、DCL、TTI、SI、TBT、CLS），并针对每个指标提出了优化建议。此外，文章还介绍了如何使用Chrome Performance工具进行性能监控，包括开启和停止记录、刷新页面、解读报告等步骤，以及如何定位和分析性能问题。最后，文章强调了内存泄漏的潜在原因及其防范措施。适合人群：前端开发人员，尤其是对性能优化有一定需求的研发人员。使用场景及目标：①掌握前端性能监控的基本概念和重要性；②学会使用Chrome Performance工具进行性能监控和分析；③识别并优化关键性能指标，提升用户体验；④了解内存泄漏的原因及预防方法。阅读建议：本文内容详实，建议读者在实际开发环境中结合Chrome Performance工具进行实践操作，同时注意对比不同环境下的性能数据，以便更好地理解和应用文中提到的性能优化技巧。

本篇文章详细的介绍了使用Javascript监控前端相关数据，可以及时的监控前端的错误，加载时间等，有需要的可以了解一下。

window.performance 是浏览器提供的用于获取网页性能数据的接口，帮助开发者分析页面加载速度、资源请求时间、脚本执行效率等关键指标。

接口提供了访问性能相关的度量数据，这对于Web开发者来说非常有用，可以帮助他们优化网站的加载时间和响应速度。以下是timingnavigationmemoryresourcenavigationpaintmarkmeasurenow()mark()measure()这些指标共同构成了 Performance API 的核心功能，允许开发者深入了解他们的网页如何被用户设备解析和渲染，从而找出潜在的性能瓶颈并进行针对性优化。

在同样的网络环境下，有两个同样能满足你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，如果让你选择，你会用哪一个？ Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。页面的性能问题是前端开发中一个重要环节，但一直...

古古奇的课程社区_NO_2

1

社区成员

40

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章