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

css 为什么会阻塞 dom 解析?

  •  
  •   sologgfun · 32 天前 · 994 次点击
    这是一个创建于 32 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现象就是

    <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
        1
    MuscleOf2016   32 天前
    看下浏览器渲染 dom 执行 css js 的循序就知道了。
        2
    rabbbit   32 天前
    body 内的 style 会阻止 dom 的解析,放到 head 里就没这个问题了
        3
    sologgfun   32 天前
    @MuscleOf2016 不好意思没懂,这个在哪看阿

    @rabbbit 有什么理论依据吗,我没了解过 link 标签的位置会影响后续的解析方式,,,
        4
    wolfan   32 天前
    body>link 的解析好像是一次性的,所以二次的时候 link 没解析。
        5
    autoxbc   32 天前
    感觉是标准未定行为,依赖浏览器的实现,我这 3 种浏览器 3 种结果
        6
    autoxbc   32 天前
    而且因为 Chrome 在压榨性能上有些邪门的优化,其实有不少 bug
    /t/600735
        7
    sologgfun   32 天前
    @autoxbc 有毒哈哈
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2230 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 29ms · UTC 15:50 · PVG 23:50 · LAX 07:50 · JFK 10:50
    ♥ Do have faith in what you're doing.