head中js文件的加载(下载)对于DOM构建的影响
2018-03-07 本文已影响61人
FConfidence
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./head_script.js"></script>
<meta name="test" content="123">
</head>
<body>
<h2>Test</h2>
</body>
</html>
- head_script.js
console.log('html: ',document.documentElement.innerHTML) // html
var liNode = document.createElement('li');
liNode.innerHTML = "li node"
document.head.appendChild(liNode)
console.log('head: ',document.head.innerHTML)
console.log('body: ',document.body)
for (var i = 0; i < 100000000; i++) {
}
setTimeout(function() {
console.log('-------------head srcipt-------------------')
console.log('html: ',document.documentElement.innerHTML)
console.log('head: ',document.head.innerHTML)
console.log('body: ', document.body.innerHTML)
}, 0)
-
运行结果
结果分析
- 结果分析
- dom构建的时候, 在碰到script的时候, 会等待js脚本的下载, 然后执行脚本完毕后, 继续构建dom操作
- 上述结果是在没有给脚本加上
defer或者async的情况下 - DOM构建完成的时候, 所有的脚本应该下载且执行了 (区分DOMContentLoaded, onload情况)
即 js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。
