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加载执行顺序的更多相关文章
- MySQL逻辑架构、SQL加载执行顺序、七种JOIN模式图解
逻辑架构 存储引擎 查看当前安装的mysql提供的存储引擎 查看当前mysql默认的存储引擎 MyISAM和InnoDB SQL加载执行顺序 sql书写顺序 mysql解析器执行的顺序 考点:m ...
- Javascript加载执行问题探索
转自:http://www.cnblogs.com/huangxincheng/archive/2011/12/04/2275988.html 前言 最近研究MongoDB数据库,无意间发现的好博客, ...
- js在html中的加载执行顺序
1.加载顺序:引入标记<script />的出现顺序,依次加载 页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记< ...
- js文件加载执行顺序
转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/j ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- html 和 javascript 的相关执行顺序
1.dom 树和 js 的加载顺序 http://blog.csdn.net/jdsxzhao/article/details/44646463 2. jquery中各个事件执行顺序如下: https ...
- js的并行加载与顺序执行
javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问 ...
- javascript加载顺序
javascript加载顺序 <script type="text/javascript" src="jquery.js"></script& ...
- 使用async属性异步加载执行JavaScript
HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的.比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现.而HTML5里给Ja ...
随机推荐
- pixi.js
添加基本文件(库文件) 渲染库 pixi.js pixi.lib.js是pixi.js的子集,依赖class.js,cat.js,event_emiter.js文件 pixi.scroller.js ...
- App内切换语言
前几天客户提需求,对App增加一个功能,这个功能目前市面上已经很常见,那就是应用内切换语言.啥意思,就是 英.中.法.德.日...语言随意切换. (本案例采用Data-Bingding模式,麻麻再也不 ...
- Angular简易分页设计(一)：基本功能实现
(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/p/6752990.html) 之前网站的后台管理为了图快,把Jquer ...
- ssh公钥认证原理及设置root外的其他用户登录ssh
1)创建其他用户 useradd [-d 登录目录] [-G ssh][用户名] 一定要将用户添加到ssh组不然无法没有权限登录ssh 2)设置ssh不允许root登录 vi /etc/ssh/ss ...
- web安全—浏览器的进制
浏览器的进制 字符的ascii码值可以转化为进制形式.可以用来绕过XSS filter. HTML属性值中的进制使用 .十进制使用a 表示,&#作为前缀,;作为后缀,后缀也可以没有. 如果要使 ...
- 运算符重载 与 sort()
运算符重载与sort() 二话不说上代码: #include <iostream> #include <algorithm> using namespace std; stru ...
- 转载 ~shell简介
Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...
- Facebook 宣布开源Python重写后的OnlineSchemaChange
本文会简要介绍,OnlineSchemaChange在经历从PHP到Python重写后的改进和变化 文章欢迎转载,但转载时请保留本段文字,并置于文章的顶部 作者:卢钧轶(cenalulu) 本文原文地 ...
- Kafka 源码剖析
1.概述 在对Kafka使用层面掌握后,进一步提升分析其源码是极有必要的.纵观Kafka源码工程结构,不算太复杂,代码量也不算大.分析研究其实现细节难度不算太大.今天笔者给大家分析的是其核心处理模块, ...
- Windows 随手笔记
1.常见快捷方式 远程桌面 mstsc 注册表 regedit 组策略 gpedit.msc 2.Windows命令手册 ping命令 ping [-t] [-a] [-n count] [-l le ...