web打印页面加载数据耗时

Posted 登楼痕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web打印页面加载数据耗时相关的知识,希望对你有一定的参考价值。

  1. navigationStart 加载起始时间
  2. redirectStart 重定向开始时间(如果发生了HTTP重定向,每次重定向都和当前文档同域的话,就返回开始重定向的fetchStart的值。其他情况,则返回0)
  3. redirectEnd 重定向结束时间(如果发生了HTTP重定向,每次重定向都和当前文档同域的话,就返回最后一次重定向接受完数据的时间。其他情况则返回0)
  4. fetchStart 浏览器发起资源请求时,如果有缓存,则返回读取缓存的开始时间
  5. domainLookupStart查询DNS的开始时间。如果请求没有发起DNS请求,如keep-alive,缓存等,则返回fetchStart
  6. domainLookupEnd 查询DNS的结束时间。如果没有发起DNS请求,同上
  7. connectStart 开始建立TCP请求的时间。如果请求是keep-alive,缓存等,则返回domainLookupEnd,(secureConnectionStart) 如果在进行TLS或SSL,则返回握手时间
  8. connectEnd 完成TCP链接的时间。如果是keep-alive,缓存等,同connectStart
  9. requestStart 发起请求的时间
  10. responseStart 服务器开始响应的时间
  11. unloadEventStart unload事件触发的时间
  12. unloadEventEnd unload事件执行完的时间
  13. responseEnd 当浏览器接收到响应的最后一个字节时的时间
  14. domLoading 表示开始解析第一批收到的 html 文档的字节
  15. domInteractive 表示完成全部 HTML 的解析并且 DOM 构建完毕
  16. domContentLoadedEventStart 开始触发DomContentLoadedEvent事件的时间
  17. domContentLoadedEventEnd DomContentLoadedEvent事件结束的时间
  18. domComplete 表示所有的处理都已完成并且所有的附属资源都已经下载完毕
  19. loadEventStart 触发load的时间,如没有则返回0
  20. loadEventEnd load事件执行完的时间,如没有则返回0

let obj =  performance.timing;

      setTimeout(()=>

        console.log(

        "网页重定向的耗时",

        obj.redirectEnd  -

          obj.redirectStart

      );

       console.log(

        "检查本地缓存的耗时",

        obj.domainLookupStart   -

          obj.fetchStart

      );

   console.log(

        "DNS查询的耗时",

        obj.domainLookupEnd -

          obj.domainLookupStart

      );

       console.log(

        "TCP链接的耗时",

        obj.connectEnd  -

          obj.connectEnd

      );

      console.log(

        "从客户端发起请求到接收响应的时间",

        obj.responseStart - obj.requestStart

      );

      console.log(

        "下载服务端返回数据的时间",

        obj.responseEnd  - obj.responseStart

      );

      console.log(

        "http请求总耗时",

        obj.responseEnd - obj.requestStart

      );

      console.log(

        "首包时间",

        obj.responseStart  - obj.domainLookupStart

      );

      console.log(

        "白屏时间",

        obj.responseEnd - obj.fetchStart

      );

      console.log(

        "首次可交互时间",

        obj.domInteractive - obj.fetchStart

      );

      console.log(

        "DOM 解析耗时",

        obj.domInteractive - obj.responseEnd

      );

      console.log(

        "DOM 加载完成的时间",

        obj.domInteractive - obj.navigationStart

      );

      console.log(

        "页面load的总耗时",

        obj.loadEventEnd - obj.navigationStart

      );

      ,1000)

以上是关于web打印页面加载数据耗时的主要内容,如果未能解决你的问题,请参考以下文章

web打印页面加载数据耗时

移动web性能测试笔记之一

web性能优化之页面加载体验(骨架屏)

jQuery进度条加载直到页面重定向

APM 页面加载耗时校准

web 实现大量打印