前端白屏问题_前端优化-如何计算白屏和首屏时间

白屏时间

白屏时间指的是浏览器开始显示内容的时间。因此我们只需要知道是浏览器开始显示内容的时间点，即页面白屏结束时间点即可获取到页面的白屏时间。

计算白屏时间

因此，我们通常认为浏览器开始渲染

标签或者解析完标签的时刻就是页面白屏结束的时间点。白屏

//不兼容performance.timing 的浏览器，如IE8

window.pageStartTime=Date.now();

//白屏时间结束点

window.firstPaint=Date.now();

因此白屏时间则可以这样计算出：

可使用 Performance API 时

白屏时间 = firstPaint - performance.timing.navigationStart;

不可使用 Performance API 时

白屏时间 = firstPaint - pageStartTime;

首屏时间

首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。

通常计算首屏的方法有

首屏模块标签标记法

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

自定义首屏内容计算法

1、首屏模块标签标记法

首屏模块标签标记法，通常适用于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况。我们会在 HTML 文档中对应首屏内容的标签结束位置，使用内联的 JavaScript 代码记录当前时间戳。如下所示：

首屏

window.pageStartTime=Date.now();

前端白屏问题_前端优化-如何计算白屏和首屏时间相关推荐

移动spa商城优化记（一）---首屏优化篇
背景随着公司业务的不断壮大,最近老是有用户反应公司APP内的商城打开比较慢,这可不行啊,慢了容易流失用户,流失用户减少公司业绩,公司业绩少我的年终奖就少----,所以为了公司,也为了自己,开始优化之 ...
前端框架/架构，性能优化，负载均衡，首屏渲染
前端数据结构与算法- https://zhuanlan.zhihu.com/p/27659059 > 前端重构方案前端重构方案了解一下- https://blog.csdn.net/vM199 ...
java前端接口怎么写_前端接口怎么写
1.java后台怎么写接口给前端使用 java后台如何给前端写使用接口,框架一开始就得考虑好的,很多都使用mvc架构往往用户登录时,用户密码符合,会允许其访问,保存登录信息,下次就不需要再次登录了,直 ...
分屏取消_记录Android7.0以上手机开启分屏后活动的生命周期变化
真正的大师,总是怀着一颗学徒的心. 大家好,我是小黑,一个还没秃头的程序员~~~ 如今,很多Android手机已经支持多屏任务了,也就是说你可以边追剧边回好友消息了,所以,今天的内容是记录Androi ...
mac 桌面分屏软件_让你更加详细了解Mac分屏功能
原标题:让你更加详细了解Mac分屏功能对于只需要简单分屏需求的用户而言,Mac自带的分屏功能已经足够一般用户用了,小小的一个分屏功能可以大大提高我们的工作效率,对于需求不是很深度的普通用户,第三方专 ...
前端白屏问题_前端性能优化之白屏时间
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念.重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践. 一.概念白屏时间:即用户点击一个链接或打开浏览 ...
前端白屏问题_记一次白屏统计与修理
记一次白屏统计与修复博文原地址白屏来源上一版部门用的前端结构是python || lua渲染的html页面 + seajs + js模板 + less,但是这种情况发现对应不懂服务端渲染页面,或 ...
前端传中文文件名_前端工程师需要掌握哪些知识，web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
dao模式和前端控制器结合使用_前端技术及开发模式的演进，带你了解前端技术的前世今生...
先声明,本篇不会讲带有年代性的前端发展史,不讲故事,想了解的读者可以去查阅一些其他的资料和文章,本篇仅仅从技术发展角度结合案例分析,说明前端技术的发展和开发模式的演进变化.本篇内容重点说明PC端技术, ...

前端白屏问题_前端优化-如何计算白屏和首屏时间

前端白屏问题_前端优化-如何计算白屏和首屏时间相关推荐

最新文章

热门文章