DOM加载和Javascript的加载与执⾏顺序
DOM 简介
DOM 是 Document Object Model(⽂档对象模型)的缩写。HTML 的构成就是DOM,⽹页就是⼀个⽂档,是⼀个有结构的⽂档。HTML DOM 定义了访问和操作 HTML ⽂档的标准⽅法。DOM 将 HTML ⽂档表达为树结构。HTML DOM 树如下:
每个元素都可与看做⼀个对象,每个对象都叫做⼀个节点(node)
浏览器的渲染步骤:
1、解析HTML
2、加载外部脚本和样式表
3、脚本在⽂档内解析并执⾏如何下载javascript
4、构造HTML DOM模型
5、加载图⽚以及外部内容
6、⽹页加载完毕
因此,外部 js 会在 DOM 构造之前执⾏,那么显然外部 js 也⽆法访问 DOM ⽂档模型。所以⼀般把可执⾏的脚本放在页⾯初始化时间处理函数中。这样的话就能确保⽂档加载完毕再执⾏脚本。
JS 加载与执⾏顺序
对于⼀个HTML⽂档,浏览器的解析顺序为:按照⽂档流,从上到下逐步解析页⾯的结构。JavaScript代码作为通过标签嵌⼊或引⼊的脚本,也HTML⽂档的组成部分。因此,JavaScript代码在装载时的执⾏顺序也是根据脚本标签<script>的出现顺序来确定的。
但是,浏览器加载JavaScript时有个特点,那就是载⼊之后⽴即就会执⾏(先编译后执⾏),因为Jav
aScript可能会影响DOM树的结构,所以浏览器在执⾏完后才能继续加载下⾯的HTML内容。也就是说,浏览器下载并执⾏JavaScript的过程会阻塞DOM树的继续建⽴。所以,引⼊的多个js⽂件,会按顺序分开执⾏。同样的,对于不同<script>标签嵌⼊的JavaScript代码,也会分开执⾏。同⼀组<script>标签包括的代码就是⼀个代码块。后引⼊的JavaScript⽂件可以调⽤先引⼊的JavaScript⽂件的资源,下⾯的代码块可以访问上⾯代码块的资源,反之则不⾏。
由于JavaScript通常需要操作DOM,所以,⼀般把JavaScript放在</body>前或者⽂档结尾处引⼊。若需要在<head>中引⼊,可以通过修改load或者ady事件,强制等到DOM加载完成后再执⾏相关函数。
参考⽂档
1.
2.
3.
4.

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。