现象就是
<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 中的表现和理论保持一致)
1
MuscleOf2016 2019-11-10 15:33:08 +08:00
看下浏览器渲染 dom 执行 css js 的循序就知道了。
|
2
rabbbit 2019-11-10 15:57:33 +08:00
body 内的 style 会阻止 dom 的解析,放到 head 里就没这个问题了
|
3
sologgfun OP |
4
wolfan 2019-11-10 16:39:05 +08:00
body>link 的解析好像是一次性的,所以二次的时候 link 没解析。
|
5
autoxbc 2019-11-10 18:25:33 +08:00
感觉是标准未定行为,依赖浏览器的实现,我这 3 种浏览器 3 种结果
|