`
hongtoushizi
  • 浏览: 376625 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

阅读更多

摘要:

本文浅析浏览器引擎对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

 

    关于浏览器解析和渲染一个比较好的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秒再把数据输出

先看效果图:

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程序

转载自: http://www.cnblogs.com/y0umer/archive/2012/02/17/2809467.html

分享到:
评论

相关推荐

    浅析JQuery框架及其插件应用

    2. **DOM操作简便**:通过简洁的语法,JQuery使得DOM元素的选择、创建、删除和操作变得异常简单。例如,只需一行代码即可选取页面上的所有段落元素:`$("p")`。 3. **事件处理**:JQuery提供了丰富而灵活的事件处理...

    jquery开发入门整理(所需要了解的)

    这意味着即使是在资源受限的环境中也可以轻松加载和使用jQuery。此外,jQuery与其他JavaScript库(如AngularJS、React等)的兼容性良好,可以方便地与其他框架一起使用。 #### 理由七:简化Ajax开发 jQuery通过`$....

    浅析jquery的作用与优势

    通过使用jQuery,开发者能够更简单地执行在多种浏览器中的DOM操作,以及创建丰富的用户交互效果。 作用方面,以下是jQuery几个主要作用的详细介绍: 1. 操作页面对象:jQuery提供了一套简单且直观的方法来选取和...

    浅析js预加载/延迟加载

    JavaScript预加载和延迟加载是两种优化网页性能的重要技术,它们主要针对JavaScript文件和资源的管理,以提升用户体验和页面加载速度。预加载是为了尽早获取所需资源,而延迟加载则是在需要时才开始加载,以此平衡...

    JavaScript异步加载浅析

    这种方式确保了脚本的执行顺序,适用于那些不依赖DOM,但在DOM加载完成后需要执行的脚本。需要注意的是,不是所有浏览器都支持`defer`属性,对于不支持的浏览器,需要借助如jQuery的`$(document).ready()`来确保脚本...

    浅析jquery如何判断滚动条滚到页面底部并执行事件

    通过这种方式,你可以优化用户体验,只在用户接近或达到页面底部时加载更多数据,减少一次性加载大量内容对网络带宽和浏览器性能的影响。在实际项目中,可以结合API请求、数据缓存等策略来进一步完善这个功能。

    ASP.NET深入浅析

    本文将深入浅析ASP.NET的核心概念和技术,帮助初学者掌握这一强大的开发平台。 1. **基础概念** - **Web Forms**: ASP.NET Web Forms提供了一种通过拖放控件来构建网页的方式,类似于传统的Windows编程模型。 - *...

    浅析jquery与checkbox的checked属性的问题

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作,包括对复选框(checkbox)的处理。本文将深入探讨 jQuery 与 HTML 复选框的 `checked` 属性之间可能遇到的问题及其解决方案。 1. **页面...

    浅析$(function) ready和onload 的区别

    1. **执行时机**:`$(function)`(`document.ready`)在DOM准备就绪时执行,而`onload`在所有资源(包括图像和脚本)加载完成后执行。 2. **可绑定次数**:`$(function)`可以被多次调用并执行,而`onload`事件只能有...

    jQuery中值得注意的trigger方法浅析

    在jQuery库中,`trigger`方法是一个非常实用的工具,它允许开发者在DOM元素上模拟各种事件,使得代码更加简洁高效。本文将深入探讨`trigger`方法的核心功能、常见用法以及如何与其他jQuery方法结合使用。 `trigger`...

    vue中created和mounted的区别浅析

    Vue的生命周期与浏览器渲染过程紧密相关,`beforeCreate` 和 `created` 阶段对应于DOM树构建之前,`mounted` 则发生在DOM渲染之后。 在实际开发中,了解Vue组件的生命周期以及其与浏览器渲染的关系至关重要,这有助...

    浅析ajax请求json数据并用js解析(示例分析)

    AJAX(异步JavaScript和XML)是一种技术手段,允许网页在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,...

    浅析return false的正确使用

    在JavaScript和jQuery中,`return false`是一个常见的用法,特别是在事件处理程序中,用于防止浏览器执行默认行为。然而,它的使用常常被误解,可能导致潜在的问题。本文将深入探讨何时以及如何正确地阻止浏览器的...

    浅析php如何实现爬取数据原理

    这种技术在搜索引擎、网络监控、市场调研等多个领域中都有广泛应用。在实现数据爬取的过程中,我们通常会用到HTTP协议来请求网页内容,通过HTML解析来定位信息,并提取我们所需的数据。 PHP语言实现数据爬取的基本...

Global site tag (gtag.js) - Google Analytics