美文网首页
HTML首屏和白屏时间如何计算

HTML首屏和白屏时间如何计算

作者: 三左君 | 来源:发表于2020-06-02 17:42 被阅读0次

    performance

    首屏

    手机屏幕不滚动的情况下,从用户打开网站开始到渲染完成的时间。

    这里我们要用的是window.performance.timing属性

    属性 含义
    navigationStart 准备加载页面的起始时间
    domainLookupStart 开始进行dns查询的时间
    domainLookupEnd dns查询结束的时间
    connectStart TCP连接开始
    connectEnd TCP连接完成
    domInteractive 解析dom树开始
    domComplete 解析dom树结束
    loadEventEnd onload事件结束的时间
    fetchStart 开始检查缓存或开始获取资源的时间
    domLoading loading的时间 (这个时候还木有开始解析文档)

    页面加载完成是没API的,那么我们就需要在首屏做标记,比如加载完哪个图片,或者加载到哪个JS就可以标记首屏加载结束。

    首屏 = 标记时间 - performance.timing.navigationStart

    白屏时间

    白屏就是从用户打开网站到显示body的时间,我们可以在body标签onload的时候调用方法,获取当前时间time

    白屏时间 = time - performance.timing.navigationStart

    相关文章

      网友评论

          本文标题:HTML首屏和白屏时间如何计算

          本文链接:https://www.haomeiwen.com/subject/qoouzhtx.html