我们的 H5页面用 uni-app 写的,IOS 版本每次打开这个页面都超级慢,进度条一直加载不完,甚至导致白屏很久,而 Android 版本则不会有这些问题。
在对 IOS 版本抓包时发现,有一个图片(https://cdn.dcloud.net.cn/img/shadow-grey.png)加载很慢,每次都是等这张图片加载完之后,页面才渲染,这个是导航栏下方的阴影线。官方也一直不解决。所以我们思考了这样的解决方式:
解决方法:
一、编译后在源码里删除引用
二、直接把这个cdn图片下载下来作为图片引入,然后在uni.scss里面添加代码把cdn覆盖
body::after{
position:fixed;
content:'';
left:-1000px;
top:-1000px;
-webkit-animation:shadow-preload .1s;
-webkit-animation-delay:3s;
animation:shadow-preload .1s;
animation-delay:3s
}
@-webkit-keyframes shadow-preload{
0%{background-image:url(@/static/img/shadow-grey.png)}
100%{background-image:url(@/static/img/shadow-grey.png)}
}
@keyframes shadow-preload{
0%{background-image:url(@/static/img/shadow-grey.png)}
100%{background-image:url(@/static/img/shadow-grey.png)}
}