Android WebView 页面性能监控实现

最新推荐文章于 2025-02-26 14:47:11 发布

jwcqc

最新推荐文章于 2025-02-26 14:47:11 发布

阅读量6.4k

点赞数 2

文章标签： android webview 性能

本文链接：https://blog.youkuaiyun.com/jwcqc/article/details/52937672

版权

本文介绍了如何在Android WebView中实现页面性能监控，包括资源加载耗时和JS错误捕获。通过注入JS代码，利用Performance API获取Navigation Timing和Resource Timing数据，以监控DOMReady、onLoad时间等，并捕获JS错误。目前只支持页面和资源性能，未来计划扩展到Ajax请求的监控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇 Android WebView 开发使用笔记中记录了WebView的一些使用方法以及注意事项，在这一篇，我将对WebView中页面资源加载以及JS错误的监控实现进行详细的介绍。

使用方法

首先贴一下代码 https://github.com/jwcqc/WebViewMonitor
核心其实就是 https://github.com/jwcqc/WebViewMonitor/blob/master/app/src/main/assets/collector.js 这个js文件，当WebView中页面加载完成后，通过重写WebViewClient的onPageFinished(WebView view, String url) 方法，调用WebView的loadUrl方法加载一段JS，新加一个script标签到head标签中，并在script中包含要注入的collecotr.js的url地址，再为加入的script标签添加onload事件，确保该script已加载完成后调用js文件中编写好的的startWebViewMonitor()方法即可，代码如下：

String inject = "javascript:" +
                "   (function() { " +
                "       var script=document.createElement('script');  " +
                "       script.setAttribute('type','text/javascript');  " +
                "       script.setAttribute('src', '" + injectJsUrl + "'); " +
                "       document.head.appendChild(script); " +
                "       script.onload = function() {" +
                "           startWebViewMonitor();" +
                "       }; " +
                "    }" +
                "    )();";

webview.loadUrl(inject );

在collecor.js中，分别写有两个方法，用来发送监控信息到Android本地对象中对应的方法上：

function sendResourceTiming(e) {
   
    myObj.sendResource(JSON.stringify(e))
};

function sendErrors() {
   
    var err = errorMonitor.getError();
    if (err.length > 0) {
        var errorInfo = {
            type: "monitor_error",
            payload: {
                url:

最低0.47元/天解锁文章