前端监控-首屏时间时间，页面渲染完成时间

朵朵奇葩向阳开＃

于 2024-07-18 18:16:05 发布

阅读量105

点赞数 1

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_44410862/article/details/140529995

版权

vue 专栏收录该内容

26 篇文章 4 订阅

订阅专栏

function addMonitorElement(idName) {

    function timer(n_hour, n_min, n_sec) {
      // var n_sec = 0; //秒
      // var n_min = 0; //分
      // var n_hour = 0; //时
      console.log(n_hour, n_min, n_sec)
      return setInterval(function () {

        window.str_sec = n_sec;
        window.str_min = n_min;
        window.str_hour = n_hour;
        if (window.str_sec < 10) {
          // window.str_sec = "0" + n_sec;
          window.str_sec = n_sec;
        }
        if (window.str_min < 10) {
          // window.str_min = "0" + n_min;
          window.str_min = n_min;
        }
        if (window.str_hour < 10) {
          // window.str_hour = "0" + n_hour;
          window.str_hour = n_hour;
        }
        var time = window.str_hour + ":" + window.str_min + ":" + window.str_sec;
        console.log(time, "时间")
        n_sec++;
        if (n_sec > 59) {
          n_sec = 0;
          n_min++;
        }
        if (n_min > 59) {
          n_sec = 0;
          n_hour++;
        }
      }, 1000);
    }
    //暂停
    window.isFirstEle = true
    window.str_hour = 0, window.str_min = 0, window.str_sec = 0


    this.idName = idName
    function handleScroll() {
      // 距顶部 有指定了DTD 是前者（DOCTYPE） 不然是后者
      // safiri的函数  window.pageYOffset 
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // 可视区高度
      var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      // 元素位置
      // console.log("id的name：" + idName + "  new之后这个没有值，前面的有值 this.idname：" + this.idName)
      var eleHeight = document.getElementById(idName).offsetTop
      // console.log("bu能看见元素",eleHeight,scrollTop,clientHeight)
      //元素高度
      // var Height = Number(document.getElementById("blue").style.height.replace('px', ''))
      var Height = Number(document.getElementById(idName).offsetHeight)
      if (eleHeight < clientHeight + scrollTop + 20 && clientHeight + scrollTop + 20 < eleHeight + Height + window.innerHeight) {
        console.log("能看见元素", eleHeight, scrollTop, clientHeight)
        //初始化计时器
        if (window.isFirstEle == true) {
          window.n_timer = timer(0, 0, 0);
          window.isFirstEle = false
        } else {
          clearInterval(window.n_timer);
          window.n_timer = timer(window.str_hour, window.str_min, window.str_sec);
        }
      } else {
        clearInterval(window.n_timer);
      }


    }
    function thorttle(fn, time) {
      window.flag = null;
      return function () {
        if (!window.flag) {
          window.flag = true;
          fn();
          setTimeout(() => {
            window.flag = false;
          }, time)
        }
      }
    }
    // 滚动节流
    const throttleHandleScroll = thorttle(handleScroll, 100)
    // 监听滚动
    window.addEventListener('scroll', throttleHandleScroll);
  }
  addMonitorElement("blue")
  let timing = performance.timing
  start = timing.navigationStart,
    dnsTime = 0,
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;
  //根据提供的api和属性，拿到对应的时间
  dnsTime = timing.domainLookupEnd - timing.domainLookupStar;
  tcpTime = timing.connectEnd - timing.connectStart;
  firstPaintTime = timing.responseStart - start;
  domRenderTime = timing.domContentLoadedEventEnd - start;
  loadTime = timing.loadEventEnd - start;
  console.log('DNS解析时间:', dnsTime,
    '\nTCP建立时间:', tcpTime,
    '\n首屏时间:', firstPaintTime,
    '\ndom渲染完成时间:', domRenderTime,
    '\n页面onload时间:', loadTime);