摘要:
本文浅析浏览器引擎对jquery加载和执行的原理和分析
在研究jquery的加载原理,我们首页查看一下浏览器是如何加载页面的。
浏览器加载页面
首页我们写一个简单的html页面,进行测试,在chorme浏览器下使用的截图:
可以观察到浏览器对页面的加载顺序:
- HTML页面 也就是DOM
- js文件
- css文件
- 图片资源
有趣的是:无论js和css文件顺序怎么放,都是优先加载js文件,不知道为什么?这里请高手解释一下
何为HTML-DOM文件
官网定义是:HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
对于这个我的理解就是纯HTML标签语言,浏览器将HTML文档转化为DOM树并下载相关资源,这个优先加载。
各个浏览器对HTMLDOM加载情况:
- IE 6/7 & Opera 按文档顺序解析,CSS并行加载,外部JS串行加载,阻塞 后续资源
- IE 8/9• JS并行加载
- Firefox & Chrome• 分析文档结构,优先并行加载css和js
- 关于浏览器解析和渲染一个比较好的PPT文档
JQUERY DOM加载
大家都知道js加载和执行的时候很容易造成浏览器阻塞,那么jquery的DOM为什么很高效呢?
1 |
$(document).ready( function (){
|
2 |
// 在这里写你的代码...
|
3 |
}); |
官方手册对这种方法的解释:
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
下面我们做一个实验验证一下:
验证1:DOM加载方式放在head里和放在body外边是否有区别?
一个html页面ajax读取PHPapi数据,在api文件输出数据前我们故意先执行sleep(10),就是故意延迟10秒再把数据输出
先看效果图:
结论:无论jq程序放在页面的什么地方(在引入jq文件后面的所有位置),得到的效果都是一样的。
- DOM执行
- js css文件加载
- jq程序执行api文件
- 图片资源
如果引入两段jq程序,那么他们回依次执行,从上到下执行,都是在DOM加载完成后执行。
window.onload的加载和执行
先看一下效果图:
加载顺序:
- DOM执行
- js css文件加载
- 图片资源
- jq程序执行api文件(最后执行)
结论:window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript此时才可以访问网页中的任何元素,就是把页面所有资源全部加载完成之后才执行js程序
转载自: http://www.cnblogs.com/y0umer/archive/2012/02/17/2809467.html
相关推荐
各浏览器加载策略,ie6/7/8/9,firefox,chrom.同步模型,JS阻塞,JS执行策略 ,Inline Script,阻塞渲染,浏览器的优化
浅析JQuery框架及其插件应用,欢迎交流。
浅析搜索引擎原理及使用技巧浅析搜索引擎原理及使用技巧
2.)HTML编码/解码 3.)HTML字符实体 4.)JavaScript编码/解码 2.测试对href进行编码操作后,"Test"能否被点击 2.测试对hr
动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会 在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有...
vue异步更新dom的实现浅析 目录 Vue异步更新DOM的原理1 什么时候能获取到真正的DOM元素?2 为什么Vue需要通过nextTick方法才能获取最新的DOM?3 为什么this.$nextTick 能够获取更新后的DOM?总结:vue异步更新的...
simple_html_dom插件用dom处理html文件的利器使用:加载simple_html_dom.php文件复制代码 代码如下:require_once ‘simple_html_dom.php’new simple_html_dom对象复制代码 代码如下:$dom = new simple_html_dom()...
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式,也是是搜索引擎营销的主要方式, 是指通过对网站的调整,使其符合搜索引擎的要求,从而在搜索引擎中获得较好排名的策略
浅析MYSQL数据库C/S浏览器设计.pdf
于是看了jquery的源码,jquery用的选择器的引擎是sizzle,是jquery的作者另一开源项目,在github上面有,号称最快的dom选择器!不到2000行代码。上面说了不是很精彩的开场白,我么来个 for example: $(‘.test’) 在...
下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
百度文库找到PPT文件,花了20财富下载下来,坑爹啊,太贵了。不过好东西也值了。
马晓槟-浅析分散加载,对单片机开发进阶很有帮助,分散加载变量、函数和代码。更好地理解编译原理和链接。
当Jquery Mobile开始执行时,他就会在document对象上触发mobileinit 事件,因为mobileinit事件是在加载后马上触发,所以你需要在Jquery Mobile加载之前绑定你的事件处理函数,所以我建议你如下安排你的js引用顺序 ...
JavaScript+Jquery浅析PPT资源
浅析frmware的加载和init通过netlink处理uevent事件的一般流程
浅析http协议、cookies和session机制、浏览器缓存.docx
这些教程非常细致的分析了jQuery内部原理和实现方式,对学习和理解jQuery有非常大的帮助。但是个人认为很多教程对jQuery的整体结果把握不足,本人试图从整体来阐述一下jQuery的内部实现。 大家知道,调用jQuery有两...
浅析JavaScript的安全性和执行效率.pdf