javascript – 为什么放置一个空的src属性比不放任何更快?

我在本地使用Bootstrap,jQuery和
HTML.当您点击某个按钮时,您会收到一个数据网址,该网址会被放入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>

最佳答案 设置src并不重要,当你单击按钮时,它会设置src值或同时创建src属性及其值的DOM.

HTML以程序方式(从上到下)渲染/填充它的所有DOM,因此第一个加载第一个,然后是第二个加载.等等.

点赞