性能监控

一、官方指标标准

二、网页请求示意图

  • 页面请求
  • 单页面请求

网页加载时长时关注的是以下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
  })
相关推荐
满分观察网友z2 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构7 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙14 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1115 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆19 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er24 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0627 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444030 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆30 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子33 分钟前
Web开发中的文件下载
前端·javascript·面试