使用window.performance API

简介: `window.performance` 是W3C提供的性能API,IE9+支持,用于监控页面加载各阶段耗时。包含navigation、timing等字段,可精确统计DNS查询、TCP连接、DOM解析、白屏、domready等关键性能指标,助力前端性能优化。

Note
window.performance 是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持。
一个performance对象的完整结构包括:

  1. memory字段代表JavaScript对内存的占用。
  2. navigation字段统计的是一些网页导航相关的数据:
  3. redirectCount:重定向的数量(只读),但是这个接口有同源策略限制,即仅能检测同源的重定向;
  4. type 返回值应该是0,1,2 中的一个。分别对应三个枚举值:
    ○ 0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面,比如点一个链接,或者一般的get方式)
    ○ 1 : TYPE_RELOAD (用户通过刷新,包括JS调用刷新接口等方式访问页面)
    ○ 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面) 最重要的是timing字段的统计数据,它包含了网络、解析等一系列的时间数据。
    2.2.1 timing API
    timing的整体结构包括:

  5. startTime:有些浏览器实现为navigationStart,代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com,在地址栏输入google.com并回车,浏览器的执行动作依次为:unload当前文档(即baidu.com)->请求下一文档(即google.com)。navigationStart的值便是触发unload当前文档的时间节点。
    ○ 如果当前文档为空,则navigationStart的值等于fetchStart。

  6. redirectStart和redirectEnd:如果页面是由redirect而来,则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点;
  7. unloadEventStart和unloadEventEnd:如果前一个文档和请求的文档是同一个域的,则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0;
  8. fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间,浏览器会检查当前文档的缓存;
  9. domainLookupStart和domainLookupEnd分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询(比如使用了cache),则两者的值都等于fetchStart;
  10. connectStart和connectEnd分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接(比如使用持久化连接webscoket),则两者都等于domainLookupEnd;
  11. secureConnectionStart:可选。如果页面使用HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回undefined。如果该属性可用,但没有使用HTTPS,则返回0;
  12. requestStart代表浏览器发起请求的时间节点,请求的方式可以是请求服务器、缓存、本地资源等;
  13. responseStart和responseEnd分别代表浏览器收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻;
  14. domLoading代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性,domLoading的值就等于readyState改变为loading的时间节点;
  15. domInteractive代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady,它早于DOMReady触发,代表html文档解析完毕(即dom tree创建完成)但是内嵌资源(比如外链css、js等)还未加载的时间点;
  16. domContentLoadedEventStart:代表DOMContentLoaded事件触发的时间节点:
  17. 页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。
  18. domContentLoadedEventEnd:代表DOMContentLoaded事件完成的时间节点,此刻用户可以对页面进行操作,也就是jQuery中的domready时间;
  19. domComplete:html文档完全解析完毕的时间节点;
  20. loadEventStart和loadEventEnd分别代表onload事件触发和结束的时间节点
    2.2.2 计算性能指标
    Note
    可以使用Navigation.timing 统计到的时间数据来计算一些页面性能指标,比如DNS查询耗时、白屏时间、domready等等。
    ● DNS查询耗时 = domainLookupEnd - domainLookupStart
    ● TCP链接耗时 = connectEnd - connectStart
    ● request请求耗时 = responseEnd - responseStart
    ● 解析dom树耗时 = domComplete - domInteractive
    ● 白屏时间 = domloadng - fetchStart
    ● domready时间 = domContentLoadedEventEnd - fetchStart
    ● onload时间 = loadEventEnd - fetchStart
相关文章
|
13天前
|
SQL 算法 Java
MybatisPlus讲义
本项目基于若依框架与AI技术,打造智慧养老管理系统。涵盖来访、入住、服务、财务等模块,分管理后台与家属端,结合Vue3、SpringBoot、Redis、物联网等技术,融合大模型与AI工具,助力高效开发,响应中国智慧养老发展趋势。
|
13天前
|
Java 开发工具 Maven
服务端(DevBox)-项目创建
使用Sealos在DevBox中创建SpringBoot项目zxyf-management,配置Java环境与Docker容器,通过Cursor智能开发工具一键启动云端应用。无需手动输入命令,自动下载依赖并部署,结合云端域名快速访问服务,实现高效开发与运行。
|
13天前
|
数据安全/隐私保护
服务端(Cursor)-接口开发(登录认证)
根据接口文档,完成员工登录功能开发,实现POST /login接口。员工通过用户名密码登录,验证成功后返回包含JWT令牌的响应,后续请求需在header中携带token,否则返回401。已完成接口测试与权限校验集成。
|
13天前
|
前端开发
前端(Cursor)-员工管理
根据页面原型与接口文档,完成员工管理功能开发,实现增删改查及分页查询。新增表单宽800px,按要求布局六行字段,工作经历支持动态增删,每项含时间、公司、职位,确保界面与交互符合设计。
|
13天前
|
存储 对象存储
服务端(Cursor)-接口开发(文件上传)
Sealos开通对象存储服务,首次使用需创建Bucket并填写名称。根据接口文档实现文件上传:POST请求至/upload,参数为file,返回文件访问路径。配置AK/SK及内外网地址,使用指定存储桶。通过ApiFox测试上传,文件将同步至Sealos对象存储。详细操作参考官方指南。
|
13天前
|
jenkins Java 持续交付
Jenkins配置编译项目
Jenkins配置编译任务,实现从GitLab拉取代码,通过Maven/Node编译打包,Docker构建镜像并推送至CCE仓库,kubectl更新服务。支持后台app-web、system-server及前端Vue项目自动化构建与部署,结合86/164服务器特性导出镜像tar包,实现全流程持续集成。
|
13天前
|
jenkins Java 持续交付
Jenkins前置配置
本文介绍Jenkins与GitLab集成的完整配置流程:包括GitLab账号创建、SSH密钥配置、API Token生成,Jenkins中GitLab连接、凭据管理、全局Git信息设置,以及节点服务器环境搭建(JDK、Maven、Node、Docker等),并详细说明Jenkins节点通过SSH方式接入的步骤,实现自动化拉取代码、构建打包与持续集成。
|
1天前
|
缓存 前端开发 JavaScript
雅虎14条Web性能优化规则
雅虎14条Web性能优化规则,涵盖减少HTTP请求、使用CDN、压缩资源、合理缓存、优化CSS/JS加载、图片处理、Cookie管理及移动端适配等,全面提升网页加载速度与用户体验。
|
1天前
|
缓存 JavaScript 前端开发
重绘回流过程
浏览器渲染:HTML解析为DOM树,CSS生成CSSOM,合并为渲染树,再布局、绘制。DOM树含所有标签,渲染树仅含可见元素。CSS阻塞渲染但不阻塞DOM解析。回流(布局变动)必触发重绘(外观变动),优化可减少回流重绘,提升性能。
|
1天前
|
缓存 网络协议
网络优化方案
通过合并资源、压缩文件、合理利用缓存和DNS预解析,减少HTTP请求数与资源大小,提升页面加载速度。采用哈希命名实现缓存更新,确保用户获取最新资源,优化整体网络性能。(239字)