DOM重新被解析

forTheLichKing
  • 246

当点击触发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>
回复
阅读 1.8k
3 个回答
✓ 已被采纳

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

toBeTheLight
  • 16.6k

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

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

说明:本来以为querySelectorAllgetElementsByClassName前者为静态接口,后者为动态接口,是动态接口引起的,测试发现不是。

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

四月的桜和猫
  • 3.2k

我目前也不知道是为什么但是感觉应该跟你写的那个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

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