浅析浏览器引擎对JQuery DOM加载和执行
摘要：
本文浅析浏览器引擎对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程序
本文链接: 浅析浏览器引擎对JQuery DOM加载和执行
联系作者: PHP淮北,交流QQ群：群1：153856687,群2：198110186
版权所有: 非特殊声明均为本站原创文章，转载请注明出处：PHP10086博客网
订阅更新: 欢迎通过RSS订阅我们的内容更新
