（敲黑板）android - webview的优化办法：　不要使用spa，直接使用最传统的html

访问量: 2889

重点来了。

经过投入很多的事件，我们发现，SPA项目（例如vuejs) 可以完美的运行在ios上。　

但是对于android, 则无法集成SPA项目，特别是该项目中ｊｓ代码很复杂的时候。

现在的一个项目，在iｏｓ上瞬间打开，但是在android中，打开一次１０秒钟。请求一个页面，５.6秒。

怎么优化都不行。　缓存啥的办法都使用了。不行。

昨天被逼无奈，　试了一下打开最简单的hello 　的html页面。结果发现，瞬间打开。

问题根源找到了。

耗时5.x 秒的vuejs　页面，　是因为页面中的js逻辑太复杂导致的。

所以，对于android，　我们要直接使用　“最普通的”ＨＴＭＬ。

把vuejs页面转换成普通html的过程： 

1. 打开vuejs 

2. google developer tool =>  查看元素

3. 找到<html> 标签，整个复制。

4. 新建一个html 文件（就是它了），　把整个内容粘贴过去。

5. 删掉无用的js. (大部分是在底部。都跟vuejs相关)

并且，在文件末尾，加上：

<script>
function continueVerify (){
  if (window.WebViewJavascriptBridge) {
    WebViewJavascriptBridge.callHandler(
      'continueVerify', {'param': 'verify'}
      , function(responseData) {
        console.log('****************' + responseData)
      }
    )
  } else {
    document.addEventListener(
      'WebViewJavascriptBridgeReady'
      , function () {
        WebViewJavascriptBridge.callHandler(
          'continueVerify', {'param': 'verify'}
          , function(responseData) {
            console.log('****************' + responseData)
          }
        )

      },
      false
    );
  }
}
</script>

6. 把  app.xxxxx.css 保存下来，重命名为：　app_for_android.css,  这个css很关键，直接对应了后面很多元素的样式。

我们为了节省时间，就不一个一个的肉眼对了。

（以上步骤，如果已经做过一次的话，就不用再做了。把现有的文件copy过来用)

7. 回到vuejs页面，复制<div id='app'> 部分。　　

（这个时候就会看到，页面出来了）

8. 修改对应的click 事件。

（这个时候，就可以了）

订阅/RSS Feed

Subscribe