JavaScript相关,为什么执行结果会多一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div {
        width: 100px;
        height: 20px;
        float: left;
        margin-right: 20px;
      }
    </style>
</head>
<body>
<div id="div1" class="div5">
  <div id="div11" class="div5"></div>
  <div id="div12" class="div5"></div>
  <div id="div13" class="div5"></div>
  <div id="div14" class="div5"></div>
  <div id="div15" class="div5"></div>
</div>
<div id="div2" class="div4">
  <div id="div21" class="div4"></div>
  <div id="div22" class="div4"></div>
  <div id="div23" class="div4"></div>
  <div id="div24" class="div4"></div>
  <div id="div25" class="div4"></div>
</div>
<div id="div3" class="div3">
  <div id="div31" class="div3"></div>
  <div id="div32" class="div3"></div>
  <div id="div33" class="div3"></div>
  <div id="div34" class="div3"></div>
  <div id="div35" class="div3"></div>
</div>
<div id="div4" class="div2">
  <div id="div41" class="div2"></div>
  <div id="div42" class="div2"></div>
  <div id="div43" class="div2"></div>
  <div id="div44" class="div2"></div>
  <div id="div45" class="div2"></div>
</div>
<div id="div5" class="div1">
  <div id="div51" class="div1"></div>
  <div id="div52" class="div1"></div>
  <div id="div53" class="div1"></div>
  <div id="div54" class="div1"></div>
  <div id="div55" class="div1"></div>
</div>
</body>
  <script>
    var tag = document.querySelector("div");
    var id = tag.getAttribute("id");
    var tag_name = tag.tagName;
    setTimeout(function () {
      document.write("最顶层" , tag_name , "元素的id为: " , id, "<br/>");
      function print(element) {
        function children_list(element) {
          return element.children;
        }
        requestAnimationFrame(function () {
          document.write("<br/>id为" , element.id , "的" , tag_name , "的元素子元素id列表为:<br/>");
          var child = children_list(element);
          for (var i = 0 , j = child.length ; i < j ; i++) {
            document.write(child[i].id , " ");
          }
        })
      }
      do {
        print(tag);
        tag = tag.nextElementSibling;
      }while (tag !== null);
    } , 2000);
  </script>
</html>

img

执行结果会多一次,这是为什么

do while 循环至少执行一次，即便条件为 false，因为代码块是在条件语句判断前执行