一、不同位置的script标签执行顺序
整个加载的过程从解析头部开始,比如html编码格式,meta标签等。当浏览器加载html文件并解析到时,页面也就是并没有被解析,浏览器会等到中的js执行完再加载页面。
比如直接在head的script标签里面写$('#AD').css("display","none");
,解析完head就执行了。Id为AD的元素就不会在页面中显示。
head和头部引进的script脚本最先加载并执行,处于body中的元素是在页面加载到他的位置时候进行执行。而onload是最后执行的。
假如说你把DOM操作放在了标签里,你会发现报错,这是因为DOM树还没建立,getElementById获取的是undefined。所以说最好把
二、document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){})
和$(document).ready(function(){})
。这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。
而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。
Jquery里面$(document).ready
函数的内部结构:
document.ready = function (callback) {
///兼容FF,Google
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
}, false)
}
//兼容IE
else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (document.lastChild == document.body) {
callback();
}
}
为了提高性能需要注意加载顺序:
提高js性能的几个方面
1.</body>闭合标签之前,将所有的<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染
2.合并脚本。页面中的<script>标签越少,加载也就越快,响应也更快。无论外链文件还是内嵌脚本都是如此
3.有多种无阻塞下载js的方法
3.1使用<script>标签的defer属性
3.2使用动态创建的<script>元素来下载并执行代码
3.3使用XHR对象下载js代码并注入页面中
通过以上策略,可以极大提高那些需要使用大量js的web应用的实际性能