个人笔记，仅供参考。

JS加载时间线，换句话讲可以理解为浏览器渲染页面时的时间流程。

1. 生成document对象，开始对web页面进行解析，此时document.readyState = "loading"；
2. 遇到link标签引入的外部css，开启新的线程异步加载（同时进行，谁都不妨碍谁），并继续解析文档；
3. 遇到script标签外部js，并且没有defer，async属性，浏览器加载，并阻塞页面（等待js加载并执行该脚本，妨碍到别个了），然后继续解析文档;
4. 遇到script外部js，并且有defer或者async属性，浏览器开启新的线程异步加载，并继续解析文档；如是async属性，加载完就立即执行；
5. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档；
6. 当文档解析完成，doucment.readyState = "interactive";
7. 当文档解析完成，所有设置有defer的脚本会按照顺序执行；
8. 当文档解析完成，触发document的DOMContentLoaded事件；
9. 当所有async的脚本加载完并执行后，img等加载完成后，此时document.readyState = "complete"，文档加载完毕，触发window.onload事件；

总结：

1. JS最好放在文档下面加载，不会阻塞页面的正常解析；
2. 工具类的JS 可以放在head里面，但要异步加载；
3. window.onload事件，是要等所有加载完成后才触发（如果有一张图片一直无法加载，就会一直等待）,效率最低，所以，最好是把主程序代码放到文档解析完成后开始执行：

// 监听dom解析完就执行的代码
document.addEventListener('DOMContentLoaded', function(){
//代码块
},false)