Javascript 为什么放置空的src属性比不放置任何属性要快？

我在本地使用Bootstrap、jQuery和HTML。当您点击

按钮时

会得到一个数据url，该url会被放入iframe视频中。如果你放一个空的

src=“

，它比不放任何东西要快得多。为什么呢？显然这看起来没什么关系

例如：

<script>
var youtube = "https://www.youtube.com/embed/"
    $("button[data-url]").click(function() {
      var code = $(this).data("url")
      var video = youtube + code
      $("iframe").attr("src", video)
    })
</script>

<button type="button" data-url="WhateverCode1">Video 1</button>
<button type="button" data-url="WhateverCode2">Video 2</button>

<!--With src="" is so much faster -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src=""></iframe>
</div>

<!-- Than no src -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item"></iframe>
</div>

var=”https://www.youtube.com/embed/"
$（“按钮[数据url]”）。单击（函数（）{
var代码=$（此）.data（“url”）
var video=youtube+代码
$（“iframe”）.attr（“src”，视频）
})
视频1
视频2

设置

src

并不重要，当您单击按钮时，它会设置

src

值，或者同时创建

src

属性，并将其值添加到其DOM中

---

HTML以程序化的方式（从上到下）呈现/填充所有DOM，因此首先加载第一个DOM，然后加载第二个DOM，依此类推。

您是否对差异进行了基准测试？因为在第一种情况下，您为属性赋值，而在第二种情况下，您试图为一个不存在的属性分配一个值，因此需要先创建该属性，然后才能为其分配一个值。我看不出在Chrome上有任何区别，您使用的哪个浏览器显示了该行为？您是否安装了第三方插件/扩展/主题，是否尝试禁用所有（出厂默认值）？某些主题和插件可以极大地改变浏览器的行为和性能，这可能使您的问题对您的环境具有独特性。“这么多”是多少？