如何在 H5 和小程序项目中计算白屏时间和首屏时间#前端面试-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2020-05-22 21:18:06 409 1

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

取消 提交回答
全部回答(1)
  • 一月19
    2020-05-23 12:54:57

    白屏时间=页面开始展示的时间点-开始请求时间点。

    开始请求时间点可以通过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”

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 57025浏览量 回答数 19

1

回答

支付宝H5 下载的时候,提示 【请确保该下载文件来源安全,如需浏览,请长按网址复制后使用浏览器访问】

游客ptexzird3doe2 2019-10-14 15:29:54 69822浏览量 回答数 1

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 93903浏览量 回答数 28

43

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 49920浏览量 回答数 43

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 146103浏览量 回答数 31

58

回答

技术入门问答集锦,涉及多种技术方向,解决新人学习困惑

管理贝贝 2016-08-03 10:13:27 52788浏览量 回答数 58

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 305743浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80516浏览量 回答数 13

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47471浏览量 回答数 46

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48766浏览量 回答数 3
+关注
1
文章
47
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载