Qt中C++跳过QML调用JavaScript的可行性及地图性能优化

我正在开发一款基于Qt的地图应用，当前通过QML作为中间层持续将C数据传输到JavaScript时，地图加载耗时过长甚至无法显示。我怀疑是QML中间层的性能开销导致的，想知道**是否可以跳过QML直接从C调用HTML中的JavaScript函数**。另外，我采用HTML加载地图并嵌入到QML的WebEngineView中，当数据更新帧率设为60FPS时地图完全无法显示，降到30FPS才能正常显示，求支持60FPS的优化方案或者更高效的数据传输方式。

一、跳过QML直接从C++调用JavaScript函数 #

完全可以跳过QML中间层，直接通过Qt WebEngine的C++ API调用HTML中的JS函数，核心是利用QWebEnginePage的runJavaScript()方法实现跨进程调用。

实现步骤 #

1. 在C++中获取QML层面WebEngineView对应的QWebEnginePage实例；
2. 直接调用runJavaScript()执行目标JS函数，无需经过QML的信号传递。

代码修改示例（main.cpp） #

// 引擎加载QML后，获取WebEngineView对应的页面对象
QObject* rootObj = engine.rootObjects().first();
QObject* webViewObj = rootObj->findChild<QObject*>("webview"); // 对应QML中WebEngineView的id
QWebEnginePage* webPage = qvariant_cast<QWebEnginePage*>(webViewObj->property("page"));

// 修改定时器逻辑，直接在C++中触发JS调用
QTimer timer;
timer.setInterval(1000/60);
QObject::connect(&timer, &QTimer::timeout, [=]() {
    foo_object->updatePosition();
    // 获取最新定位数据
    auto& naviData = foo_object->data->map_navi;
    QString jsCode = QString("recvGps(%1, %2, %3, %4, %5);")
                        .arg(naviData.lat_raw)
                        .arg(naviData.lon_raw)
                        .arg(naviData.lat_est)
                        .arg(naviData.lon_est)
                        .arg(naviData.direction);
    // 确保页面已加载完成再调用JS
    if (webPage && webPage->isLoaded()) {
        webPage->runJavaScript(jsCode);
    }
});
timer.start();

注意：需要确保QML中的WebEngineView设置了id: webview，且监听QWebEnginePage::loadFinished信号确认页面加载完成后再执行JS调用。

二、60FPS下地图显示异常的优化方案 #

1. 减少跨进程通信开销 #

• 数据防抖：设置经纬度变化阈值，只有当定位数据变化超过阈值时才触发更新，避免每帧无意义的传输；
• 批量更新：将多帧数据打包成数组一次性传递给JS，减少runJavaScript()的调用次数（Qt WebEngine的C++与JS通信是跨进程的，频繁调用会产生显著性能损耗）。

2. 优化JS端地图更新逻辑 #

• 复用对象：避免每次更新都创建新的google.maps.LatLng对象，复用已有实例直接修改坐标：

// 预先初始化位置对象
let rawPos = new google.maps.LatLng(0, 0);
let estPos = new google.maps.LatLng(0, 0);

function recvGps(lat0, lon0, lat1, lon1, direction) {
    // 直接修改坐标，跳过对象创建开销
    rawPos.lat = () => lat0;
    rawPos.lng = () => lon0;
    raw.setPosition(rawPos);

    estPos.lat = () => lat1;
    estPos.lng = () => lon1;
    est.setOptions({
        position: estPos,
        icon: { ...icon, rotation: direction }
    });
}

• 关闭不必要动画：禁用地图默认的位置平滑过渡动画，或设置极短的动画时长，减少渲染开销。

3. 优化WebEngine配置 #

调整WebEngineView的设置，开启硬件加速与高效渲染：

WebEngineView {
    id: webview
    // ... 其他原有设置
    settings {
        autoLoadImages: true
        dnsPrefetchEnabled: true // 开启DNS预取加速地图资源加载
        webGLEnabled: true // 开启WebGL提升地图渲染效率
        hardwareAccelerationEnabled: true // 强制硬件加速
    }
}

4. 移除QML中间层的信号传递 #

采用第一部分的C++直接调用JS方案，去掉QML中Connections对map_naviChanged信号的监听，彻底消除QML中间层的性能损耗。

附：原代码 #

main.cpp #

int main(int argc, char *argv[])
{
    set_qt_environment();

    QCoreApplication::setOrganizationName("NaviMap");
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
    QtWebEngineQuick::initialize();

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    foo *foo_object = new foo();
    engine.rootContext()->setContextProperty("obj_server", foo_object->data);


    const QUrl url(u"qrc:Main/main.qml"_qs);
    QObject::connect(
                &engine, &QQmlApplicationEngine::objectCreated, &app,
                [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    },
    Qt::QueuedConnection);

    engine.addImportPath(QCoreApplication::applicationDirPath() + "/qml");
    engine.addImportPath(":/");

    engine.load(url);

    QTimer timer;
    timer.setInterval(1000/60);
    QObject::connect(&timer, &QTimer::timeout, foo_object, &foo::updatePosition);
    timer.start();

    if (engine.rootObjects().isEmpty()) {
        return -1;
    }

    return app.exec();
}

App.qml #

QtObject{
    id: backendId
    WebChannel.id: "backend"
}

WebChannel {
    id: myWebChannel
    registeredObjects: backendId
}

WebEngineView {
    id: webview
    anchors.fill: parent
    webChannel: myWebChannel
    settings.javascriptEnabled: true
    url: "html/index.html"
    profile {
        httpCacheType: WebEngineProfile.DiskHttpCache
        persistentCookiesPolicy: WebEngineProfile.ForcePersistentCookies
    }
    settings {
        autoLoadImages: true
        dnsPrefetchEnabled: false
    }
    onLoadingChanged:
    {
        if (webview.loadProgress === 100)
        {
            isLoad = true;
        }
    }
}
Connections {
    target: obj_server

    function onMap_naviChanged() {
        var lat0 = obj_server.map_navi.lat_raw;
        var lon0 = obj_server.map_navi.lon_raw;
        var lat1 = obj_server.map_navi.lat_est;
        var lon1 = obj_server.map_navi.lon_est;
        var heading = obj_server.map_navi.direction;

        if(false)
        {
            webview.runJavaScript(`recvGps(${lat0},${lon0},${lat1},${lon1},${heading});`);
        }
    }
}

myJS.js #

function initMap() {
    var webChannel = new QWebChannel(qt.webChannelTransport, function(channel){
        backend = channel.objects.backend;
        // ... 省略其他代码
    });
}

function recvGps(lat0, lon0, lat1, lon1, direction) {
    var rawPos = new google.maps.LatLng(lat0, lon0);
    var estPos = new google.maps.LatLng(lat1, lon1);

    raw.setPosition(rawPos);
    est.setOptions({
        position: estPos,
        icon: { ...icon, rotation: direction }
    });
}

内容的提问来源于stack exchange，提问作者KaiAkiho