首页 > 编程语言 >怎么样能拿到微信小程序每次进入页面的渲染时长?

怎么样能拿到微信小程序每次进入页面的渲染时长?

时间:2023-11-11 19:34:02浏览次数:41  
标签:渲染 微信 记录 时间 Date now 页面

要获取微信小程序每次进入页面的渲染时长,可以通过以下几个步骤实现:

  1. 在页面的 onLoad 函数中记录开始时间戳:在页面的 onLoad 函数中,使用 Date.now() 记录当前时间戳。这将作为页面渲染开始的时间。
  2. 在页面的 onReady 函数中记录结束时间戳:在页面的 onReady 函数中,再次使用 Date.now() 记录当前时间戳。这将作为页面渲染结束的时间。
  3. 计算渲染时长:通过减去开始时间戳和结束时间戳的差值,计算出页面的渲染时长。

以下是一个示例代码:

Page({
  onl oad: function () {
    this.renderStartTime = Date.now(); // 记录页面渲染开始时间
  },
  onReady: function () {
    this.renderEndTime = Date.now(); // 记录页面渲染结束时间
    var renderTime = this.renderEndTime - this.renderStartTime; // 计算渲染时长
    console.log("页面渲染时长:" + renderTime + "ms");
  }
});

在上面的示例代码中,我们使用 this.renderStartTimethis.renderEndTime 分别记录页面的渲染开始和结束时间。然后,通过计算它们的差值,我们得到页面的渲染时长,并在控制台输出它。

请注意,渲染时长是一个近似值,它包括了页面资源加载、组件渲染等过程的时间。实际的渲染时长可能会因网络状况、设备性能等因素而有所不同。

标签:渲染,微信,记录,时间,Date,now,页面
From: https://blog.51cto.com/M82A1/8319201

相关文章

  • 微信开发者工具 打断点
    开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下:第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗......
  • 基于微信小程序的校园餐饮配送系统
    (文章目录)前言:heartpulse:博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌:heartpulse:......
  • uniapp 404页面
    需求:uniapp在写H5时,如果在地址栏乱输入,会跳转到404页面。思路:uniapp有个应用生命周期onPageNotFound,让跳转不存在的页面时会执行这个回调函数。所以需求就很好解决了!具体操作:第一步:写一个404页面,并在pages.json中配置其路由。第二步:在App.vue的onPageNotFound......
  • js执行的比dom渲染快很多,执行完一定的js才在页面渲染一次dom,UI渲染是宏任务
    假设HTML有一个按钮id为btn,经过以下操作最终会变成什么颜色?document.getElementById('btn').style='background:blue';document.getElementById('btn').style='background:red';Promise.resolve().then(()=>{document.getElementById('......
  • playwright页面元素操作
    一、fill()输入page.locator('#username').fill('输入内容')  #先定位在输入page.get_by_label("用户名").fill('输入内容')  #先定位在输入page.fill('#username','test') #直接调用fill这里需要注意,第1,3两种定位方式只可以使用以下四种定位方式1.css选择器:......
  • 有什么可以自动保存微信文件的方法么?
    8-3本文要介绍的方法,可以自动帮你保存微信上收到的文件型数据,比如文件、图片、视频,如果你的工作需要每天或者经常保存大量的从微信收到的文件型数据,也许本文适合你,本文介绍的工具,对微信多开也有效果,并且可以单独对某些群聊或者对话里的文件型数据做自动保存。 以下正文 首先要准......
  • 文件阅读器的使用——利用文件阅读器将选中的文件图片展示到前端页面
    代码示例:#HTML部分<formaction=""><divclass="form-group"><labelfor="id_file">用户头像{%loadstatic%}<imgsrc="{%static'img/default.png'......
  • 微信小程序中的数组有许多常用的方法和用法
    声明和初始化一个数组:vararray=[];//声明一个空数组vararray=[1,2,3];//声明并初始化一个有元素的数组获取数组长度:varlength=array.length;//获取数组的长度访问和修改数组元素:varelement=array[index];//获取指定索引位......
  • 微信小程序数组
    常用函数concat():连接两个或多个数组,返回连接后的新数组。示例:constarr1=[1,2,3];constarr2=[4,5,6];constarr3=arr1.concat(arr2);//返回[1,2,3,4,5,6]copyWithin():从数组指定位置开始替换指定长度的元素。示例:constarr=[1,2,3,4,5];ar......
  • 微信超实用的小功能
    微信真的有超多实用小功能,平时很少注意到,每次都用传统的方法解决,浪费人家研发人员的一片苦心~1重要事项提醒:健忘症的福音;步骤:长按消息-提醒-设置。2图片翻译:不用跳转翻译软件,一键翻译;步骤:点击放大图片-长按-翻译。3拍照转表格:图片一键转换可编辑表格;步骤:点击放大图片-搜一搜-点表......