如何在 H5 和小程序项目中计算白屏时间和首屏时间#前端面试

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 前端面试,H5,小程序

题目:如何在 H5 和小程序项目中计算白屏时间和首屏时间

思路:

白屏时间=页面开始展示的时间点-开始请求时间点。
开始请求时间点可以通过Performance Timing.navigation Start 。那么页面开始展示的时间点怎么获取呢。已经知道渲染过程是逐步完成的,而且页面解析是按照文档流从上至下解析的,因此一般认为开始解析body的时间点就是页面开始展示的时间。所以可以通过在head标签的末尾插入script来统计时间节点作为页面开始展示时间节点。但是这种方式需要打点,因此也有很多项目为了简化白屏时间的获取会选择忽略head解析时间直接用Performance Timing.dom Loading 来表示页面开始展示的时间,即使用domloading-navigation Start来表示白屏时间
首屏时间=首屏内容渲染结束时间点-开始请求时间点。

同样开始请求时间点可以通过Performance Timing.navigation Start获取。首屏内容渲染结束的时间点通常有以下几种方法获取:

(1)首屏模块标签标记法

适用于于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况。通过在 HTML 文档中对应首屏内容的标签结束位置,使用内联的 JavaScript 代码记录当前时间戳作为首屏内容渲染结束的时间点。

(2)统计首屏内加载最慢的图片的时间

通常首屏内容加载最慢的就是图片资源,因此可以把首屏内加载最慢的图片加载完成的时间作为首屏时间。由于浏览器对每个页面的 TCP 连接数有限制,使得并不是所有图片都能立刻开始下载和显示。因此在 DOM树 构建完成后会通过遍历首屏内的所有图片标签,并且监听所有图片标签 onload 事件,最终遍历图片标签的加载时间获取最大值,将这个最大值作为首屏时间。

(3)自定义首屏内容计算法

由于统计首屏内图片完成加载的时间比较复杂。所以在项目中通常会通过自定义模块内容,来简化计算首屏时间。例如忽略图片等资源加载情况,只考虑页面主要 DOM;只考虑首屏的主要模块,而不是严格意义首屏线以上的所有内容。

可交互时间=用户可以正常进行事件输入时间点-开始请求时间点。

PerformanceTiming有一个domInteractive属性,代表了DOM结构结束解析的时间点,就是Document.ready State属性变为“interactive”

目录
相关文章
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
34 6
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
5 0
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
124 3
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
84 8
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
94 3
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法,通过JavaScript在canvas上绘制图形。首先简述了canvas的功能,接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸,并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
66 2
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
62 0
在线课堂+工具组件小程序uniapp移动端源码
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
483 3
|
3月前
|
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
75 0
微信小程序更新提醒uniapp

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等