浅析浏览器引擎对JQuery DOM加载和执行

摘要：

本文浅析浏览器引擎对jquery加载和执行的原理和分析

在研究jquery的加载原理，我们首页查看一下浏览器是如何加载页面的。

浏览器加载页面

首页我们写一个简单的html页面，进行测试，在chorme浏览器下使用的截图：

可以观察到浏览器对页面的加载顺序：

1. HTML页面 也就是DOM
2. js文件
3. css文件
4. 图片资源

有趣的是：无论js和css文件顺序怎么放，都是优先加载js文件，不知道为什么？这里请高手解释一下

何为HTML-DOM文件

官网定义是：HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

对于这个我的理解就是纯HTML标签语言，浏览器将HTML文档转化为DOM树并下载相关资源，这个优先加载。

各个浏览器对HTMLDOM加载情况：

1. IE 6/7 & Opera 按文档顺序解析，CSS并行加载，外部JS串行加载，阻塞 后续资源
2. IE 8/9• JS并行加载
3. Firefox & Chrome• 分析文档结构，优先并行加载css和js

关于浏览器解析和渲染一个比较好的PPT文档

JQUERY DOM加载

大家都知道js加载和执行的时候很容易造成浏览器阻塞，那么jquery的DOM为什么很高效呢？

官方手册对这种方法的解释：

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

 

下面我们做一个实验验证一下：

验证1：DOM加载方式放在head里和放在body外边是否有区别？

一个html页面ajax读取PHPapi数据，在api文件输出数据前我们故意先执行sleep(10),就是故意延迟10秒再把数据输出

先看效果图：

结论：无论jq程序放在页面的什么地方（在引入jq文件后面的所有位置），得到的效果都是一样的。

1. DOM执行
2. js css文件加载
3. jq程序执行api文件
4. 图片资源

如果引入两段jq程序，那么他们回依次执行，从上到下执行，都是在DOM加载完成后执行。

window.onload的加载和执行

先看一下效果图：

加载顺序：

1. DOM执行
2. js css文件加载
3. 图片资源
4. jq程序执行api文件（最后执行）

结论：window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素，就是把页面所有资源全部加载完成之后才执行js程序