基于JCEF实现网页资源性能分析

1、需求

在使用chrome浏览器访问页面时,浏览器自带的开发者工具可以查看页面每个资源的资源大小和加载时间。
在这里插入图片描述
这个功能可以让我们直接知道接口或资源的耗时情况和大小情况,如果存在性能问题,可以进行分析处理。
但是如果系统的功能页面比较多,每个页面都一个一个分析查看的,会比较耗工作量。功能测试大多是由测试工程师进行,测试工程师更关注功能的完善,不会统计每个页面的性能。运营人员在运营过程中,也会错误上传一些过大的,也需要测试人员在访问这个资源并且同时打开了开发者工具时才能发现。

2、实现代码

本文是基于JCEF框架(Chromium嵌入式框架CEF,允许将Web浏览器嵌入到Java桌面应用中),简单封装了基本浏览器功能,在JCEF的内部接口类CefRequestHandler中实现记录加载时间和资源大小。

public class RequestHandler extends CefResourceRequestHandlerAdapter implements CefRequestHandler {
    private final Frame owner_;
    // 记录每个请求的耗时
    public Map<String, Long> table = new Hashtable<>();

    public RequestHandler(Frame owner) {
        owner_ = owner;
    }

    
    /**
     * 记录http请求结束的时间,并保存到文件
     */
    @Override
    public void onResourceLoadComplete(CefBrowser browser, CefFrame frame, CefRequest request,
                                       CefResponse response, CefURLRequest.Status status, long receivedContentLength) {
        String requestUrl = request.getURL();
        String browserUrl = browser.getURL();
        long size = receivedContentLength;
        long start = table.getOrDefault(requestUrl, -1L);
        long takeTime = System.currentTimeMillis() - start;
        Map<String, String> mapTemp = new HashMap();
        response.getHeaderMap(mapTemp);
        JSONObject map = JSONUtil.parseObj(JSONUtil.toJsonStr(mapTemp).toLowerCase());
        String contentType = map.getStr("content-type", "");
        String server = map.getStr("server", "");
        String xPoweredBy = map.getStr("x-powered-by", "");
        NetworkLog log = new NetworkLog(requestUrl, browserUrl, size, takeTime, contentType, server, xPoweredBy, response.getStatus());
        FileCsvUtil.writeNetworkLog(log);
    }

    /**
     * 记录http请求开始的时间
     */
    @Override
    public boolean onBeforeResourceLoad(CefBrowser browser, CefFrame frame, CefRequest request) {
        String url = request.getURL();
        table.put(url, System.currentTimeMillis());
        return false;
    }
    
    // 这里省略其它接口实现代码
}

在JCEF初始化时,需要把RequestHandler添加进去。

public class BrowserCef extends JFrame {

    private CefApp cefApp_;
    private CefClient client_;
    // 省略的代码
    private void initCef() {
        try {
            CefAppBuilder builder = new CefAppBuilder();
            builder.getCefSettings().cache_path = cachePath.getAbsolutePath();
            // 远程调试http://127.0.0.1:9999/,支持selenium
            // builder.getCefSettings().remote_debugging_port = 9999;
            builder.getCefSettings().windowless_rendering_enabled = false;
            builder.setAppHandler(new MavenCefAppHandlerAdapter() {
                @Override
                public void stateHasChanged(CefApp.CefAppState state) {
                    if (state == CefApp.CefAppState.TERMINATED) System.exit(0);
                }
            });
            cefApp_ = builder.build();
            client_ = cefApp_.createClient();
            // 监听页面资源请求
            client_.addRequestHandler(new RequestHandler(BrowserCef.this));
            // 省略的代码
    }

    public static void main(String[] args) {
        System.setProperty("file.encoding","UTF-8");
        System.setProperty("sun.java2d.dpiaware", "true");
        try {
            UIManager
                    .setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
            EventQueue.invokeLater(() -> {
                try {
                    BrowserCef frame = new BrowserCef();
                    frame.setVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            });
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

3、运行效果

先使用jcef访问所有网页,然后查看耗时
在这里插入图片描述
在访问时,会把资源的大小和加载时间保存到csv文件。
在这里插入图片描述
使用 excel打开这个文件,可以所有访问过的资源文件性能。
在这里插入图片描述

JCefB应用下载

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

penngo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值