[移动开发] WebView（五）—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> WebView（五）—— WebView的优化 -> 正文阅读

[移动开发]WebView（五）—— WebView的优化

`WebView`的优化

WebView启动过程大概分为一下几个阶段：

HTML加载路程

注意：在APP中打开WebView的第一步并不是建立连接，而是启动浏览器内核。

以下通过加载流程各节点耗时分析优化

1 `WebView`创建初始化

首次初始化WebView的时间会比较长。初始化后，即使WebView已释放，但一些WebView共用的全局服务/资源对象仍未释放，之后初始化不需要生成，因此初始化变快。

可以在客户端启动的时候，就初始化一个全局的WebView，这种方法可以比较有效的减少WebView在APP中的首次打开时间。但是，这也带来了一些问题，额外的内存消耗；页面间跳转需要清空上一个页面的痕迹，更容易内存泄露。

代码如下所示：

public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
      	// 提前初始化，在Application中初始化WebView备用
        WebView mWebView = new WebView(new MutableContextWrapper(this));
    }   
}

2 客户端代理数据请求

在客户端初始化WebView的同时，直接由native代码开始网络请求数据；当页面初始化完成后，向native获取其代理请求的数据。 此方法虽然不能减小WebView初始化时间，但数据请求和WebView初始化可以并行进行，总体的页面加载时间就缩短了。

3 资源本地化

客户端预置资源，并维护网络图片url和本地图片自检的关联，根据一定策略保证本地预置资源为最新资源。若预置资源不限于图片资源，由于html、js、css等资源容易发生变化，因此还需实现一套机制实现本地资源和服务端数据及时的更新。即服务端需要支持版本控制和资源增量下发等功能。

服务端下发填充好首屏数据的网页，作为网页首屏展示，减少网页上数据请求时间。APP闲置状态时，下载离线包到本地，加载时优先加载离线包数据。后续更新接收下发的差异包，与当前离线包合并成完整包。

资源本地化

方式一：JS方法注入

// 1. 固定资源放到项目文件夹，如/Assets文件夹中 
// 2. 注入JS方法webView.addJavascriptInterface(new JsInterface(), "JsInterface")  
private class JsInterface {    
  @JavascriptInterface    
  public String getLocalSrc(String src) {      
    return "file://storage/emulated/0/app/file/a.jpeg"    
  }  
}

// 3. 页面加载完成时，修改图片标签
private class MyWebViewClient extends WebViewClient {  
  
  @Override  
  public void onPageFinished(WebView view, String url) {    
    super.onPageFinished(view, url);    
    String js = "javascript:(function() { " +      
      "var objs = document.getElementsByTagName('img'); " +     
      "for (var i = 0; i < objs.length; i++)  { " +     
      "var imgUrl = objs[i].getAttribute('src'); " +      
      "var localUrl = window.local_obj.getLocalSrc(imgUrl); " +      
      "if (localUrl) { " +      
      "objs[i].setAttribute('src', localUrl); " +      
      "} } })()";    
    view.loadUrl(js);  
  }}

方式二：请求拦截

webView.setWebViewClient(new WebViewClient() {  
  // 为方便，此处进写Api 21以下方法，Api21 以上雷同  
  @Override  
  public WebResourceResponse shouldInterceptRequest(WebView view, String url) {    
    // 1. 判断拦截资源的条件    
    if (url.contains("logo.gif")) {      
      // 假设网页图片资源为：http://abc.com/image/logo.gif      
      // 图片资源文件名为：logo.gif      
      // 2. 创建输入流      
      InputStream is = null        
      try {          
        // 3. 获得需要替换的资源（存放在assets文件夹中）          
        is = getApplicationContext().getAssets().open("image/abc.png")         
      } catch (IOException e) {          
        e.printStackTrace()        
      }      
      // 4. 替换资源      
      WebResourceResponse reponse = new WebResourceResponse("image/png", "utf-8", is)        
        return response    
    }
    return super.shouldInterceptRequest(view, url)  
}})

4 `DNS`解析耗时

以美团为例，美团的客户端请求域名主要位于api.meituan.com，然而内嵌的WebView主要位i.meituan.com。初次打开APP时：客户端首次打开都会请求api.meituan.com，其DNS将会被系统缓存。然而当打开WebView的时候，由于请求了不同的域名，需要重新获取i.meituan.com的IP，这样用户打开WebView时就在DNS上耗费了时间。