Skip to content

mobileHack

白屏解决与优化方案

当前很多无线页面都是用前端模板进行数据渲染,那么在糟糕的网速情况下,一进去页面,看到的不是白屏就是 loading,这称为白屏问题。

此问题发生的原因基本可以归结为网速跟静态资源

1、css 文件加载需要一些时间,在加载的过程中页面是空白的。

解决:可以考虑将 css 代码前置和内联。

2、首屏无实际的数据内容,等待异步加载数据在渲染页面导致白屏

解决:在首页直接同步渲染 html,后续的滚屏等再采用异步请求数据和渲染 html

3、首屏内联 js 的执行会阻塞页面的渲染。

解决:尽量不在首屏 html 代码中房子内联脚本

解决方案

根本原因是客户端渲染的无力,因此最简单的方法是咋服务器端,使用模板引起渲染所有页面。同时

1 减少文件加载体积,如 html 压缩,js 压缩

2 加快 js 执行速度,比如常见的无限滚动的页面,可以使用 js 先渲染一个屏幕范围内的东西

3 提高一些优化的交互,比如提供一些假的滚动条

4 使用本地存储处理静态文件

如何实现打开已安装的 app,若未安装则引导用户安装?

来自 http://gallery.kissyui.com/redirectToNative/1.2/guide/index.html kissy mobile 通过 iframe src 发送请求打开 app,自定义 url scheme,如 taobao://home(淘宝首页)、etao://scan(一淘扫描);如果安装了客户端则会直接唤起,直接唤起后,之前浏览器窗口(或者扫码工具的 webview)推入后台;如果在指定的时间内客户端没有被唤起,则 js 重定向到 app 下载地址。大概实现代码如下

javascript
goToNative:function () {
    if(!body) {
        setTimeout(function() {
            document.body.appendChild(iframe);
        }, 0)
    } else {
        body.appendChild(iframe)
    }
}

setTimeout(function () {
    document.body.removeChild(iframe);
    gotoDownload(stratTime) // 去下载,下载链接一般是 itunes app store 或者 apk 文件链接
   	// 测试时间设置小于800ms时,在android下的UC浏览器会打开native appp时并下载apk,
    // 测试android+UC下打开native的时候最好大于800ms
}, 800)

需要注意的是 如果是 android chrome 25 版本以后,在 iframe src 不会发送请求,原因如下 https://developers.google.com/chrome/mobile/docs/intents ,通过 loacation href 使用 intent 机制拉起客户端可行并且当前页面不跳转

javascript
window.location =
    'intent://' +
    schemeUrl +
    '#Intent;scheme=' +
    scheme +
    ';package=' +
    self.package +
    ';end';

神奇的 iframe

Flutter 开发的App引用,打开企业微信客服,返回时会白屏

起初用的是 location.href

例如

javascript
location.href = 'https://work.weixin.qq.com/kfid/xxx'

不行,后来同事用 iframe 打开可以

我很惊讶,iframe 不是嵌入代码吗,怎么能打开,于是向同事要了代码

html
<iframe id="iframe" frameborder="0" style="opacity: 0;position: absolute;"></iframe>
<script>
  const iframe = document.getElementById('iframe');
  iframe.setAttribute('src', 'https://work.weixin.qq.com/kfid/xxxx');
</script>

神奇,给 iframe 赋值,竟然能唤起企业微信

这不 hack 吗

参考资料