Javascript 在DOM中更新图像最有效的方法是什么？

最近一段时间我一直在思考这个话题，我一直在思考与替换/更新图像相关的DOM更新的效率。我还没有找到一个具体的讨论，我甚至不确定是否有一个理想的解决方案之间的两个选项，我将在下面展示

我得出的最佳答案是，这完全取决于您是否需要更新

上的其他属性，还是只使用新图像更新现有的
值

我使用的示例是小图像，性能会受到图像大小或其他因素的影响

我有两种方法：

$('.swapimage_ele').on("click", function(evt){
    var img1 = $("#img1").html();
    var img2 = $("#img2").html();

    $("#img1").html(img2);
    $("#img2").html(img1);
});

$('.swapimage_src').on("click", function(evt){
    var img1 = $("#img1 img").attr("src");
    var img2 = $("#img2 img").attr("src");

    $("#img1 img").attr("src", img2);
    $("#img2 img").attr("src", img1);
});

​
下面是我编写的显示这两个选项的快速工作示例：

只是好奇每个人的意见或偏好，以及是否有一种理想的方法来做到这一点。
为一个移动项目做了一些实验，涉及极高分辨率的图像并交换它们

交换src比创建新元素更快

但是，另一种选择是将两个图像层叠在一起，并更改z索引以交换哪一个是可见的。（或者在屏幕外放置一个图像并交换它们的位置）如果您希望能够将其与任何动态图像交换，或者如果您要在多个图像之间交换，则此操作不起作用。
减少jQuery，并且绝对不要使用
.html（）

或者，如果您必须支持IE6/7：

$('.swapimage_src').on("click", function(evt){
    var img1 = document.getElementById("img1").getElementsByTagName("img")[0];
    var img2 = document.getElementById("img2").getElementsByTagName("img")[0];

    var temp = img1.src;
    img1.src = img2.src;
    img2.src = temp;
});

使用更新的src完全替换元素，还是仅使用新映像更新现有的src值更好

创建元素的成本将高于更改属性的成本。尤其是通过
innerHTML
完成，就像在代码中一样。但是，您不需要更改任何内容，只需从DOM中获取元素并更改其位置即可：

$('#swapimage_dom').on("click", function(e){
    var img1 = $("#img1"),
        img2 = $("#img2");
    var imgEl = img1.find("img");
    img2.find("img").appendTo(img1);
    imgEl.appendTo(img2);
});

我使用的示例是小图像，性能会受到图像大小或其他因素的影响

DOM操作很便宜。您不会注意到这些方法之间的任何差异，这是可以忽略不计的。回流过程可能有点不同，应该足够快，不会引起注意

然而，重新绘制-这与DOM操作具有相同的结果相同-是一项需要内存和时间的任务。当然，这会随着图像大小的增加而增加。但是你无法回避这个问题。
到目前为止，你的测试揭示了什么？我已经根据回复中提供的解决方案进行了一些测试，将图像src与vanilla JS切换是最有效的解决方案。在看到这些测试运行后，我想这肯定会让我明白为什么@IHateLazy的解决方案效果最好。谢谢
$('#swapimage_dom').on("click", function(e){
    var img1 = $("#img1"),
        img2 = $("#img2");
    var imgEl = img1.find("img");
    img2.find("img").appendTo(img1);
    imgEl.appendTo(img2);
});