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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

y0umer 2012-02-17 15:48:00 浏览615
展开阅读全文

摘要:

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

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

 

浏览器加载页面

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

页面加载

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

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

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

何为HTML-DOM文件

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

PHP10086博客网

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

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

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

 

  1. 关于浏览器解析和渲染一个比较好的PPT文档
浅析浏览器解析和渲染
View more PowerPoint from Ailsa126

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秒再把数据输出

先看效果图:

PHP10086博客网

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

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

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

 

window.onload的加载和执行

先看一下效果图:

PHP10086博客网

加载顺序

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

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


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

网友评论

登录后评论
0/500
评论
y0umer
+ 关注