performance 查看白屏时间

2024-08-20

利用performance属性查看网页性能

一般我们可以通过浏览器的调试工具-网络面板,或者代理工具查看网页加载过程中的各个阶段的耗时.而利用window.performance属性则可以获得更为精确的原始数据,以毫秒为单位,精确到微秒. performance.timing属性介绍图片说明如下: 属性说明: navigationStart:浏览器处理当前网页的启动时间 fetchStart:浏览器发起http请求读取文档的毫秒时间戳. domainLookupStart:域名查询开始时的时间戳. domainLookupEnd:域名查

前端性能优化——首屏时间&&白屏时间

1.首屏时间概念首屏时间是指用户打开一个网站时,直到浏览器首页面内容渲染完成的时间. 2.白屏时间概念白屏时间即是,浏览器开始显示内容的时间,所以我们一般认为解析完<head>的时刻,或者开始渲染<body>标签就是该页面白屏结束的时间. 3.计算首屏时间和白屏时间 1)首屏时间计算(在body标签后写js代码) new Date.getTime() - performance.timing.navigationStart 2)白屏时间计算在<head>标签前面加

ionic2 解决白屏问题

ionic2下创建项目后,运行启动页后白屏几秒,解决方案问题描述最近在学习过程中发现ionic2项目运行在真机上,启动页后会有3-5秒的白屏时间,用户体验不是太好. 解决过程查看到了一篇关于这个问题的博客,但是是ionic1版本下的解决方案,有些差异,在查询ionic官方文档后,找到了ionic2版本的解决方案.ionic1版本解决方案原址:http://blog.csdn.net/dounainaicsdn/article/details/50767667 步骤 1.首先我们要先添加这个

关于React Native 安卓首屏白屏优化

问题描述在android中,当点击某个rn模块的入口按钮,弹出rn的activity到rn的页面展现出来的过程中,会有很明显的白屏现象,不同的机型不同(cpu好的白屏时间短),大概1s到2s的时间. 注意,只有在真机上才会有此现象,在模拟器上没有此现象完全是秒开. 优化分析通过工具分析,问题主要在下面的代码上, ReactRootView mReactRootView = createRootView(); mReactRootView.startReactApplication(mReac

React Native Android启动白屏的一种解决方案上

我们用RN去开发Android应用的时候,我们会发现一个很明显的问题,这个问题就是启动时每次都会有1~3秒的白屏时间,直到项目加载出来为什么会出现这个问题? RN开发的应用在启动时,首先会将js bundle读取到内存中,然后再完成渲染.那么这段等待的时间就导致了白屏的问题.(换句话来说,这个白屏时间是程序为了完成初始化加载数据,做一些初始化工作所保留的时间,如果在这段时间中不对启动屏做一些优化,就会呈现给用户一个白屏的时间段,用户体验较差) 我们可以利用白屏做点什么? 目前我们手机上所安装的

React Native 首次加载白屏优化

RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面简单处理可以在白屏过程中加个过度页面,通过设置RCTRootView的loadingView添加默认的加载过程 /** * A view to display while the JavaScript is loading, so users aren't presented * with a blank screen. B

npm run build 打包后（直接打包白屏），如何运行在本地查看效果（Apache服务）

转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试能否成功看到我的项目效果.一开始是毫无头绪,什么都不懂,直接是就在命令行上敲下:npm run build命令. 好开心啊,竟然没有报错.以为就这么简单的成功了,在浏览器上输入:http://loc

android studio你可能忽视的细节——启动白屏？drawable和mipmap出现的意义？这里都有！！！

android studio用了很久了,也不知道各位小伙伴有没有还在用eclipse的,如果还有,楼主真心推荐转到android studio来吧,毕竟亲儿子,你会知道除了启动速度稍微慢些,你找不到一个亚于eclipse的地方,哦,你电脑还不能太烂~ 1)先来说说android studio 启动应用黑白屏的问题. 前不久升级了studio,更新到了2.1.1,发现了一个问题.在启动新项目的时候,app总会出现一段长时间的白屏或者黑屏,楼主一开始一直以为是楼主接的公司项目算法太耗时的原因,但是楼

ionic2 关于启动后白屏问题跟app启动慢的问题

问题描述: 在ionic2下创建的项目打包生成apk,运行在真机上,进入启动页然后有5秒左右的白屏情况才进入首页,在真实项目中更严重,启动画面后更有时候十几秒都是白屏,体验性非常差. 在各种搜索之下,我只找到了这个解决方案,就是将启动画面延长. 1.添加 cordova-plugin-splashscreen 插件并查看是否添加成功 cordova plugin add cordova-plugin-splashscreen //添加 cordova-plugin-splashscreen 插

ionic2常见问题-启动后白屏问题

问题描述 app启动后大概有几秒白屏,才会显示首页,如下gif图启动有白屏.gif 解决方法1 请查看以下3张图的标注图 1-最初config.xml配置图 2-更改后的splash配置图 3 config.xml配置代码 <preference name="ShowSplashScreen" value="true"/> <preference name="SplashScreen" value="scree

MUI APP防止登陆页面出现白屏

最近在用MUI开发APP,总体效果,在IOS上,是完美的,但是在低端的Android手机上,就会出现性能问题,我个人觉得最严重的是,就是首页,就是APP打开的第一个页面,在iOS上,由于性能高,所以,基本能流畅切换,但是到了Android上,就会出现令人讨厌的白屏了. 本次我就自我谈谈我处理的逻辑,首先,我是有一个index.html页面的,这个页面作为一个入口页面,然后APP打开的时候,会进入这个页面,然后我在plusready里面检查,APP是不是第一次启动,如果是的话,就跳

【小贴士】【stringify神BUG】【localstorage失效】【消灭Safari alert框】【是否延迟加载】【页面10px白屏】

前言最近碰到几个恶心问题,也发现一点优化技巧,以及对Hybrid知识的一些整理,这里便一并拿出来做分享了,关于Hybrid的调试,会是我今后一个重点我的博客首先是学习笔记,方便自己做知识沉淀,以后好查阅,其次才是分享,所以其中有误请提出,觉得乱是很有可能的~~~~~~ 我们在工作中一般会有这么一个流程:发现问题->定位问题->解决问题其中最难就是定位问题,有时候我们会花上几天时间定位问题,而解决问题却只需要几秒...... 所以定位问题的能力非常重要,这也是经验的体现,所谓高手其实就是坑

chrome浏览器渲染白屏问题剖析

刚截图十几次,终于捕捉到了这个白屏现象,hiahia~~ 大家可以很清晰地看到下边还木有渲染完毕的透明层,这是一个十分普遍的问题,经常遇到.我的浏览器版本是到目前为止应该是最新版(release版本),之前的版本应该也存在类似的问题.只要处理好代码,这种体验相当不好的白屏问题是可以避免的,Qzone的页面貌似就没有这个现象.首先我们来聊一聊这个问题是怎么产生的,这涉及到chrome浏览器对网页的解析和渲染. 渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成.下面是渲染引擎在取

写启动界面Splash的正确姿势,解决启动白屏（转）

原文链接:http://www.jianshu.com/p/cd6ef8d3d74d 从我学习写第一个android项目以来,我都是这样写着启动界面: 在里面做一些事,比如:第一次启动时拷贝数据. 然后让启动界面一定待够一定时间,比如两秒三秒的. 就在前两天我打开app的时候,我感觉启动界面的时间太长了,而且为什么会先白屏一下然后进入启动界面.很多app都有启动界面,也有很多app没有启动界面,但是我发现这些没有启动界面的app,当我点击桌面那个icon的时候,也会先白屏一下,然后进入主页. 然

Android高仿微信（一）——如何消除启动时的白屏

默认情况下,APP启动时会先把屏幕刷成白色,然后才绘制第一个Activity中的View,这两个步骤之间的延迟会造成启动后先看到白屏(时间大概为1秒左右).时间不长,但是我们也看到,一般的APP时不存在这个现象的,那么这个现象如何消除呢? 从网上得到了一些解决方案,主要的两种方式包括:在AppTheme中将“android:windowBackground”属性设置为背景图片:或者,将"android:windowIsTranslucent"设置为true. 在“高仿微信”这个项目中实

消除 activity 启动时白屏、黑屏问题

默认情况下 activity 启动的时候先把屏幕刷成白色,再绘制界面,绘制界面或多或少有点延迟,这段时间中你看到的就是白屏,显然影响用户体验,怎么消除呢? 在 Activity theme 设置style 即可 <style name="AppTheme" parent="android:Theme.Light"> <item name="android:windowIsTranslucent">true</item

Xamarin.Android splash页面瞬间响应_避免APP启动闪白屏

Application和Activity中的onCreate都进行了优化,基本没有耗时操作,但是启动应用之后还是会闪现一下白色背景,然后才进入Splash页面,对比了一下QQ.微信.微博等客户端,点击之后都是瞬间响应Splash启动页,差别在哪里呢. 其实就算你onCreate啥都不做,仍然会闪一下白屏,因为初始化解析界面时需要一定时间,解决方法是自定义Theme. 自定义如下 <style name="AppSplash" parent="android:Theme&

解决Android Activity切换时出现白屏问题

有些性能低的机器,在切换activity时候出现白屏一段时候后才显示正确的视图高性能的机器可能太快看不到,但是事实是存在的, 特别是当你新开一个进程的时候,A进程的activity跳转到B进程的Activity是绝对会出现白屏一段时间的解决方案如下 1. style.xml中中增加 <style name="AppTheme" parent="android:Theme.Light"> <item name="android:wind

提升html5的性能体验系列之一避免切页白屏

窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟.我们首先来看第一个问题,如何避免切页白屏. 浏览器的页面在切换时,由于其页面加载机制,在跳转到下一个页面时,先要请求联网.载入页面代码.构建dom.渲染,最后才显示出来.在最终结果渲染完毕前,会出现几十毫秒甚至数秒的白屏.原生App是没有这个问题的.虽然使用SPA单页应用模型,即ajax+div切

Android 跨进程启动Activity黑屏（白屏）的三种解决方案

原文链接:http://www.cnblogs.com/feidu/p/8057012.html 当Android跨进程启动Activity时,过程界面很黑屏(白屏)短暂时间(几百毫秒?).当然从桌面Lunacher启动一个App时也会出现相同情况,那是因为App冷启动也属于跨进程启动Activity.为什么没会出现这种情况呢?真正元凶就是Android创建进程需要准备很多资源,它是一个耗时的操作. 黑屏(白屏)原因当A进程启动B进程中的一个Activity时,Android系统会先有zygo

Android APP应用启动页白屏(StartingWindow)优化

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 StartingWindow 的处理方式: 使用系统默认的 StartingWindow :用户点了应用图标启动应用,马上弹出系统默认的 StartingWindow(就是做动画的那个 Window) ,等应用加载好第一帧之后,StartingWindow 消失,显示应用第一帧,无缝衔接,体验还不错,这也是通常大部分 Android 应用的场景:比如大部分 Android 系统的自带应用,即刻.汽车之家等自己定制简单的 Sta

performance 查看白屏时间

热门专题