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 ...
随机推荐
- zepto.js介绍
是一个阉割版的jQuery zepto不支持jQuery过于复杂的选择器,比如:first :last :eq zepto如果要用动画必须再次引包 zepto能将css3中transition支持的动 ...
- 原生ajax实现http请求
1⃣️先简单了解一下HTTP协议: http是计算机通过网络进行通信的一种规则,它是一种无状态协议(不建立持久链接,直白点儿说就是请求响应完事儿之后,链接就断开) 2⃣️一个完整的http请求有 ...
- 「7天自制PHP框架」第一天：路由与控制器
我们为什么要使用路由? 原因1:一个更漂亮的URI 1.URI的改进 刚刚开始学PHP时,我们一定写过blog.php?id=1之类的URI,使用GET方式获取参数.这样的URI有两个缺点,一是容易被 ...
- js判断字符串是否全为空(使用trim函数/正则表达式)
我们需要判断用户输入的是否全是空格,可以使用以下方法: 方法一: 使用trim() /* 使用String.trim()函数,来判断字符串是否全为空*/ function kongge1(test) ...
- HTML5 拖放（Drag 和 Drop）功能开发——浅谈dataTransfer对象
[前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...
- 玩玩kafka1 单机安装
今天主要来一遍kafka单机版的安装,比较简单易上手,关于kafka的介绍我就不贴了,大家可以自行搜索 1.首先将tgz包传到centos目录下(这里使用xftp工具) ok后查看一下tgz包是否已经 ...
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- IOS的UITableView
UITableView 概述 UITableView 一般用来展示表格数据.可以滚动(继承自UIScrollView).性能极佳 UITableView分两种样式: Plain,不分组的样式 Grou ...
- ThinkPHP5.0中Redis的使用和封装(原创)
Redis是一种常用的非关系型数据库,主要用作数据缓存,数据保存形式为key-value,键值相互映射.它的数据存储跟MySQL不同,它数据存储在内存之中,所以数据读取相对而言很快,用来做高并发非常不 ...
- Trie树详解
1. 概述 Trie树,又称字典树,单词查找树或者前缀树,是一种用于快速检索的多叉树结构,如英文字母的字典树是一个26叉树,数字的字典树是一个10叉树.Trie一词来自retrieve,发音为/tri ...