题目:
放在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);不管是外部还是内部,一样会执行。