首页
学习
活动
专区
圈层
工具
发布

首屏渲染时间的计算

,为此,需要开发一套新的算法,尽可能准确的对 “首屏渲染时间” 进行估算。...(Iphone6),所以这个页面的首屏渲染时间指的是黄色区域里面内容渲染所需要的时间。...万一5s之后首屏才渲染完成呢?本人觉得首屏渲染时间如果超过5s,可以认为首屏渲染失败了,不在本文的讨论范围之内。...最终返回的 result ,就是我们想要的首屏dom结构渲染完成耗时啦。 首屏dom结构渲染时间并不等于首屏渲染时间,当首屏中有图片时,往往图片加载完成之后,用户才能看到完整的页面。...,如果其加载完成时间比dom结构渲染完成时间晚,则认为其是首屏渲染的最后一步,然后以此逻辑遍历所有图片,更新首屏渲染完成时间。

4.8K52

【性能】计算首屏白屏时间

= endTime - startTime 首屏时间 首屏时间是指,在不滚动屏幕下的前提下,用户看到完整第一屏内容花费的时间 首屏内容完全加载完成,才叫首屏,而不是出现内容,或者部分元素没有展示 首屏时间一般在...5秒以内是优秀,10秒以内可接受,10s 以后根本不能忍 现在呢,我们并没有一个明确的API来直接得到 首屏时间那我们到底要怎么得到首屏时间?...我们已经可以获取页面开始加载的时间,和 白屏时间一样 现在只要我们找到这个首屏线,然后首屏线附近 获取一个时间 ,这样 首屏时间 = firstScreen - performance.timing.navigationStart...,那么就可以使用这种办法 毕竟这种办法是最为简单的,然后就大概给自己一个简单的参考值 2统计首屏最慢图片加载时间 一般来说,首屏内容加载最慢的就是图片资源 所以,可以把 首屏内加载最慢的图片的时间 ,当做首屏时间...首先,我们就要拿到首屏内所有的图片,然后遍历他们,逐个监听图片标签的 onload 事件,并收集到他们的加载时间 最后比较得到加载时间的最大值 然后这么计算 首屏时间 = 加载最慢的首屏图片时间- performance.timing.navigationStart

3.9K11
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Web 性能优化-首屏和白屏时间

    什么是首屏和白屏时间? 白屏时间是指浏览器从响应用户输入网址地址,到浏览器开始显示内容的时间。 首屏时间是指浏览器从响应用户输入网络地址,到首屏内容渲染完成的时间。...白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素 首屏时间 = 地址栏输入网址后回车 - 浏览器第一屏渲染完成 影响白屏时间的因素:网络,服务端性能,前端页面结构设计。...影响首屏时间的因素:白屏时间,资源下载执行时间。...计算首屏时间常用的方法有: (1) 首屏模块标签标记法 由于浏览器解析 HTML 是按照顺序解析的,当解析到某个元素的时候,你觉得首屏完成了,就在此元素后面加入 script 计算首屏完成时间。 屏内所有的图片的 onload 事件,获取图片 onload 时间最大值,并用这个最大值减去 navigationStart 即可获得近似的首屏时间。 <!

    3K22

    Linux时间命令

    Linux一般有系统时间和硬件时间之分,date命令是显示和操作系统时间;hwclock用来操作硬件时间(日期)。日期和时间很重要,比如错误的日期和时间会导致你不能编译程序。...[+格式] 作用:可以用来显示或设定系统的日期与时间。 常用参数: -d  显示字符串所指的日期与时间。字符串前后必须加上双引号。 -s  根据字符串来设置日期与时间。...设置系统时间: date -s    需要有root权限 date -s 20160616 设置系统时间为20160616 date -s 10:50:30 设置系统时间为10:50:30...2 hwclock 可以用来显示或者设置硬件时间 记住下面的用法即可: hwclock 查看硬件时间 hwclock -w 修改硬件时间,改成和系统时间一样 hwclock -s 修改系统时间...,改成和硬件时间一样 示例: ?

    5.4K20

    Deepin(Linux)下实现Android投屏

    Deepin(Linux)下实现Android投屏 最近需要演示自己的安卓开发作品,因此需要在自己的主力操作系统(Deepin)上实现安卓投屏,之后才好连接电脑在班级里演示。...找寻一圈之后终于发现了开源的Linux端投屏神器Scrcpy. 因此在这里简单记录配置过程,方便后用。 项目源码:Scrcpy的GitHub 简单说明 Scripe支持桌面全平台。.../sdkmanager --licenses 注:本人没有测试,因为为了效率直接使用了热心网友编译好的,后期抽时间再编译一次再补充。.../bin/sh adb tcpip 5555 adb connect 192.168.1.100:5555 scrcpy adb usb 注意事项 关开usb调试。...--------------------- Author: Frytea Title: Deepin(Linux)下实现Android投屏 Link: https://blog.frytea.com

    4.9K30

    linux 时间戳转换dmesg 时间转换

    linux时间戳转换 1. 将日期转换成时间戳 $date +%s -d “04/24/2014 15:30:00” 1398324600 2....将当前日期转换成时间戳 $date +%s 1398765730 dmesg 时间转换 dmesg 输出的格式不易查看,可以通过命令进行转换。...″|bc ` seconds” /proc/uptime详解 在Linux中,我们常常会使用到uptime命令去看看系统的运行时间,它与一个文件有关,就是/proc/uptime,下面对其进行详细介绍...(以秒为单位),这里简记为num1; 第二列输出的是,系统空闲的时间(以秒为单位),这里简记为num2。...注意,很多很多人都知道第二个是系统空闲的时间,但是可能你不知道是,在SMP系统里,系统空闲的时间有时会是系统运行时间的几倍,这是怎么回事呢?

    38.1K20

    用户时间迁移史:家庭场景进入中屏时代

    然而在同一时间段内,智能手机并未摆脱销量持续低迷的局面,智能电视从2019年的微弱增长转向下滑。在小屏和大屏相继增长乏力的时候,平板电脑和智能屏组成的“中屏”阵营成了增量担当。...截止到这里,似乎可以这样总结互联网的代际更迭:所谓的PC互联网和移动互联网,不过是小屏干掉大屏的运动,期间上演了大屏短暂反扑的小插曲,最后大屏和小屏找到了用户时间分配的平衡点。...“中屏”玩家的自我正名 用户习惯的再次转移,为“中屏”提供了分走用户时间的机会窗口,并且在短时间内衍生出了多个流派。...毕竟屏幕战争的内核是用户时间的争夺,适合“中屏”的内容生态,恰恰是一个品类存在的必要条件。...因为驱动用户时间分配的因素中,内容生态只是其一,交互效率同样是不可或缺的诱因。就像键盘和鼠标让PC的内容获取效率远高于电视,触屏交互催生了APP的内容形态,进一步抢占了用户时间。

    29410
    领券