JS 白屏

Js监听白屏时长的方式

笔记

Posted by Wason on January 20, 2022

Js监听白屏时长的方式

明确 白屏原因

一、可能是前/后端问题造成白屏
二、可能页面渲染未完成造成白屏

分析

一、可能是前/后端问题造成白屏

  1. 打开控制台查看接口请求是否正常, 有无报500等错误（后台问题）
  2. 打开控制台查看是否有报红,亦可能是前端代码执行报错

二、可能页面渲染未完成造成白屏

  1. 监听白屏时长
    • 代码监听（粗略说明：通过设置一般白屏元素点位, 监听页面加载完成 onload 状态, 判断是否满足白屏情况）, 见下图1;
    • 利用浏览器 提供的【 window.performance】 api 或 控制台的【 performance】 进行时间计算 / 跟踪处理, 见下content_1;
  2. 优化解决
    (1) 总的来说,主要是两个方针：
    • 减少过多资源请求,压缩项目或资源文件体积
    • 优化加快代码程序处理逻辑

    (2) 具体描述：

    • 使用webpack的【webpack-bundle-analyzer】插件, 查看打包后的各个文件体积, 进而优化打包压缩处理;
    • vue设置动态加载静态资源, 组件懒加载等;
    • 减少静态资源文件体积;
    • 优化代码, 避免长时间的同步请求/处理.

图1
(图1)

[content_1]

常规统计方案
一、白屏时间是什么
白屏时间节点指的是 从用户进入网站（输入url、刷新、跳转等方式）的时刻开始计算，一直到页面有内容展示出来的时间节点。
这个过程包括dns查询、建立tcp连接、发送首个http请求（如果使用https还要介入TLS的验证时间）、返回html文档、html文档head解析完毕。

代码实现： 在html文档的head中所有的静态资源以及内嵌脚本/样式之前记录一个时间点，在head最底部记录另一个时间点，两者的差值作为白屏时间

------------------------start------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>白屏时间</title>
    <script>
        // 开始时间
        window.pageStartTime = Date.now();
    </script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <script>
        // 白屏结束时间
        window.firstPaint = Date.now()
    </script>
</head>
<body>
    <div>123</div>
</body>
</html>
白屏时间 = firstPaint - pageStartTime  
------------------------end------------------------  
缺点：无法获取解析html文档之前的时间信息.

二、首屏时间是什么
首屏时间 = 白屏时间 + 首屏渲染时间

首屏模块标签标记法

  1. 由于浏览器解析HTML是按照顺序解析的，当解析到某个元素的时候，觉得首屏完成了，就在此元素后面加入
    缺点：使用场景受限
  2. 同样无法获取解析html文档之前的时间信息

这种方案比较适合首屏元素数量固定的页面，比如移动端首屏不论屏幕大小都展示相同数量的内容，响应式得改变内容的字体、尺寸等。
但是对于首屏元素不固定的页面，这种方案并不适用，最典型的就是PC端页面，不同屏幕尺寸下展示的首屏内容不同。上述方案便不适用于此场景。

三、可操作时间
用户可操作的时间节点即dom ready触发的时间，使用jquery可以通过$(document).ready()获取此数据。

// 原生JS实现dom ready
window.addEventListener('DOMContentLoaded', (event) => {
  console.log('DOM fully loaded and parsed');
});

四、总下载时间
总下载时间即window.onload触发的时间节点。

—————————————————————————————————————————————————————————————
总之，以上方法不太适用，因此，可以考虑使用浏览器提供【window.performance】api 进行时间监听

五、【window.performance】是什么
用来测量网页和Web应用程序的性能api，见下 图2；

  1. memory字段代表JavaScript对内存的占用。
    • usedJSHeapSize：JS 对象（包括V8引擎内部对象）占用的内存
    • totalJSHeapSize：可使用的内存
    • jsHeapSizeLimit：内存大小限制

  2. navigation字段统计的是一些网页导航相关的数据：
    (1) redirectCount:重定向的数量（只读），但是这个接口有同源策略限制，即仅能检测同源的重定向；
    (2) type 返回值应该是0,1,2 中的一个。分别对应三个枚举值：
    - 0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)
    - 1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)
    - 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)

  3. 最重要的是timing字段的统计数据，它包含了网络、解析等一系列的时间数据。说明：

    • startTime：有些浏览器实现为navigationStart，代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com，在地址栏输入google.com并回车，浏览器的执行动作依次为：unload当前文档（即baidu.com）->请求下一文档（即google.com）。navigationStart的值便是触发unload当前文档的时间节点。如果当前文档为空，则navigationStart的值等于fetchStart。

    • redirectStart和redirectEnd：如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点；

    • unloadEventStart和unloadEventEnd：如果前一个文档和请求的文档是同一个域的，则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0；

    • fetchStart：是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存；
    • domainLookupStart和domainLookupEnd：分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用了cache），则两者的值都等于fetchStart；

    • connectStart和connectEnd：分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接（比如使用持久化连接webscoket），则两者都等于domainLookupEnd；

    • secureConnectionStart：可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0；
    • requestStart：代表浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等；
    • responseStart和responseEnd：分别代表浏览器收到从服务器端（或缓存、本地资源）响应回的第一个字节和最后一个字节数据的时刻；
    • domLoading：代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性，domLoading的值就等于readyState改变为loading的时间节点；

    • domInteractive：代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady，它早于DOMReady触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点；

    • domContentLoadedEventStart：代表DOMContentLoaded事件触发的时间节点, 页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。
    • domContentLoadedEventEnd：代表DOMContentLoaded事件完成的时间节点，此刻用户可以对页面进行操作，也就是jQuery中的domready时间；
    • domComplete：html文档完全解析完毕的时间节点；
    • loadEventStart和loadEventEnd：分别代表onload事件触发和结束的时间节点。
  4. 相关时间计算
    • DNS查询耗时 = domainLookupEnd - domainLookupStart
    • TCP链接耗时 = connectEnd - connectStart
    • request请求耗时 = responseEnd - responseStart
    • 解析dom树耗时 = domComplete - domInteractive
    • 白屏时间 = domLoading - fetchStart
    • domready可操作时间 = domContentLoadedEventEnd - fetchStart
    • onload总下载时间 = loadEventEnd - fetchStart

六、静态资源的时间计算
widow.performance.getEntries()，用来统计静态资源相关的时间信息

返回一个数组，数组的每个元素代表对应的静态资源的信息，见下图3；

属性介绍

  • initiatorType资源属性，有img、css等
  • duration请求花费的时间
  • 其他的与上面的window.performance.timing的属性一样

图2 时间单位：毫秒
图2

图3 时间单位：毫秒
图3

参考文章

记一次播放器页面白屏时间优化方案

目录
    文章标签
    JS CSS Vue webpack ArcGIS HarmonyOS
    友情链接