V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
sologgfun
V2EX  ›  问与答

css 为什么会阻塞 dom 解析?

  •  
  •   sologgfun · 2019-11-10 15:11:13 +08:00 · 1806 次点击
    这是一个创建于 1600 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现象就是

    <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/[email protected]/dist/css/bootstrap.css">
      <h2>Hello</h2>
      <h2>World</h2>
      <script> console.log('second script'); </script>
    </body>
    </html>
    

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

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

    @rabbbit 有什么理论依据吗,我没了解过 link 标签的位置会影响后续的解析方式,,,
    wolfan
        4
    wolfan  
       2019-11-10 16:39:05 +08:00
    body>link 的解析好像是一次性的,所以二次的时候 link 没解析。
    autoxbc
        5
    autoxbc  
       2019-11-10 18:25:33 +08:00
    感觉是标准未定行为,依赖浏览器的实现,我这 3 种浏览器 3 种结果
    autoxbc
        6
    autoxbc  
       2019-11-10 18:32:45 +08:00
    而且因为 Chrome 在压榨性能上有些邪门的优化,其实有不少 bug
    /t/600735
    sologgfun
        7
    sologgfun  
    OP
       2019-11-10 19:38:05 +08:00
    @autoxbc 有毒哈哈
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3172 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:19 · PVG 20:19 · LAX 05:19 · JFK 08:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.