css 为什么会阻塞 dom 解析？

2019-11-10 15:11:13 +08:00
 sologgfun

现象就是

<html title="test">
<body>
  <script> 
    function printH2(){
        console.log('first script', document.querySelectorAll('h2')); 
        console.log('first script', document.querySelectorAll('img')); 
    }
    printH2();
    setTimeout(printH2);
  </script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0-alpha.4/dist/css/bootstrap.css">
  <h2>Hello</h2>
  <h2>World</h2>
  <script> console.log('second script'); </script>
</body>
</html>

为什么在 chrome 中，第二次打印的元素均为空，但是理论上 css 外链不应该影响 dom 解析，所以第二次打印应该有 nodeList 才对。（在 safari 中的表现和理论保持一致）

1822 次点击
所在节点    问与答
7 条回复
MuscleOf2016
2019-11-10 15:33:08 +08:00
看下浏览器渲染 dom 执行 css js 的循序就知道了。
rabbbit
2019-11-10 15:57:33 +08:00
body 内的 style 会阻止 dom 的解析,放到 head 里就没这个问题了
sologgfun
2019-11-10 16:29:31 +08:00
@MuscleOf2016 不好意思没懂，这个在哪看阿

@rabbbit 有什么理论依据吗，我没了解过 link 标签的位置会影响后续的解析方式，，，
wolfan
2019-11-10 16:39:05 +08:00
body>link 的解析好像是一次性的，所以二次的时候 link 没解析。
autoxbc
2019-11-10 18:25:33 +08:00
感觉是标准未定行为，依赖浏览器的实现，我这 3 种浏览器 3 种结果
autoxbc
2019-11-10 18:32:45 +08:00
而且因为 Chrome 在压榨性能上有些邪门的优化，其实有不少 bug
/t/600735
sologgfun
2019-11-10 19:38:05 +08:00
@autoxbc 有毒哈哈

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/618120

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX