性能监控

一、官方指标标准

二、网页请求示意图

  • 页面请求
  • 单页面请求

网页加载时长时关注的是以下5个过程 :

  1. 重定向时间 :获取此网页前重定向所花费的时间
  2. DNS域名查找时间:查找此网页的 DNS 所花费的时间
  3. TCP服务器链接时间:用户连接到您的服务器所需的时间
  4. 服务器响应时间:您的服务器响应用户请求所需时间,其中包括从用户所在位置连接到您的服务器所需的网络时间
  5. 网页下载时间:下载网页所需的时间

三、指标的采集

  • 白屏时间:fp
js 复制代码
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.name === 'first-paint') {
        observer.disconnect()
      }
      // 白屏时间
      let FP = entry.startTime
    }
  })
  observer.observe({
    type: 'paint',
    buffered: true
  })
相关推荐
浪裡遊13 分钟前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz1 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom2 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1232 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023372 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦2 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir2 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
peachSoda73 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH3 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari