白屏和首屏加载时间计算

最新推荐文章于 2024-07-26 14:11:15 发布
最新推荐文章于 2024-07-26 14:11:15 发布
阅读量990 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38211541/article/details/114679440
版权

一个网站加载性能如何主要看白屏时间和首屏时间。

俩个计算都是使用  new Date() - performance.timing.navigationStart

  • 白屏时间：指从输入网址，到页面开始显示内容的时间。计算方式：将以下脚本放在 </head> 前面就能获取白屏时间
  • 首屏时间：指从输入网址，到页面完全渲染的时间。计算方式：在 window.onload 事件里执行上述方法

 

野生松
关注
专栏目录
【vue】优化白屏即首次加载时间,针对vue2+webpack
宅即万物
11-17 710
在对应的webpack配置文件(webpack.base.conf.js)的module.exports 中的externals添加要忽略的包。此处有chunks与excludeChunks需要注意，chunks如果配置了，路由懒加载将会失效，所以不宜配置chunks。注意：不同包要修改的方式不同，需要研究后再修改，例如vant，vue.use(vant.button)等。至此，原本需要7-8秒才可以加载出来的页面，只需要0-1秒就可以加载出来（此次研究断断续续有两周的时间）将js中的css文件分离出来。
【优化】前端性能优化---计算首屏加载时间和首屏加载速度慢怎么解决？
余浩的博客
03-06 3004
SPA单页面应用：计算首屏加载时间和首屏加载速度慢怎么解决？ 首屏加载时间，指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间，此时整个网页不一定全部渲染完成，但需要展示当前视窗需要的内容。 计算首屏加载时间公式： times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000
从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载
最新发布
2401_83384536的博客
07-26 1178
前段时间公司服务器网络波动，网站访问变慢，一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下，访问新项目时，加载了近1分钟都没加载出来，而访问其他页面顶多也就30-40s。在网络恢复后，尝试访问了下页面，无缓存首次打开需要等待近11s的时间，最大的资源达到了3.7M...在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内在这里总结记录一下，基本上都是一些常规可复制的优化手段，希望能为同样想优化网页性能的你提供思路~
实战剖析-vue项目首屏加载时长优化
京东科技开发者
04-22 1434
首屏速度是用户体验的最关键一环，而首屏速度最大的决定性因素就是资源的加载速度，资源加载速度等于资源大小 + 网速，老的前端项目随着不断增长，代码可能会变得混乱，冗余难以理解，不断的做加法，久而久之，前端性能上就会受到影响，相信大家在工作当中一定遇到，页面加载时间慢，响应时间长等问题，本文将以具体项目为例（vue 2.51.7 webpack:4.23.1），一点一点分析，通过实战的角度，介绍如何对Vue项目的首屏加载时间进行优化。作为一只资深笨鸟，对大佬的思路领悟只有一二成，用最笨的方法，一条一条排查😬。
计算首屏加载完毕的时间
weixin_30326741的博客
07-30 573
function getOffsetTop(ele) { var offsetTop = ele.offsetTop; if (ele.offsetParent !== null) { offsetTop += getOffsetTop(ele.offsetParent); } return of...
简述白屏和首屏时间怎么优化，怎么计算这个时间
03-13
白屏和首屏时间是网页性能优化中的两个重要指标。白屏时间指的是用户打开网页后，浏览器开始加载页面到页面开始出现内容之间的时间间隔；首屏时间指的是用户打开网页后，页面第一屏内容完全展示出来的时间。 为了...
白屏和首屏时间，怎么优化，怎么计算这个时间
05-04
4. 使用图片懒加载和延迟加载技术，减少首屏图片的加载时间； 5. 使用浏览器缓存和服务器缓存，避免重复请求相同的资源； 6. 使用Web Worker和Service Worker等技术，把计算和网络请求任务分离出主线程。 需要注意...
vue中计算白屏时间、首屏加载时间
Davoid的博客
03-29 372
用在main.js文件中。
前端性能指标：白屏和首屏时间的计算
HanpengChen的博客
04-16 4985
作者：Hanpeng_Chen 公众号：前端极客技术 文章首发个人博客：前端性能指标：白屏和首屏时间的计算|代码视界 前言 页面性能优化是前端开发中一个重要的环节，而评判前端性能的优劣有两个比较经常听说的指标：白屏时间和首屏时间。 接下来我们一起来看看什么是白屏时间和首屏时间，如何去计算。 什么是白屏和首屏时间 白屏时间(FP) 白屏时间(First Paint)：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。 白屏时间 = 页面开始展示的时间点 - 开始请求的时间点 首屏时间(FC.
计算首屏时间
差不少的博客
08-03 700
计算首屏时间
【前端】如何计算首屏及白屏时间
qq_45677671的博客
03-13 1202
前端如何计算首屏白屏时间
vue项目优化 - 网站首屏加载时间
ymzhao
04-29 1674
1. 首先打包后看看加载时间 令人窒息的36.1s 先从简单的开始吧，压缩下static下的图片资源： 清除浏览器缓存 可以看到，差别其实不大， 2. vendor 参考博文：关于vue 项目页面打包后首次页面加载特别缓慢的原因及解决方案 2.1. 先去掉编译文件中map文件、使用gzip压缩、打包时去掉console.log 2.2. 路由懒加载 参见vue官方文档：Vue路由懒加载 im...
白屏、首屏时间如何计算
小柒的前端之旅
02-04 2359
白屏时间 白屏时间指：输入网址回车 ->浏览器开始显示内容的时间。 计算白屏时间 我们通常认为浏览器开始渲染<body>标签或者解析完<head>标签的时刻就是页面白屏结束的时间点。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
如何计算首屏加载时间？
weixin_30565327的博客
12-20 1202
做移动web页面，受移动网络网速和终端性能影响，我们经常要关注首屏内容展示时间（以下简称首屏时间）这个指标，它衡量着我们的页面是否能在用户耐心消磨完之前展示出来，很大程度影响着用户的使用满意度。 首屏时间的定义 工信部在《宽带速率的测试方法用户上网体验》规范标准中对首屏时间的定义为： 浏览器显示第一屏页面所消耗的时间，以800x600像素尺寸为标准，从开始加载到浏览器页面显示高度达...
前端性能优化 — 首屏时间和白屏时间
qq_41914185的博客
03-24 7448
前端性能优化；首屏时间；白屏时间；计算首屏和白屏时间；优化首屏加载，减少白屏时间；
Web 性能优化-首屏和白屏时间
学习记录
09-26 4545
什么是首屏和白屏时间？ 白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。 首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。 白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素 首屏时间 = 地址栏输入网址后回车 - 浏览器第一屏渲染完成 影响白屏时间的因素：网络，服务端性能，前端页面结构设计。 影响首屏时间的因素：白屏时间，资源下载执行时间...
SPA(单页应用)首屏加载慢
cnlovedudu的博客
08-12 185
首屏加载优化
白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间（LCP）
pzy_666的博客
02-19 5344
怎么获取到这两个数据 通过chrome开发者工具Performance选项卡 通过chrome开发者工具Lighthouse选项卡 通过JS计算 web-vitals FP & FCP & LCP FP:（First Paint / 首次绘制） 页面第一次绘制像素的时间，实际也是白屏时间 FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间，也就是我们通常要优
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值