H5白屏问题
前言
前阵子弄了灰度环境,H5这边需要给灰度环境的接口加上Cookie,配置的期间遇到一些Cookie问题以及白屏在此记录下
1、H5请求接口带不上Cookie
解决方法:前端使用了 webpack 对项目进行打包,其中 crossOriginLoading 这一项配置的是 anonymous,由于配置错了,导致Cookie带不上
`crossOriginLoading`此选项可以启用跨域加载(cross-origin loading) chunk。
`false`- 禁用跨域加载
`anonymous` - 启用跨域加载。当使用 anonymous时,发送不带凭据(credential)的请求。在加载此脚本资源时不会带上用户的 Cookies
`use-credentials`- 启用跨域加载。发送带凭据(credential)的请求。在加载此脚本资源时会带上用户的 Cookies
2、H5白屏,js 代码报错导致的
解决方法:这种报错最明显也是最简单的一种,直接复制链接在网页打开,F12进入开发者模式,观察 console 的报错并解决对应的问题即可
3、H5白屏,CDN问题
解决方法:由于部分CDN加速区域不同,导致各个区域请求 js、css 等资源响应的速度不同,部分可能请求超时,(比如当时有个客户是国外的,打开我们的 H5 链接一直白屏,而我们这边却正常)这种情况只能联系CDN提供方看能否解决,此外也可以用 17测 进行资源请求的测试
4、H5白屏,微信扫码进入页面白屏
解决方法:由于微信有缓存大小的限制,前端若在缓存中存放了太多的数据的话,可能会导致缓存失效,进而白屏,这一点是在清除微信缓存之后无意间找到的解决方法
5、H5白屏,部分苹果手机用户白屏
解决方法:当时由于前端项目比较多,打包的时候得配置好对应的请求域名,相对繁琐且容易出错,这里就使用了 nginx 重写的规则(前端无需写上对应的资源域名),将对应的环境域名拼接到对应的资源前,此时通过浏览器观察可以看到这些资源先通过301跳转,再请求对应域名的资源。后期发现这种做法出现了部分苹果手机用户进入某些页面的时候白屏,这时候猜想可能是不同手机浏览器机制的问题,Safari浏览器的301机制可能跟其他浏览器的不同,又将前端的请求域名通过301跳转的机制换掉之后就解决了
参考:
https://www.cnblogs.com/joyco773/p/9049623.html
https://www.jianshu.com/p/561a8720e762
H5白屏问题的更多相关文章
- 荷小鱼 x mPaaS | 借助 H5 容器改善 App 白屏、浏览器兼容等问题
随着5G.大数据.人工智能技术的应用,各类传统行业纷纷大力推进数字化转型升级. 而受疫情的影响,教育行业也在大幅加速线上化转型进程,各类在线教育应用也在借助各种力量拓张自己的移动端市场领域. 「荷 ...
- 提升html5的性能体验系列之一避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 移动 H5 首屏秒开优化方案探讨
转载bang大神文章,原文<移动 H5 首屏秒开优化方案探讨>,此文仅仅用做自学与分享! 随着移动设备性能不断增强,web 页面的性能体验逐渐变得可以接受,又因为 web 开发模式的诸多好 ...
- android studio你可能忽视的细节——启动白屏?drawable和mipmap出现的意义?这里都有!!!
android studio用了很久了,也不知道各位小伙伴有没有还在用eclipse的,如果还有,楼主真心推荐转到android studio来吧,毕竟亲儿子,你会知道除了启动速度稍微慢些,你找不到一 ...
- ionic ios iframe 白屏
之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常 原因是ios对app打开外部网页有限制需要取消限制 解决方法 1.确认添加whitelist 插件 2.在conf ...
- 解决Unity5+Vuforia+Network本地联机发布到Android上白屏的问题
Unity5+Vuforia+Network本地联机,在Android下点击联机,然后识别模型就出现白屏,点击屏幕上相应位置的按钮(已白屏,但点击该看不见的按钮)还是能起作用,如跳转到其他场景正常. ...
- MUI APP防止登陆页面出现白屏
最近在用MUI开发APP,总体效果,在IOS上,是完美的,但是在低端的Android手机上,就会出现性能问题,我个人觉得最严重的是,就是首页,就是APP打开的第一个页面,在iOS上,由于性能高,所以, ...
- 【小贴士】【stringify神BUG】【localstorage失效】【消灭Safari alert框】【是否延迟加载】【页面10px白屏】
前言 最近碰到几个恶心问题,也发现一点优化技巧,以及对Hybrid知识的一些整理,这里便一并拿出来做分享了,关于Hybrid的调试,会是我今后一个重点 我的博客首先是学习笔记,方便自己做知识沉淀,以后 ...
- ionic 白屏
昨天在发布新app的时候发现app在高版本的android的时候发现没有问题,在低版本的android 的时候发现存在白屏的情况,在run中alert,不能弹框,run不能运行, 参考这篇文章 ht ...
随机推荐
- APP功能测试注意点
App功能测试的7大注意点 : APP测试 在日常工作的摸索中,我们将如何做好app测试的注意点简单归结为如下内容. 弱网测试,兼容性测试,UI测试.中断测试, 01 运行 1)App安装完成后 ...
- 理解URL以及如何区分相对URL和绝对URL
URL(Uniform Resource Locator 统一资源定位符)可以理解为网络地址. url 包含了关于文件储存位置和浏览器应该如何处理文件的信息. URL的第一个部分称为模式scheme, ...
- java mar --->JSONArray.fromObject
<dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...
- kafka broker
在server.properties文件中配置: 1.broker.id kafka集群是由多个节点组成的,每个节点称为一个broker,中文翻译是代理.每个broker都有一个不同的brokerId ...
- makefile 打印
$(warning ----------$(abc)) $(info -----------------$(abc))
- Java——API文档
Sun下载JDK--解压缩--javadoc文件(Constuctor Summary[构造方法]+Method Summary[方法]) [Object] Object类是所有Java类的根 ...
- [HG]walk 题解
前言 学长博客划水,抄题解,差评. 于是我来重新写一篇正常的题解,虽然解法跟标程不一样,但是复杂度是一样的. 题面 题目描述 在比特镇一共有\(n\)个街区,编号依次为\(1\)到\(n\),它们之间 ...
- KNN算法之KD树
KD树算法是先对数据集进行建模,然后搜索最近邻,最后一步是预测. KD树中的K指的是样本特征的维数. 一.KD树的建立 m个样本n维特征,计算n个特征的方差,取方差最大的第k维特征作为根节点.选择第k ...
- andriod工程项目总结
1,胡萝卜农场项目 (1)图片缓存项目 (2)android开源框架的尝试 2,智能厨房项目 (1)将所有网络请求防止到一个service中的思路 (2)左右导航的实现 (3)fragment的使用 ...
- 一文读懂跨平台框架 Flutter 的搭建与运行
作者:个推iOS开发工程师 伊泽瑞尔 Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架. 之前我们为大 ...