DOM 简介
DOM 是 Document Object Model（文档对象模型）的缩写。HTML 的构成就是DOM，网页就是一个文档，是一个有结构的文档。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。HTML DOM 树如下：
每个元素都可与看做一个对象，每个对象都叫做一个节点（node）
浏览器的渲染步骤：
1、解析HTML
2、加载外部脚本和样式表
3、脚本在文档内解析并执行
4、构造HTML DOM模型
5、加载图片以及外部内容
6、网页加载完毕
因此，外部 js 会在 DOM 构造之前执行，那么显然外部 js 也无法访问 DOM 文档模型。所以一般把可执行的脚本放在页面初始化时间处理函数中。这样的话就能确保文档加载完毕再执行脚本。
JS 加载与执行顺序
对于一个HTML文档，浏览器的解析顺序为：按照文档流，从上到下逐步解析页面的结构。JavaScript代码作为通过标签嵌入或引入的脚本，也HTML文档的组成部分。因此，JavaScript代码在装载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的。
但是，浏览器加载JavaScript时有个特点，那就是载入之后立即就会执行（先编译后执行），因为JavaScript可能会影响DOM树的结构，所以浏览器在执行完后才能继续加载下面的HTML内容。也就是说，浏览器下载并执行JavaScript的过程会阻塞DOM树的继续建立。所以，引入的多个js文件，会按顺序分开执行。同样的，对于不同<script>标签嵌入的JavaScript代码，也会分开执行。同一组<script>标签包括的代码就是一个代码块。后引入的JavaScript文件可以调用先引入的JavaScript文件的资源，下面的代码块可以访问上面代码块的资源，反之则不行。
由于JavaScript通常需要操作DOM，所以，一般把JavaScript放在</body>前或者文档结尾处引入。若需要在<head>中引入，可以通过修改window.onload或者document.ready事件，强制等到DOM加载完成后再执行相关函数。
谈谈 <script> 标签以及其加载顺序问题，包含 defer & async
参考文档
1322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
