利用Performance API分析网站性能

最新推荐文章于 2023-12-15 18:55:38 发布
VIP文章 最新推荐文章于 2023-12-15 18:55:38 发布
阅读量3.3k 收藏 1
点赞数 2
分类专栏： HTML 文章标签： performanc H5 分析网站性能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_kite/article/details/78568877
版权

performance

window.performance.timing对象包含了完整的网页加载性能数据, 下面详细介绍如何通过对象各个属性获取页面加载期间各个阶段的性能

  • 页面加载的第一个时间点是navigationStart, 表示上一个页面的unload事件触发, 接下来的事件点是fetchStart, 表示开始获取当前页面内容. fetchStart时间点和navigationStart时间点之间的时间差是浏览器内核为加载新页面做的一些准备工作耗时.
  • 获取页面内容的第一步是查询是否有跟页面相关的资源缓存, 查询完毕之后, 会触发开始DNS解析的时间点domainLookupStart. domainLookupStart时间点和fetchStart事件点之间的时间差是查询缓存所消耗的时间.
  • DNS解析结束的时间点是domainLookupEnd. domainLookupEnd时间点和domainLookupStart时间点之间的时间差是DNS解析消耗的时间
  • DNS解析技术之后会开始建立TCP连接, TCP连接开始和结束的时间点分别是connectStart和connectEnd. connectStart时间点紧接着domainLookupEnd时间点, connectEnd时间点和connectStart时间点之间的时间差是建立TCP消耗的时间.
  • TCP连接建立之后, 开始发送请求内容至服务器端, 这个时间点是
最低0.47元/天 解锁文章
刘翾
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web性能API—帮你分析前端性能
02-02
开发一个现代化的互联网网站是一项复杂的任务，需要各种职能的密切合作以应对用户日新月异的需求。其中，网页的性能直接决定了用户的体验，而随着新型客户端浏览设备的出现与网站功能的日益复杂化，对于性能的专注也达到了前所未有的高度。借助传统的开发者工具查看网络请求，例如浏览器的F12工具、Fiddler、Charles等等。基本方式是通过追踪HTTP请求与响应的时间，以图形的方式列出所有资源的下载情况。这种方式依赖于人为操作，难以实现批量测试与统计。使用侵入式的JavaScript代码检测DOM事件的发生时间。例如DOMContentLoaded和[removed]等
《现代Javascript高级教程》提升网页性能的利器
linwu的博客
07-04 146
@charset "UTF-8"; .markdown-body { font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB...
监控浏览器页面展示性能的工具
lgq2016的博客
10-31 408
B/S架构，用户都是使用浏览器访问后端服务，产品在开发时需要关注用户的体验，不仅包含交互的友好，性能指标也非常重要。对于后端开发常见的性能指标，可能包含：reponse time，吞吐量等。此外，浏览器页面导航，html数据解析，生成可显示位图等待阶段的性能分析也十分重要。本篇文章，简单介绍两种获取浏览器页面展示的性能分析数据的工具。
JS 中的 performance，测量web应用性能
知之为知之，不知为不知
05-03 660
Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能
深入理解前端性能监控
weixin_33916256的博客
04-08 592
在同样的网络环境下，有两个同样能满足你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，如果让你选择，你会用哪一个？ 页面的性能问题是前端开发中一个重要环节，但一直以来我们没有比较好的手段，来检测页面的性能。直到W3C性能小组引入的新的API window.performance，目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对...
如何提升 API 的性能
somenzz的博客
12-02 1424
深思熟虑的设计还必须考虑到 API 的性能，如果 API 不能响应越来越多的请求，不能满足不断变化的业务需求，不能按预期运行，良好的设计就毫无意义。那什么是 API 的性能？与任何性能一样...
Web API——Performance属性了解和使用
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
12-15 1453
详细介绍在做性能监控时，要了解的Web API——performance的属性和使用
Performance — 前端性能监控利器 方法详解
huangkang1995的博客
11-20 1032
转载 https://www.cnblogs.com/bldxh/p/6857324.html 最近在写一个监控脚本，终于有机会接触到了这一块，整理后写下了本文。 Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。 属性 timing （PerformanceTiming） 从输入url到用户可以使用页面的全过程时间统计，会返回一个PerformanceTimin
API设计中性能提升的10种解决方法
如需功能开发提供开发说明，请发送邮件至[email protected]
05-07 432
api的设计涉及到的方面很多， 分类是一个基本的思考方式。如果可以形成一个系列性的文字，那就从性能开始吧。 就像任何性能一样，API 性能主要取决于如何响应不同类型的请求。例如:典型的电商场景，显示用户当前的订单。应用程序从一个 API 获取订单详情。但是，如果希望用户在一个地方能查看他们所有的订单，这意味着，我们的 API 现在将返回比以前更多的数据，后台的负载会更大。如何确保我API 能够将...
使用性能API快速分析web前端性能
weixin_33852020的博客
11-18 184
页面的性能问题一直是产品开发过程中的重要一环，很多公司也一直在使用各种方式监控产品的页面性能。从控制台工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange这种侵入式javascript代码方式来检测DOM事件发生和结束的时间，再到使用第三方工具如WebPagetest...
Web性能时机API「Web Performance Timing API」-crx插件
03-09
使用性能定时API从您当前的网站上绘制常见的性能计时数据。...利用Web Performance API快速查看网站的网站性能。 它适用于软件工程师和一般对Web性能感兴趣的人员。 支持语言:English (United States)
Web Performance Timing API-crx插件
04-01
语言:English (United States) 使用性能时序API从当前网站图表中的常见性能时序数据。 快速查看网站的站点性能，利用Web性能API。 这是一般的软件工程师和对Web性能感兴趣的人。
HTML5-Performance-API-GTM-Script:结合了HTML5性能计时和导航API的Google跟踪代码管理器脚本
04-30
使用Google跟踪代码管理器的Google Analytics（分析）中HTML5性能事件利用HTML5和本机内置在浏览器中。 提供高分辨率的时间戳，并超过约2,000的精度。 超过70％，而Google则为1％。支持HTML5导航和资源计时API ...
Performance-Monitoring:为showjoy前端组开发的前端性能监控系统
04-27
Performance-Monitoring为showjoy前端组开发的前端性能监控系统需求服务器自动跑线上页面，收集性能指标数据，前端展示数据。收集真实用户的线上性能数据，在后台页面展示。参考文档目标完成服务器搭建，写好埋点js...
openapi-perf:自动OpenAPI端点性能测试
04-17
OpenAPI性能 :robot: 自动OpenAPI性能测试 :robot: 说明文件： 源代码： 持续整合： 该项目将利用OpenAPI架构来构建自动化的REST API性能测试和基准测试工具。 OpenAPI为REST API定义了一个接口，该接口允许自动生成...
H5实现调用本地摄像头实现实时视频以及拍照功能
热门推荐
翾的博客
11-14 8万+
效果这是柚子皮…博主就穿个小背心就不露脸了…getUserMedia APIHTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.旧版API : navigator.getUserMedia 新版API : navigator.mediaDevices.getUserMedia旧版语法: getUserMedi
H5实现手机摇一摇
翾的博客
11-17 5173
方向事件deviceorientation该事件实在设备方向发生变化时触发, 使用方法如下;window.addEventListener('deviceorientation', orientationHandler, true);回调函数orientationHandler会接收到一个DeviceOrientationEvent类型参数, 包含以下信息. 属性名 说明 absolute
HTML5 拖放Drag 和 drop用法以及事件介绍
翾的博客
05-02 4834
设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：<img draggable="true">拖拽事件 名称 作用 dragstart 在拖动时触发 dragend 在拖动完成时触发 dragenter 目标元素上绑定dragenter事件,当拖拽元素进入目标元素时触发 dragover 目标元素上绑定dragover事件,
H5PostMessages实现跨页面通信
翾的博客
11-17 4595
效果图postMessagesHTML5提供了新型机制PostMessage实现安全的跨源通信.语法otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindow属性, 执行, window.open返回的窗口对象. message: 将要发送到其他窗
Chrome Performance 性能分析
06-09
针对 Chrome Performance 性能分析，可以通过以下步骤进行： 1. 打开 Chrome 开发者工具（快捷键 F12），进入 Performance 面板。 2. 点击左上角的 Record 按钮开始记录性能数据。 3. 在浏览器中进行操作，比如打开一个网页、进行交互等。 4. 停止记录性能数据，分析性能瓶颈。 在 Performance 面板中，可以看到多个子面板，包括 Summary、Flame Chart、Bottom-Up、Call Tree 等。这些子面板可以帮助我们更详细地分析性能问题。比如，通过 Flame Chart 可以看到每个函数的执行时间以及调用关系；通过 Bottom-Up 可以看到每个函数的 CPU 使用率和内存占用情况；通过 Call Tree 可以查看函数的执行时间和调用次数等。 除了 Chrome 开发者工具，还有一些第三方工具也可以用于 Chrome Performance 性能分析，比如 Lighthouse、PageSpeed Insights 等。这些工具可以提供更多的性能指标和建议，帮助我们优化网站性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值