How to efficiently load multiple tile layers with different XYZ sources in OpenLayers 6?

Question

I need to add 60+ tile layers onto a map at once, each with a different XYZ source using MapGuide server.

I'm able to do it, as shown below, but the performance is not ideal, because the way Openlayers deals with this is making requests to the server along the way.

let layers = [];

for (var i = 0; i < 61; ++i) {
    var layer = new TileLayer({
        source: new XYZ({
            tileUrlFunction: testtileUrlFunction.bind(null, i % 99),
            tileGrid: new TileGrid({
                origin: [-5123200, 10002100],
                resolutions: scaleArr,
            }),
        }),
        zIndex: i,
    });

    layers.push(layer);
};

let map = new Map({
    target: 'map',
    maxTilesLoading: Infinity,
    view: new View({
        constrainResolution: true,
        maxZoom: 9,
        minZoom: 0,
        resolutions: scaleArr,
        zoom: 0
    }),
    layers: layers,
});

It seems that each time Openlayers renders a layer, it requests from the server only tiles of that particular layer, while in comparison Leaflet sends out all the requests from every layer at once up front, which improves the performance a lot.

I wonder if there's something I can do in Openlayers to achieve similar effects.