首页 > 代码库 > Javascript加载执行顺序
Javascript加载执行顺序
本文主要内容
一、不同位置的script标签执行顺序
二、document.ready和window.onload的区别
一、不同位置的script标签执行顺序
整个加载的过程从解析头部开始，比如html编码格式，meta标签等。当浏览器加载html文件并解析到<head>时,页面也就是<body>并没有被解析,浏览器会等到<head>中的js执行完再加载页面。
比如直接在head的script标签里面写$(‘#AD‘).css("display","none");，解析完head就执行了。Id为AD的元素就不会在页面中显示。
head和头部引进的script脚本最先加载并执行，处于body中的元素是在页面加载到他的位置时候进行执行。而onload是最后执行的。
假如说你把DOM操作放在了<head>标签里，你会发现报错，这是因为DOM树还没建立，getElementById获取的是undefined。所以说最好把<script>放在</body>之前。
二、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(); } }
Javascript加载执行顺序
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。