摘要:
本文浅析浏览器引擎对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
相关推荐
2. **DOM操作简便**:通过简洁的语法,JQuery使得DOM元素的选择、创建、删除和操作变得异常简单。例如,只需一行代码即可选取页面上的所有段落元素:`$("p")`。 3. **事件处理**:JQuery提供了丰富而灵活的事件处理...
这意味着即使是在资源受限的环境中也可以轻松加载和使用jQuery。此外,jQuery与其他JavaScript库(如AngularJS、React等)的兼容性良好,可以方便地与其他框架一起使用。 #### 理由七:简化Ajax开发 jQuery通过`$....
通过使用jQuery,开发者能够更简单地执行在多种浏览器中的DOM操作,以及创建丰富的用户交互效果。 作用方面,以下是jQuery几个主要作用的详细介绍: 1. 操作页面对象:jQuery提供了一套简单且直观的方法来选取和...
JavaScript预加载和延迟加载是两种优化网页性能的重要技术,它们主要针对JavaScript文件和资源的管理,以提升用户体验和页面加载速度。预加载是为了尽早获取所需资源,而延迟加载则是在需要时才开始加载,以此平衡...
这种方式确保了脚本的执行顺序,适用于那些不依赖DOM,但在DOM加载完成后需要执行的脚本。需要注意的是,不是所有浏览器都支持`defer`属性,对于不支持的浏览器,需要借助如jQuery的`$(document).ready()`来确保脚本...
通过这种方式,你可以优化用户体验,只在用户接近或达到页面底部时加载更多数据,减少一次性加载大量内容对网络带宽和浏览器性能的影响。在实际项目中,可以结合API请求、数据缓存等策略来进一步完善这个功能。
本文将深入浅析ASP.NET的核心概念和技术,帮助初学者掌握这一强大的开发平台。 1. **基础概念** - **Web Forms**: ASP.NET Web Forms提供了一种通过拖放控件来构建网页的方式,类似于传统的Windows编程模型。 - *...
在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作,包括对复选框(checkbox)的处理。本文将深入探讨 jQuery 与 HTML 复选框的 `checked` 属性之间可能遇到的问题及其解决方案。 1. **页面...
1. **执行时机**:`$(function)`(`document.ready`)在DOM准备就绪时执行,而`onload`在所有资源(包括图像和脚本)加载完成后执行。 2. **可绑定次数**:`$(function)`可以被多次调用并执行,而`onload`事件只能有...
在jQuery库中,`trigger`方法是一个非常实用的工具,它允许开发者在DOM元素上模拟各种事件,使得代码更加简洁高效。本文将深入探讨`trigger`方法的核心功能、常见用法以及如何与其他jQuery方法结合使用。 `trigger`...
Vue的生命周期与浏览器渲染过程紧密相关,`beforeCreate` 和 `created` 阶段对应于DOM树构建之前,`mounted` 则发生在DOM渲染之后。 在实际开发中,了解Vue组件的生命周期以及其与浏览器渲染的关系至关重要,这有助...
AJAX(异步JavaScript和XML)是一种技术手段,允许网页在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,...
在JavaScript和jQuery中,`return false`是一个常见的用法,特别是在事件处理程序中,用于防止浏览器执行默认行为。然而,它的使用常常被误解,可能导致潜在的问题。本文将深入探讨何时以及如何正确地阻止浏览器的...
这种技术在搜索引擎、网络监控、市场调研等多个领域中都有广泛应用。在实现数据爬取的过程中,我们通常会用到HTTP协议来请求网页内容,通过HTML解析来定位信息,并提取我们所需的数据。 PHP语言实现数据爬取的基本...