html载入js文件夹,html文件里引用js文件一般放在什么位置才是最适合？

题目：

放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？

A. 文件头部位置

B. 文件尾

C .

标签部分

D .

标签部分

想要知道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

Title

//1.外部引入js文件outer1.js

//2.内部head标签内代码段

console.log("(head无绑定加载事件) " + document.getElementById("image") + ", run at：" + (new Date().getTime() - startTime));

id="image" alt="落日原图">

//3.外部引入js文件outer2.js

//4.绑定window.onload的内部代码

window.onload = function () {

console.log("window.load! run at：" + (new Date().getTime() - startTime));

}

//5.内部body标签内代码段

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));

}

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)；不管是外部还是内部，一样会执行。