精华内容
参与话题
问答
  • 前端首页白屏问题

    万次阅读 2018-01-31 11:12:33
    白屏原因 1-在弱网络下(2G网路或者GPRS网络) ,网络延迟,JS加载延迟 ,会阻塞页面 2-客户端存在bug,缓存模块错乱,不缓存js等后来挂起的文件,以及乱缓存index.html 统计白屏数量: 监听某个

    这里写图片描述

    之所以写这篇文章,主要是最近有在面试中经常会被人问道这个方向,作为一个资深前端,这个是必须了解的。但是我技术一般,所以还是需要了解一下,总结一下原因和解决方案。

    白屏原因

    1-在弱网络下(2G网路或者GPRS网络) ,网络延迟,JS加载延迟 ,会阻塞页面

    2-客户端存在bug,缓存模块错乱,不缓存js等后来挂起的文件,以及乱缓存index.html


    统计白屏数量:

    监听某个主DIV的变化(因为是单页面的应用,所以总会有个入口DIV来监听),白屏即是该DIV没有在规定时间内被放入东西,所以只要在规定时间内该DIV没有变化,那就可以进行白屏统计了。


    现象:

    1-首页直出时间过长

    2-依赖js没加载完全

    3-文件依赖关系表map.js加载不正确

    4-接口调用时间过长


    解决方案:

    (1) 如果是基于 Cake[3] 工具开发的,也可以直接用首屏填充伪标签。

    (2) 尽量同步输出,异步输出请尽量 mock 出现在首屏的模板。

    (3) 需要使用nodejs直出了,通过在服务端增加一个nodejs中间层,由nginx将前端的请求转发到nodejs上,nodejs响应请求,加载资源,向底层的cgi进行API请求,之后进行拼接,返回html页面,这样资源跟api的请求时间都在服务端完成,缩短了时间,至于模板之类的,还是能够用到前端。当然nodejs也会有请求资源错误的情况,这个时候就需要返回错误标志给前端,前端再发起原来的异步请求,这种方式相当于一种容灾保障。

    (4)因为是应用方式,所以总是难免存在一些基础依赖,比如modjs,backbone, underscore, jquery等,这种一般都会通过打包成一个js来减少http请求以及文件大小。针对这种情况,只能通过打包模式,加载资源的模式进行改进。强烈按照“首页必须”进行开发,按需加载,其他的资源可以放在二屏,毕竟首页决定着是否还会继续使用。

    (5) 尽量减少文件夹的嵌套,文件名不要过长
    接口调用时间过长也会导致单页面应用的加载时间过长,这种我们主要是前端需要给接口设置timeout

    (6)可订制的客户端,也可以仿照(manifest/appcache,不完善不适合)做一个缓存机制,即是判断服务器版本是否与客户端保存的资源一致,不一致即下载新的,一致即直接使用本地的,这样就变成一个类本地应用了。
    注意:fis的mod.js和map.js的坑

    展开全文
  • Android启动白屏问题完美解决

    千次阅读 2018-09-16 12:40:55
    在开发过程中我们经常会遇到点击启动App的时候有短暂的白屏出现,怎么避免这种情况呢?提供俩种解决思路 1、设置透明的界面来完成 在你的style里面加这俩行代码 <item name="android:...

    在开发过程中我们经常会遇到点击启动App的时候有短暂的白屏出现,怎么避免这种情况呢?提供俩种解决思路

    1、设置透明的界面来完成

    在你的style里面加这俩行代码

    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowNoTitle">true</item>

    完整的示例如下

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- 设置透明界面 -->
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>

    这种方式有一个弊端,当你App做的很大的时候点击启动时总感觉是启动的很慢,其实不是这样的,而是启动的时候透明了,所以感觉是启动的慢

    2、把白屏换成一张过度的图片

    在你的style里面加这俩行代码

    <item name="android:windowBackground">@mipmap/ic_launcher</item>
    <item name="android:windowNoTitle">true</item>

    完整的示例如下

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- 过度图片 -->
        <item name="android:windowBackground">@mipmap/ic_launcher</item>
        <item name="android:windowNoTitle">true</item>
    </style>

    这种方式会使你的App一直有这个图片背景在显示,不是我们想要的结果,所以我们在Activity中重写一个生命周期中界面加载完成后的回调方法,将背景颜色改为白色

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        //修改背景为白色
        getWindow().setBackgroundDrawable(new ColorDrawable(Color.WHITE));
    }

    这种方式可以解决App启动白屏的问题,但是启动背景显示的时间太短,不像一般App那样欢迎页显示几秒后跳转,所以建议还是做一个欢迎页比较好,能有效的避免白屏问题还能做广告,但是如果公司产品大大不让做欢迎页那就没办法啦,只能采用这俩种方法来避免这个问题了

    
     

     

    展开全文
  • 产生白屏问题的原因是因为点击下载按钮的时候实际上因为某些原因产生了2次点击,如果使用的是window.location.href这种下载方式或者a标签的方式,会发生链接覆盖,产生页面跳转。如果想要解决这个问题可以采用iframe...

    产生白屏问题的原因是因为点击下载按钮的时候实际上因为某些原因产生了2次点击,如果使用的是 window.location.href 这种下载方式或者a标签的方式,会发生链接覆盖,产生页面跳转。如果想要解决这个问题可以采用iframe进行下载,不同的iframe之间是互补影响的。

     

    代码如下:

    let divFrame = window.parent.document.getElementById("dIframe")
    if (divFrame != null) {
       window.parent.document.body.removeChild(divFrame)
    }
    //重新创建
    let iframe = window.parent.document.createElement("iframe");
    iframe.setAttribute("id", "dIframe");
    window.parent.document.body.appendChild(iframe);
    divFrame = window.parent.document.getElementById("dIframe");
    divFrame.src = url; // 下载链接
    divFrame.style.display = "none";
    展开全文
  • 你会很奇怪,为什么有些app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示,但是有些app却不会如QQ手机端,的确这里要做处理一下。这里先了解一下为什么会出现这样的现象,其实很简单,简历一个简单的...

    你会很奇怪,为什么有些app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示,但是有些app却不会如QQ手机端,的确这里要做处理一下。这里先了解一下为什么会出现这样的现象,其实很简单,简历一个简单的例子就可以理解了。

    其实,黑屏或者白屏这里并不是不正常,而是还没加载到布局文件,就已经显示了window窗口背景,黑屏白屏就是window窗口背景。代码如下,可以自己写个小demo就理解了。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        // 注意:添加3秒睡眠,以确保黑屏一会儿的效果明显,在项目应用要去掉这3秒睡眠

        try {

            Thread.sleep(3000);

        catch (InterruptedException e) {

            e.printStackTrace();

        }

        // 在这里之前,黑屏或者白屏都是window的背景颜色,是窗口背景,还没到界面的布局呢,要执行setContentView后才显示布局

        setContentView(R.layout.activity_launcher);

    }

    那window窗口背景在那里提供呢?在提供theme里面,如下提供的是白色背景,那就是启动时白屏一会儿的颜色设置。

    1

    2

    3

    4

    5

    6

    <!-- Application theme. -->

    <style name="AppTheme" parent="AppBaseTheme">

        <item name="android:windowNoTitle">true</item>

        <item name="android:windowBackground">@color/white</item>

        <!-- All customizations that are NOT specific to a particular API-level can go here. -->

    </style>

    所以,在theme设置windowBackground就可以解决启动时白屏黑屏一会儿了,下面提供三种解决方案:

    一、提供.png背景图

    提供背景图是解决的一个方法,但是要适配各种屏幕,提供很多张图片。除非图片非常复杂只能用背景图了就用这种方法吧,否则个人不建议。

    二、提供.9.png(NinePatch)背景图片

    如果图片不是很复杂,可以做成NinePatch图片,那就直接制作NinePatch图片,提供一张就可以适配任何手机,何乐而不为呢。

    三、使用Layout-list制作背景图片

    如果可以使用这种方式,推荐使用这种Layout-list制作背景图片。前2种都是使用图片占用内存啊,使用Layout-list比较省内存,做出app也不会说因为图片多体积变大吧。

     下面给出代码。

    LaunchActivity为启动界面停留3秒后跳转到主页面MainActivity,为了达到显示黑屏白屏的效果更明显,在setContentView之前线程睡眠3秒。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    public class LauncherActivity extends Activity {

        public final int MSG_FINISH_LAUNCHERACTIVITY = 500;

         

        public Handler mHandler = new Handler(){

            public void handleMessage(Message msg) {

                switch (msg.what) {

                case MSG_FINISH_LAUNCHERACTIVITY:

                    //跳转到MainActivity,并结束当前的LauncherActivity

                    Intent intent = new Intent(LauncherActivity.this, MainActivity.class);

                    startActivity(intent);

                    finish();

                    break;

     

                default:

                    break;

                }

            };

        };

     

        @Override

        protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            // 不显示系统的标题栏,保证windowBackground和界面activity_main的大小一样,显示在屏幕不会有错位(去掉这一行试试就知道效果了)

            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

             

            // 注意:添加3秒睡眠,以确保黑屏一会儿的效果明显,在项目应用要去掉这3秒睡眠

            try {

                Thread.sleep(3000);

            catch (InterruptedException e) {

                e.printStackTrace();

            }

             

            setContentView(R.layout.activity_launcher);

             

            // 停留3秒后发送消息,跳转到MainActivity

            mHandler.sendEmptyMessageDelayed(MSG_FINISH_LAUNCHERACTIVITY, 3000);

        }

     

    }

    activity_launcher.xml布局文件,很简单,要记住这里的LinearLayout使用的背景是layout_list_start_pic,跟主题theme使用一样的背景,这样就消除了背景不一样的效果。这里要自己试试才知道这样做的好处和效果。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:background="@drawable/layout_list_start_pic" >

     

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:textColor="#ffffff"

            android:text="@string/hello_world" />

     

    </LinearLayout>

    AndroidManifest.xml,这里注意application使用的theme是AppTheme,而LauncherActivity使用的主题是StartAppTheme。这样做的效果是只要LauncherActivity使用StartAppTheme主题,其他Activity都是用AppTheme主题哦。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    <?xml version="1.0" encoding="utf-8"?>

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"

        package="com.example.launcheractivity"

        android:versionCode="1"

        android:versionName="1.0" >

     

        <uses-sdk

            android:minSdkVersion="8"

            android:targetSdkVersion="18" />

     

        <application

            android:allowBackup="true"

            android:icon="@drawable/ic_launcher"

            android:label="@string/app_name"

            android:theme="@style/AppTheme" >

            <activity

                android:name=".LauncherActivity"

                android:label="@string/app_name"

                android:theme="@style/StartAppTheme" >

                <intent-filter>

                    <action android:name="android.intent.action.MAIN" />

     

                    <category android:name="android.intent.category.LAUNCHER" />

                </intent-filter>

            </activity>

             

            <activity android:name=".MainActivity"></activity>

        </application>

     

    </manifest>

    styles.xml,2个主题设置

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    <resources xmlns:android="http://schemas.android.com/apk/res/android">

     

        <!--

            Base application theme, dependent on API level. This theme is replaced

            by AppBaseTheme from res/values-vXX/styles.xml on newer devices.

        -->

        <style name="AppBaseTheme" parent="android:Theme.Light.NoTitleBar">

            <!--

                Theme customizations available in newer API levels can go in

                res/values-vXX/styles.xml, while customizations related to

                backward-compatibility can go here.

            -->

        </style>

     

        <!-- Application theme. -->

        <style name="AppTheme" parent="AppBaseTheme">

            <item name="android:windowNoTitle">true</item>

            <item name="android:windowBackground">@color/white</item>

            <!-- All customizations that are NOT specific to a particular API-level can go here. -->

        </style>

        <style name="StartAppTheme" parent="AppBaseTheme">

            <item name="android:windowNoTitle">true</item>

            <item name="android:windowBackground">@drawable/layout_list_start_pic</item>

            <!-- All customizations that are NOT specific to a particular API-level can go here. -->

        </style>

    </resources>

    layout_list_start_pic.xml 启动页面使用这个作为背景图片

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    <?xml version="1.0" encoding="utf-8"?>

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

        <!-- 设置整个屏幕背景为白色 -->

        <item >

            <color android:color="@color/white"/>

        </item>

     

        <!-- 中间logo -->

        <item >

            <bitmap

                android:gravity="center"

                android:src="@drawable/ic_launcher" />

        </item>

        <!-- 底部图表 -->

        <item android:bottom="10dp">

            <bitmap

                android:gravity="bottom|center_horizontal"

                android:src="@drawable/copyright" />

        </item>

     

    </layer-list>

    还有一张图片copyright.png

    好了现在提供下效果图吧

    启动时,黑屏白屏改造成这图片样子,哈哈~

    启动完成后加装的LauncherActivity界面

    调整到MainActivity界面

     就这样了,本来想给gif动画的,用微信拍下来,澳澳不知道怎么发到电脑呜呜~~~后来才知道可以发到网页微信。。。

     下载链接迟点发上来,哎呀妈的,要睡觉了~~·~~

    若本文对你有帮助请点点赞支持,有疑问请留言共同探讨~

    原文链接:http://www.cnblogs.com/liqw/p/4263418.html

    下载地址:http://download.csdn.net/detail/lqw770737185/8411705

     

    展开全文
  • 最近安装Visual Studio 2019\2017 的时候,遇到了两个典型性的问题,Installer不响应或是响应后只显示白屏。经过多次实验,找到了一些解决方法。 1.Installer不响应。 从微软的官网上下载了Installer之后,双击打开...
  • 测试人员测试开发的APP时反应启动APP时会白屏一段时间,时间不确定,有长有短。有的时候白屏时间可以长达七八秒。
  • Android冷启动白屏解析,带你一步步分析和解决问题

    万次阅读 多人点赞 2016-06-28 08:52:07
    关于首次启动程序白屏时间过长这个问题其实我早就发现了,而且有的时候白屏时间可以长达七八秒。这个问题已经是一个普遍存在的现象了,可能很多人对此都产生了疑惑。那么这里我就专门写一篇文章来为大家答疑解惑吧。...
  • 带你重新认识:Android Splash页秒开 Activity白屏 Activity黑屏 版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 本篇博客要剖析和解决的两个问题: 1. APP启动时白屏/...
  • 树莓派系统安装及3.5寸显示屏白屏解决办法 目录 树莓派系统安装及3.5寸显示屏白屏解决办法 硬件准备 系统安装 环境配置 显示屏白屏解决 1.硬件准备 树莓派3b一个 32G的TF卡一张 读卡器一个 ...
  • 液晶屏白屏原因

    2018-01-20 22:09:26
    我们遇到的液晶显示屏一般是这样的。出现白屏故障,基本上可以... 一般的液晶显示器的工作方式是,液晶屏加电后工作,及液晶屏如果不加电应该是白屏的(我们是这样实验的,把液晶屏和主板的连线去掉后,发现白屏)。
  • 你会很奇怪,为什么有些app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示,但是有些app却不会如QQ手机端,的确这里要做处理一下。这里先了解一下为什么会出现这样的现象,其实很简单,简历一个简单的...
  • CefInitialize崩溃 && Cef白屏

    千次阅读 2018-12-14 17:03:57
    新建一个MFC Dialog工程,然后仿照CefSimple模仿实现自己的一个基于MFC窗口的Demo(具体代码稍后上),注意我仅仅只配置了所需要依赖的lib,并没有把CefSample的配置一起Copy,所以才导致后面的白屏,浪费了我一天...
  • Flutter 启动页 消除白屏

    万次阅读 2019-07-09 16:36:52
    开始的时候我的第一个想法就是把启动页当成一个Widget,先加载这个Widget然后在显示我们的主页面,可是在实践的过程中遇到一个很大的问题,app启动的时候会出现较长时间的白屏,在android手机上很明显,而且性能越差...
  • App 冷启动与热启动及启动白屏优化

    万次阅读 2018-08-26 15:19:41
    博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载。本文由博主威威喵原创,请多支持与指教。 ... 介绍一下 app 冷启动和热启动方式来实现 app 秒开的效果。那么,先来看看什么叫冷启动和热启动。...
  • 尊重版权,未经授权不得转载 ... ...用React Native架构的无论是Android APP还是iOS APP,在启动时都出现白屏现象,时间大概1~3s(根据手机或模拟器的性能不同而不同)。 问题分析: React Na
  • 本人写的一个小程序,有一定的效果哦~~~试用后你就知道了。
  • 你会很奇怪,为什么有些app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示,但是有些app却不会如QQ手机端,的确这里要做处理一下。这里先了解一下为什么会出现这样的现象,其实很简单,简历一个简单的...
  • Webview加载界面白屏解决方法总结

    万次阅读 热门讨论 2017-10-19 09:56:55
    总结android中webview加载出现界面白屏,需要杀掉进程重新加载的情况的解决方法。
  • Flutter 应用在 Android 端上启动时会有一段很明显的白屏现象,白屏的时长由设备的性能决定,设备性能越差,白屏时间越长。这篇文章主要介绍了Flutter Android端启动白屏问题的解决。感兴趣的小伙伴们可以参考一下
  • app启动页白屏问题

    2017-02-17 20:23:07
    app启动页白屏问题

空空如也

1 2 3 4 5 ... 20
收藏数 21,914
精华内容 8,765
关键字:

白屏