计算dom渲染完成所需时间

_必应

已于 2022-08-12 15:12:29 修改

阅读量2.3k

点赞数

分类专栏： javascript/es6/es7 react 文章标签： javascript 前端开发语言

于 2022-08-12 15:07:11 首次发布

本文链接：https://blog.csdn.net/jbguo/article/details/126304580

版权

javascript/es6/es7 同时被 2 个专栏收录

51 篇文章

订阅专栏

react

11 篇文章

订阅专栏

当超长页面时,进入页面滚动条不在最顶部的处理
实现原理: onload事件监听

计算dom加载完成所需时间
在此时间后调用scrollTo(0,0)回到顶部

domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
domComplete：返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。

<div
      className={styles.wrapper}
      style={{
        background: '#F5F7FA',
      }}
      onLoad={() => {
        var _per = window.performance;
        function getsec(time){
            return time/1000+'s';
        };
        const test = getsec(_per.timing.domComplete-_per.timing.domLoading) || 5;
        setTimeout(() => {
          window.scrollTo(0,0);
        }, test * 1000);
        console.log("dom渲染耗时："+getsec(_per.timing.domComplete-_per.timing.domLoading));
      }}
    >
      .... 特别长的dom树
    </div>

参考:
h5中performance.timing轻松获取网页各个数据如dom加载时间渲染时长加载完触发时间
 JavaScript获取页面加载时间和页面停留时间