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

• 题目：
  放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？
  A. 文件头部位置
  B. 文件尾
  C .标签部分
  D .标签部分

想要知道js文件在html中的加载解析执行情况？首先必须要先清晰了解——DOM文档加载步骤

DOM文档加载步骤：

1. 解析html结构；
2. 加载外部脚本和样式表文件；
3. 解析并执行脚本；
4. dom树构建完成（触发DOMContentLoaded和 jquery ready事件）；
5. 加载图片等外部文件；（会触发图片load事件）
6. 页面加载完毕。（触发load事件）

注意：凡是没有绑定加载事件(如：window.onload、$(document).ready())的js文件中的代码，在本文件（代码）加载完成后立即解析执行。

js可以由于内外部、是否由绑定加载事件（如：load、ready）触发执行、在html文档中的位置，分为多种情况。而且执行运行情况又不一样。所以有必要了解。

不同类js代码解析运行区别：

1504256859(1).jpg

栗子

• index.html

    
    

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

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



    

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

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

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

• 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