问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

DOM重新被解析

头像
forTheLichKing
    246411

    当点击触发function a的时候，发现一开始控制台打印的是空，然后才是document文档
    如下图所示：
    clipboard.png

    clipboard.png

    clipboard.png

    发现浏览器重新解析了dom，我想问，在点击之前，dom不是已经被解析了吗，为什么当执行函数的时候，dom重新被解析和渲染？

    附上代码：

    //css
    <style>
        .box1{
            color:red;
            }
    </style>
//html
  <body>
　　　　<div class="box1" onclick="a()">啊啊啊啊啊啊啊啊啊啊啊</div>
    　　<div class="box1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    　　<div class="box1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    　　<div class="box1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>　　 
  </body>
//js
  <script type="text/javascript">
    function a(argument){
      console.log(document);
      var time = +new Date();
      while(true){
        if(+new Date()-time>3000){
          break;
        }
      }
    }
  </script>
    csshtml5htmljavascript
    阅读 2.5k
    3 个回答
    得票最新
    头像
    kstd123
      1.2k1621
      ✓ 已被采纳

      webkit内核对console.log()会延迟执行，惰性求值，换成alert就可以看到是立即显示dom的。
      参考链接

      头像
      toBeTheLight
        16.6k41634

        贴测试代码，和测试方法与原因猜测。

          <body>
　　　　<div class="box1">div div</div>
  </body>

  <script type="text/javascript">
    var doc = document.querySelectorAll('.box1')[0];
    //var doc = document.getElementsByClassName('box1')[0];
    console.log(doc,doc.innerHTML);
    doc.innerHTML = 'test';
    for(var a=0;a<4000;a++){
        console.log(1)
    }
  </script>

        测试方法：先注释掉 doc.innerHTML = 'test'，正常打开网页，打开控制台，去掉注释，刷新页面。

        结果：
        1.第一行：“ ，div div”;
        2.for循环开始输出‘1’;
        3.for循环未走完页面上div div变为‘test’;
        4.循环走完，第一行变为“div.box1，div div”;

        说明：本来以为querySelectorAll和getElementsByClassName前者为静态接口，后者为动态接口，是动态接口引起的，测试发现不是。

        猜测：可以看到js未走完没有正确输出“div.box1，div div”，所以猜测与异步有关，可能是控制台的数据显示是异步或者选择器有相关的异步模块？但是控制台为正常输出时，页面内容已经发生了变化，说明正确dom在js未走完时已经被正确查找了。所以猜测可能是浏览器多线程和模块引起的。如果能找到相关资料再来补充。

        头像
        四月的桜和猫
          3.3k53055

          我目前也不知道是为什么但是感觉应该跟你写的那个while有关
          我试了一下：

          console.log(document);
 function a(argument){
      console.log(document);
      var time = +new Date();
      while(true){
        if(+new Date()-time>3000){
          break;
        }
      }
    }

          我打印了一下document在 function之前
          打印出来是渲染好的document

          clipboard.png

          然后在点击 会空一下再出来document

          clipboard.png

          然后我将代码改了

          console.log(document);
 function a(argument){
      console.log(document);
      // var time = +new Date();
      // while(true){
      //   if(+new Date()-time>3000){
      //     break;
      //   }
      // }
      var a=1;
      console.log(a++);
    }

          这次后两个是直接出来的

          clipboard.png

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题