creator-webview加载优化

news2024/7/11 13:32:01

title: creator-webview加载优化
categories: Cocos2dx
tags: [cocos2dx, creator, webview, 优化, 加载, 性能]
date: 2024-03-02 13:17:20
comments: false
mathjax: true
toc: true

creator-webview加载优化

前篇

Android WebView shouldInterceptRequest - https://www.jianshu.com/p/7a237e7f055c
Android WebView的性能问题及缓存机制、资源加载方案 - https://bbs.huaweicloud.com/blogs/219777
Android WebView H5 秒开方案总结 - https://juejin.cn/post/7016883220025180191

使用 Android 的 webview 去加载一个 cocos 的 h5 游戏, 如果全部资源都有网络上请求的的话, 即使使用了缓存, 第一次加载还是避免不了加载全部资源的情况, 还是会很慢.

加载H5页面慢的原因

WebView显示H5页面存在一个很明显的性能问题： WebView加载H5页面很慢

加载H5页面慢的原因有：

渲染速度慢：
（1）首先是JS本身的解析过程复杂、解析速度慢；
（2）前端页面又涉及较多的JS代码文件，叠加起来就造成了JS解析效率低；
（3）其次是Android机型碎片化，导致手机硬件设备的性能不可控，有些表现良好，有些表现就较差。
页面资源加载慢，每加载一个H5页面都会产生较多网络请求：
（1）HTML的主URL请求；
（2）HTML引用外部的JS、CSS、字体文件、图片文件等都会构造一个独立的HTTP请求。
注：每次加载都会产生这么多的网络请求，会相当耗费流量。

解决方案

可以通过以下三种方案来解决WebView的性能问题：

WebView的缓存机制
资源预加载
资源拦截

Android WebView 的缓存模式有以下4种：

LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据。
LOAD_NO_CACHE: 不使用缓存，只从网络获取数据。
LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
LOAD_CACHE_ELSE_NETWORK：只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

思路 01 - 固定文件打包到包内

假设引擎版本不变的情况下, 引擎部分资源是不会变的, 如 cocos-js/cc.xxx.js, 这个也是大头文件, 大小是 2.3m, 所以可以把这个文件打包到包内, 通过拦截 webview 请求判断是否是这个文件, 是的话直接从包内读取这个文件 (实测 100ms 左右), 这可比网络请求快多了.

示例代码

public class WebviewClientHelper extends BridgeWebViewClient {
    public WebviewClientHelper(BridgeWebView webView) {
        super(webView);
    }

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        WebResourceResponse wrr = super.shouldInterceptRequest(view, request);
        LogUtil.D("--- shouldInterceptRequest url: %s", request.getUrl().toString());

        String url = request.getUrl().toString();
        // 引擎固定的内容
        if (url.indexOf("cocos-js") > 0) {
            Pattern r = Pattern.compile("cocos-js/cc\\.\\w+\\.js");
            Matcher m = r.matcher(url);
            if (m.find()) {
                String ccjsFile = "cc.e0cbd.js";
                byte[] bts = FileTool.getAssetsFileBts(ActivityMgr.getIns().getActivity(), ccjsFile);
                return new WebResourceResponse("text/html", "UTF-8", new ByteArrayInputStream(bts));
            }
        }
        return wrr;
    }
}

final WebView wv = new WebView(activity);
wv.setWebViewClient(new WebviewClientHelper(wv));

思路 02 - 使用 LOAD_CACHE_ELSE_NETWORK 缓存模式

这种缓存模式只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

所以进入游戏不需要网络请求, 直接本地 io 缓存文件运行, 速度就会快很多, 但是有个问题就是如果网页更新了怎么办? 结合 cocos 的 MD5 缓存 模式, cocos 打出来的包, 只有 index.html 入口文件不会有文件名变化, 其他所有有变化的文件, 都自动拼上了 md5 的值, 如: index.js 会变成 index.0s3s1.js, 所以只需要对 index.html 进行拦截, 去请求最新网络上的内容即可

示例代码

@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
    WebResourceResponse wrr = super.shouldInterceptRequest(view, request);

    // 入口每次请求最新的
    String url = request.getUrl().toString();
    if (url.indexOf("index.html") > 0) {
        // 因为使用了 LOAD_CACHE_ELSE_NETWORK：只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
        // 结合 cocos 的机制, 每次更新只有 index.html 入口文件是不变的, 所以这个文件需要动态请求
        HttpHelper.SHttp sh = HttpHelper.okhttpGetSync(MiscFuncApi.packDB.UrlB, null);
        if (sh.code == 200) {
            LogUtil.D("--- req [%s] success", MiscFuncApi.packDB.UrlB);
            return new WebResourceResponse("text/html", "UTF-8", new ByteArrayInputStream(sh.bytes));
        }
    }
    return wrr;
}

cdn 加速

上 cdn 加速, 开启性能优化
- js, html, css 等开启优化
- 开启 Gzip (推荐) 或者 Brotli 压缩, Gzip 的适配性更好, 普遍都支持
  
  例如阿里云 cdn

webview 测试是否支持 gzip 或者 brotli

How to enable brotli compression on Android System Webview? - https://stackoverflow.com/questions/65138909/how-to-enable-brotli-compression-on-android-system-webview

可以打开这个网站测试: https://www.cylog.org/headers/, 查看 Accept-Encoding , 查看支持的压缩方式

实际测试, gzip 压缩都支持, br 压缩要求高版本的 chrome 内核才能支持, 所以技术上应该选择支持性更好的方式, 也就是 gzip 压缩方式.

如果 chrome 内核版本, 如 Chrome/122.0.0.0, >= 120.0.0.0 版本的话, 就是支持 br 的