很多无线端都使用前端模板进行数据渲染,在糟糕的网速情况下,一进去页面,看到的不是白屏就是 loading,这就是白屏问题。
此问题发生的原因基本可以归结为网速、静态资源。
1、css文件加载需要一些时间,在加载的过程中页面是空白的。
解决:可以考虑将css代码前置和内联。
2、首屏无实际的数据内容,等待异步加载数据再渲染页面导致白屏。
解决:在首屏直接同步渲染html,后续的滚屏等再采用异步请求数据和渲染html。
3、首屏内联js的执行会阻塞页面的渲染。
解决:尽量不在首屏html代码中放置内联脚本。
还有一些其他的解决办法:
根本原因是客户端渲染的无力,因此最简单的方法是在服务器端,使用模板引擎渲染所有页面。同时
1、减少文件加载体积,如html压缩,js压缩
2、加快js执行速度 比如常见的无限滚动的页面,可以使用js先渲染一个屏幕范围内的东西
3、提供一些友好的交互,比如提供一些假的滚动条
4、使用本地存储处理静态文件。
相关推荐
大家最为熟悉的拨号盘或者短信应用,在第一次启动的时候,会有一定时间的白屏现象,其实,默认的情况下,android程序启动时,都会有一个黑屏或者白屏闪过的现象,...我们该如何优化白屏/黑屏现象?下面我为大家一一介绍
随着移动互联网向纵深发展,用户变得...开发者难以兼顾所有的性能问题,而在传统的开发流程中,我们解决性能问题的方式通常是在得到线上用户的反馈后,再由开发人员去分析引发问题的根源。 本方案来自美团的内部分享
ReactNative启动白屏问题解决方案,教程.docx
Android下WebView加载flash闪白屏问题解决方案源码
前言 : 最近使用了vue-cli3.0 开发了一个移动网页端项目,准备打包发布了。...满心欢喜的打开,结果还是白屏。打开调试发现文件路径是正确的,这就唧唧了!!。 发现问题 各种百度。发现了样的问题 一看vue-rout
文章目录前言一、白屏时间过长分析二、针对性优化针对animate.css针对mint-ui的优化针对图片的优化三、webpack打包优化与分析webpack-bundle-analyzer打包分析打包优化四、优化后线上测试速度提升五、优化总结 ...
你会很奇怪,为什么有些app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示,但是有些app却不会如QQ手机端,的确这里要做处理一下。这里先了解一下为什么会出现这样的现象,其实很简单,简历一个简单的...
WhoCare 黑白屏优化
Android启动页出现白屏、黑屏的解决方案.docx
电脑开机白屏怎么办,开机白屏解决方法.docx
主要介绍了详解vue 项目白屏解决方案,详细的介绍了白屏的解决方案,非常具有实用价值,需要的朋友可以参考下
│ 03 案例分析:移动端 M 站性能优化落地注意事项.md │ 04 指标采集:首屏时间指标采集具体办法.md │ 05 指标采集:白屏、卡顿、网络环境指标采集方法.md │ 06 工具实践:性能 SDK 及上报策略设计.md │ 07 平台...
Android原生的白屏问题可以通过为 Launcher Activity 设置 windowBackground 解决,而 Flutter 也是基于此办法,同时优化了 Flutter 初始化阶段的白屏问题。之所以新建的项目是白屏,因为flutter对此的方法默认是...
Android的App启动时白屏的问题解决办法 在手机上调试后第一次启动后会等待很长时间白屏, 设置style样式,给activity加上设置的样式,完美解决 参考一下下面的代码.就可以解决(亲测好用) <style name=SplashTheme ...
该BAT文件就是解决网页使用摄像头照像白屏问题
窗口白屏问题(PB花屏补丁 解决浪潮软件窗口白屏问题
React Native 启动白屏问题解决教程
解决swing皮肤白屏问题,打包完成的可视化项目,更换jre即可
linux系统安装kettle,点击connect,出现白板,在linux系统解决此问题 windows系统安装kettle,点击connect,出现白板,在windows系统解决此问题