如何使用 JavaScript 手动获取和插入图像并覆盖浏览器资源调度

如何解决如何使用 JavaScript 手动获取和插入图像并覆盖浏览器资源调度

我一直试图在另一个 JavaScript（例如 script.js）之前通过 JavaScript 将图像（例如 img1.jpg）插入到 DOM 中。工作流程如下所示：

• 通过创建 new Image() 并设置 src 字段来插入 img1.jpg。随后通过 document.insertBefore() 将图像节点添加到 DOM 中。
• 通过 XHR 获取 script.js 并通过对返回的数据调用 eval() 来运行它。

问题是，即使我在脚本之前创建了图像并设置了 src 字段，在发送图像的网络请求之前以及当我打印出资源计时，我看到script.js的requestStart在img1.jpg之前。有什么方法可以让我在发送对 JavaScript（或类似的高优先级资源，如 CSS）的网络请求之前获取图像（或与此相关的任何资源）？

如果问题不清楚，我们深表歉意。我刚刚加入了网站。

我在这里添加一些代码来突出我想要做的事情：

const fetchObj = function( url ) {
    console.log(`fetching ${url}`);
    result = {};
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            result = this.response;
        }
    };
    xhr.open("GET",url,false);
    xhr.send();
    return result;
}

const htmltonodes = function( markup ) {
    var template = document.createElement("template");
    template.innerHTML = markup;
    return template.content.childNodes;
}

const processAndInsertElement = function( value,index,array ) {
    var type,content;
    [type,content] = value
    if ( type == "htmlchunk" ) {
        var nodes = htmltonodes(content);
        for (var i = 0; i < nodes.length; i++) {
            document.body.appendChild(nodes[i]);
        }
    } else if ( type == "image" ) {
        document.body.innerHTML += content
    } else if ( type == "javascript" ) {
        var script = fetchObj(content);
        eval(script);
    }
}

schedule = [
            ["image",`<img src="./img/cat1.jpeg" width="500" height="auto" alt="a cute cat"></img>`],["javascript","./js/simple.js"]
            ];

schedule.forEach(processAndInsertElement);

总而言之，我在脚本之前添加图像。我希望添加到 html 中的图像元素会导致 cat1.jpeg 的网络提取立即完成，之后 fetchObj 将同步提取脚本并对其进行评估。但是，在 devtools 中，我看到脚本首先被加载（我看到它在性能选项卡上具有高优先级）并且图像在之后被获取并且具有低优先级。

我希望这能澄清问题并有助于在本地重现它。