Why is it faster to set an empty src attribute than not to put it?

Question

I work locally with Bootstrap, jQuery and HTML. When you click the button button, you get the URL of the data that fits in the iframe video. If you put an empty one src="", it will be much faster than not placing anything. Why is this? Apparently, that doesn't seem to matter.

Example:

<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>

Answer 1

It does not matter for the parameter src, when you click the button, it sets the value srcor creates an attribute srcwith its value for it DOM at the same time.

HTML / DOM ( ), , ..