html文件里引用js文件一般放在什么位置才是最适合？
2017-09-01 本文已影响0人
梁海杰_IRV
- 题目：
放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？
A. 文件头部位置
B. 文件尾
C .<head>标签部分
D .<body>标签部分
想要知道js文件在html中的加载解析执行情况？首先必须要先清晰了解——DOM文档加载步骤
DOM文档加载步骤：
- 解析html结构；
- 加载外部脚本和样式表文件；
- 解析并执行脚本；
- dom树构建完成（触发DOMContentLoaded和 jquery ready事件）；
- 加载图片等外部文件；（会触发图片load事件）
- 页面加载完毕。（触发load事件）
注意：凡是没有绑定加载事件(如：window.onload、$(document).ready())的js文件中的代码，在本文件（代码）加载完成后立即解析执行。
js可以由于内外部、是否由绑定加载事件（如：load、ready）触发执行、在html文档中的位置，分为多种情况。而且执行运行情况又不一样。所以有必要了解。
不同类js代码解析运行区别：
1504256859(1).jpg
栗子
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//1.外部引入js文件outer1.js
<script src="js/outer1.js"></script>
//2.内部head标签内代码段
<script type="text/javascript">
console.log("(head无绑定加载事件) " + document.getElementById("image") + ", run at：" + (new Date().getTime() - startTime));
</script>
</head>
<body>
<img src="http://pic1.win4000.com/wallpaper/4/5546eae50c041.jpg"
id="image" alt="落日原图">
//3.外部引入js文件outer2.js
<script src="js/outer2.js"></script>
//4.绑定window.onload的内部代码
<script type=text/javascript>
window.onload = function () {
console.log("window.load! run at：" + (new Date().getTime() - startTime));
}
</script>
//5.内部body标签内代码段
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOMContentLoaded：DOM fully loaded and parsed， run at ：" + (new Date().getTime() - startTime));
});
console.log("inner js(body无绑定加载事件), run at：" + (new Date().getTime() - startTime));
console.log("(inner body无绑定加载事件)" + document.getElementById("image") + " run at：" + (new Date().getTime() - startTime));
document.getElementById("image").onload = function () {
console.log("img loaded (body绑定图片加载事件), loaded at：" + (new Date().getTime() - startTime));
}
</script>
</body>
</html>
- outer1.js
//outer1.js
//引入位置：head中
var startTime = new Date().getTime(); //为后面记录代码开始执行时间提供标准
console.log("outer1 js (head)! run at(ms)：" + (new Date().getTime() - startTime));
- outer2.js
//outer2.js
//引入位置： body后
console.log("outer2 js (body)! run at：" + (new Date().getTime() - startTime));
- 运行结果
result.png
- 分析：
首先，每个语句后面时间以ms为单位。此时间是，以outer1.js中var startTime = new Date().getTime();语句执行时作为0时刻（起始时间）来区别其他js输出语句执行时间。
然后，特地选较大的图片，更明显看出
再次，通过控制台查看各文件加载情况：好像除了index.html页面最先加载之外，其他外部css、js文件的随机加载解析，并没有一定顺序。取决于进入加载队列的时间。
1504257209(1).jpg 上述js代码无绑定加载事件时，本人猜测是在步骤4才执行，因为DOM TREE构建完成，理由在下面例子中js语句
console.log(document.getElementById("image"))和console.log("DOMContentLoaded：DOM fully loaded and parsed....)两者打印时间判断，但是又觉得不大合理。求大神告知，为何DOMContentLoaded反而后执行？
小结：
题目有误，除非特地指明“页面加载的时候”指的仅仅是加载body部分（但我觉得这个理解不OK）。不然的话，head里面的js代码段只要没绑定了load、ready等事件，在DOM文档加载过程中都会加载、解析、执行。如上例，不管是head（代码段1,2），还是body（代码段3,5）；不管是外部还是内部，一样会执行。
分享三篇相关文章：
jQuery $(document).ready()和JavaScript onload事件
DOMContentLoaded
jQuery DOM Ready
