关于脚本的运行顺序讲解

基本的顺序是当浏览器遇到<script> 标签时,则停止文档解析,并且,立即下载和执行脚本,脚本执行完毕后再继续解析文档。

如果我们用到defer, 浏览器遇到script 标签时,不会停止文档解析,其他线程将下载脚本,等文档解析完毕,脚本才会执行。

如果我们 用到async, 浏览器遇到script 标签时, 不会停止文档解析,同时其他线程将下载脚本,脚本下载完成后将开始执行,当脚本开始执行时,文档将停止解析,直到脚本执行完毕。

注意: async对于内联脚本没有用。

Defer的脚本是按照声明顺序执行的,而async的脚本不同,只要脚本下载完成,就会立即执行,未必会按照声明顺序执行。

如果同时使用async 和defer, 则会默认优先使用async。

写法例子:

 

script1

因此,如果载入多个js文件,浏览器将按照顺序依次载入并且依次执行。

可能会碰到的问题:

如果js 中,会对HTML 文档的DOM树进行操作,并且<script>放在了<head>标签里面,那么肯定会出现问题,js将找不到DOM树的对象。因为js文件的载入阻塞了DOM树的生成,所以js已经在运行,但是DOM树对象还没有生成。因此,很多页面都是把JS文件放在页面尾部再调用;或者,将JS代码放在script标签里,同样放在页面尾部; 再或者, 使用defer; 如果你用的是jQuery, 可以使用document.load.

具体方法可参考这篇文章:

JAVASCRIPT 装载和执行

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s