
https://juejin.cn/post/
webView.setWebViewClient(new WebViewClient() {
@Nullable
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
// 获取请求的URL
String url = request.getUrl().toString();
try {
// 使用HttpURLConnection或者OkHttp来处理请求
HttpURLConnection connection = (HttpURLConnection) new URL(url).openConnection();
// 记录开始时间
long startTime = System.currentTimeMillis();
// 连接并获取响应
connection.connect();
InputStream inputStream = connection.getInputStream();
// 计算下载速度
long endTime = System.currentTimeMillis();
long duration = endTime - startTime;
int contentLength = connection.getContentLength();
double speed = (double) contentLength / duration; // 这是字节/毫秒,可能需要转换为更合适的单位
// 创建并返回WebResourceResponse
return new WebResourceResponse(connection.getContentType(), connection.getContentEncoding(), inputStream);
} catch (IOException e) {
// 处理错误
return null;
}
}
});
在HTML5中,有一个叫做Navigation Timing API的接口,它可以提供关于页面加载性能的详细信息,包括每个资源的加载时间。可以通过注入JavaScript代码来获取这些信息。
-
navigationStart: 导航开始的时间。 -
domLoading: 开始解析DOM树的时间。 -
domInteractive: 完成解析DOM树的时间,此时所有的脚本都被执行完,但资源(如图片)可能还没有加载完成。 -
domContentLoadedEventEnd: DOMContentLoaded事件结束的时间。 -
loadEventEnd: load事件结束的时间,此时页面及所有依赖的资源都已完成加载。
-
name: 资源的URL。 -
initiatorType: 资源的类型(例如"script"、"link"、"img"等)。 -
duration: 资源加载的总时间。 -
responseEnd: 从请求开始到接收到响应的最后一个字节的时间。
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
// 页面加载完成后,注入JavaScript代码来获取性能数据
view.evaluateJavascript(
"(function() {" +
"var performance = window.performance;" +
"var timing = performance.timing;" +
"var resources = performance.getEntriesByType('resource');" +
"var data = {" +
"'timing': timing," +
"'resources': resources.map(function(resource) {" +
"return {" +
"'name': resource.name," +
"'type': resource.initiatorType," +
"'duration': resource.duration," +
"'responseEnd': resource.responseEnd" +
"};" +
"})" +
"};" +
"return JSON.stringify(data);" +
"})()",
new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
// 在这里处理返回的JSON数据
}
});
}
});
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
// 页面加载完成后,注入vConsole的脚本
injectScriptFile(view, "vconsole.min.js");
}
private void injectScriptFile(WebView view, String scriptFile) {
InputStream input;
try {
input = getAssets().open(scriptFile);
byte[] buffer = new byte[input.available()];
input.read(buffer);
input.close();
// 字符串编码为UTF-8
String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
view.evaluateJavascript("(function() {" +
"var parent = document.getElementsByTagName('head').item(0);" +
"var script = document.createElement('script');" +
"script.type = 'text/javascript';" +
"script.innerHTML = window.atob('" + encoded + "');" +
"parent.appendChild(script)" +
"})()", null);
} catch (IOException e) {
// 处理异常
}
}
});
-
在Android设备上安装最新版本的Chrome浏览器,并确保它是打开状态。 -
在Android设备上启用开发者选项和USB调试:首先,需要在设备的"设置"中找到"关于手机"或"关于设备",然后连续点击"版本号"或"构建号"七次,这样就可以启用"开发者选项"。然后,可以在"开发者选项"中启用"USB调试"。 -
使用USB线连接Android设备和开发机:需要使用USB线将Android设备连接到开发机。 -
在开发机上打开Chrome DevTools:可以在Chrome浏览器的地址栏输入chrome://inspect,然后按回车键打开Chrome DevTools。 -
在Chrome DevTools中选择你的设备:在"chrome://inspect/#devices"页面,应该能看到你的Android设备和设备上打开的Chrome标签页。可以点击"inspect"链接来打开一个DevTools窗口,用来调试选中的标签页。 -
在DevTools窗口中调试H5页面:现在可以像在桌面浏览器中一样,使用DevTools窗口中的各种工具来调试H5页面。例如,可以使用"Elements"面板来查看和修改DOM,使用"Network"面板来查看网络请求,使用"Console"面板来查看和执行JavaScript代码,等等。
-
设置代理:首先,我们需要在Android设备或模拟器上设置一个HTTP代理。代理的地址和端口应该设置为抓包工具的地址和端口。 -
开始抓包:然后,在抓包工具上开始抓包。我们应该能够看到Android设备或模拟器上的所有HTTP和HTTPS请求。 -
加载H5页面:在Android设备或模拟器上加载H5页面。我们应该能够在抓包工具上看到所有的网络请求。 -
分析数据:我们可以分析抓包数据来了解H5页面的加载过程。例如,可以查看每个请求的时间,找出加载时间最长的请求,查看HTTP状态码等。
版权声明:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符,请将相关资料发送至xkadmin@xkablog.com进行投诉反馈,一经查实,立即处理!
转载请注明出处,原文链接:https://www.xkablog.com/hd-xnyh/69460.html