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

文章目录

1、需求

在使用chrome浏览器访问页面时，浏览器自带的开发者工具可以查看页面每个资源的资源大小和加载时间。

这个功能可以让我们直接知道接口或资源的耗时情况和大小情况，如果存在性能问题，可以进行分析处理。

但是如果系统的功能页面比较多，每个页面都一个一个分析查看的，会比较耗工作量。功能测试大多是由测试工程师进行，测试工程师更关注功能的完善，不会统计每个页面的性能。运营人员在运营过程中，也会错误上传一些过大的，也需要测试人员在访问这个资源并且同时打开了开发者工具时才能发现。

2、实现代码

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

java 复制代码

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应用下载