网页打开时代码的执行顺序

Javascript代码按照他们在网页源代码中出现的顺序执行,这个顺序不因为JS文件的加载速度的不同而改变。比如:网页中通过src的方式引用了多个JS,

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>

则他们必定是按照1,2,3,4的顺序依次执行。如果其中1.js加载用时5秒钟,而2、3、4都是瞬间加载,那么2、3、4文件先被下载但不会执行,等1加载成功后再按照1,2,3,4的顺序依次执行。不必担心1会晚于2、3、4执行,因为网络问题,1有可能加载失败。也就是说1要么不加载,要么第1个加载。

如果某个JS加载慢,而且对后面的JS没有影响的话,为了不影响整个页面的速度可以通过defer="defer"参数延迟加载,但不是所有浏览器支持。

<script src="1.js" defer="defer"></script>

HTML5中为script新增了一个属性:async,如果他被设置为true的话,效果和defer一样。

网页的加载完成这个短暂的过程中有个onload事件,如果一段代码要在页面加载完成后执行,可以这样写:

window.onload = function() {
//test
}

这个事件在页面所有元素都载入完毕时触发,但有时我们不需要等待所有图片的加载完成,而希望更早在DOM模型构造好之后就执行,这就需要使用浏览器的其他事件(IE下是readystatechange事件、非IE下是DOMContentLoaded事件),常用的jQuery框架把不同浏览器的事件进行了封装:

$(document).ready(function(){
//test
});

 评论
 发表评论
姓   名: