本文浅析浏览器引擎对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/9o JS并行加载 Firefox & Chromeo 分析文档结构，优先并行加载css和js
关于浏览器解析和渲染一个比较好的PPT文档
JQUERY DOM加载
大家都知道js加载和执行的时候很容易造成浏览器阻塞，那么jquery的DOM为什么很高效呢？
$(document).ready(function(){
官方手册对这种方法的解释：
当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程序
Technorati 标签: ,,,
联系作者: ,交流QQ群：群1：,群2：
版权所有: 非特殊声明均为本站原创文章，转载请注明出处：
订阅更新: 欢迎通过
阅读(...) 评论()17:01 提问
页面中动态的引入html页面使用了jQuery中load方法，但是谷歌浏览器不兼容怎么办？
火狐可以用，但是在谷歌浏览器不可以，我查了以后网上说是谷歌不支持load方法，那怎么办？求告谢谢
按赞数排序
放在服务器上还是支持的。
肯定支持，要发布网站后通过http协议进行访问，本地file浏览有跨域问题
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐jquery代码可以直接在浏览器中运行吗？比如用记事本写好的jquery代码可以直接在浏览器中运行吗？_百度知道
jquery代码可以直接在浏览器中运行吗？比如用记事本写好的jquery代码可以直接在浏览器中运行吗？
jquery代码可以直接在浏览器中运行吗？比如用记事本写好的jquery代码可以直接在浏览器中运行吗？
我有更好的答案
可以啊。。在调试器console里面编写就好了
采纳率：80%
直接一个JS文件是不能运行的，要附加到html文件里可以
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。使 WebBrowser 更简单的新加和执行 js, 可安装 jQuery 脚本的 C# 开源代码 - IEBrowse...
使 WebBrowser 更简单的新加和执行 js, 可安装 jQuery 脚本的 C# 开源代码 - IEBrowse...
Visual Studio 中提供了浏览器控件 WebBrowser, 可以用在 WinForm 中充当一个小型的浏览器.
WebBrowser 本身提供了调用页面中 js 函数的方法, 但没有直接提供可以添加执行新的 js 脚本的功能. 如果有如下的 js 函数:
1 &script type="text/javascript"&2
function add(num1, num2) {3
return num1 + num2;4
则, 通过如下代码即可调用 add 函数:
1 // browser 为窗口上的 WebBrowser 控件.2
this.browser.Document.InvokeScript ( "add", new object[] { 1, 2 } );
IEBrowser 提供在 WebBrowser 的页面中添加执行新 js 脚本的功能.
IEBrowser 是开源共享的 C# 代码, 示例参考: http://code.google.com/p/zsharedcode/wiki/IEBrowserDoc , 下载使用: http://code.google.com/p/zsharedcode/wiki/Download .
下面的例子是增加并调用新的 js 函数 showMessage:
1 // 从当前的 WebBrowser 控件创建 IEBrowser 对象, WebBrowser 的 Url 属性已经设置为 "about:blank". 2
IEBrowser ie = new IEBrowser ( this.webBrowser ); 3
// 定义 javascript 脚本, 声明一个 showMessage 函数. 5
string showMessageScript = "function showMessage(message){alert("消息:" + message);}"; 6
// 将脚本安装到 WebBrowser 中. 7
ie.InstallScript ( showMessageScript ); 8
// 执行脚本, 调用 showMessage 函数.10
ie.ExecuteScript ( "showMessage("哈哈!");" );
使用 IEBrowser 的 InstallScript 方法即可完成添加 js 脚本的功能, 而 ExecuteScript 则可以执行 js 脚本. InstallScript 除了可以直接传递包含脚本的字符串外, 也可以是脚本的地址.
你还可以为 WebBrowser 安装 jQuery, 并执行一系列的 jQuery 脚本.
IEBrowser 提供了一个 JQuery 类, 简化了 jQuery 脚本的书写.
下面的示例, 演示了在 Google 页面安装 jQuery, 并使用 jQuery 获取页面上所有的链接.
1 // 从当前的 WebBrowser 控件创建 IEBrowser 对象. 2
IEBrowser ie = new IEBrowser ( this.webBrowser ); 3
// 导航到页面 http://www.google.com.hk/. 5
ie.Navigate ( "http://www.google.com.hk/" ); 6
// 等待页面载入完毕. 8
ie.IEFlow.Wait ( new UrlCondition ( "wait", "http://www.google.com.hk", StringCompareMode.StartWith ) ); 9 10
// 安装跟踪脚本, 执行 jquery 必需.11
ie.InstallTrace ( );12 13
// 安装本地的 jquery 脚本.14
ie.InstallJQuery ( new Uri ( Path.Combine ( AppDomain.CurrentDomain.BaseDirectory, @"jquery-1.5.min.js" ) ) );15 16
// 执行 jquery 脚本 $("*").length, 获得页面上总元素个数.17
Console.WriteLine ( "页面上共有 {0} 个元素", ie.ExecuteJQuery ( JQuery.Create ( ""*"" ).Length ( ) ) );18 19
// 执行 jquery 脚本 $("a"), 获得页面上所有的 a 元素并将结果保存在 __jAs 变量中.20
ie.ExecuteJQuery ( JQuery.Create ( ""a"" ), "__jAs" );21 22
// 得到 __jAs 变量中包含的 a 元素的个数.23
int count = ie.ExecuteJQuery&int& ( JQuery.Create ( "__jAs" ).Length ( ) );24 25
for ( int index = 0; index & index++ )26 {27
// 得到 __jAs 变量中索引为 index 的 a 元素, 并保存在 __jA 变量中.28
ie.ExecuteJQuery ( JQuery.Create ( "__jAs" ).Eq ( index.ToString ( ) ), "__jA" );29 30
// 输出 a 元素的 innerText 和 href 属性.31
Console.WriteLine ( string.Format (32
"a[{0}], "{1}", "{2}"",33
ie.ExecuteJQuery&string& ( JQuery.Create ( "__jA" ).Text ( ) ),35
ie.ExecuteJQuery&string& ( JQuery.Create ( "__jA" ).Attr ( ""href"" ) )36
调用 IEBrowser 的 InstallTrace 和 InstallJQuery 即可安装 jQuery 脚本, 脚本的位置可以在本地或者网络. 之后, 可以配合 ExecuteJQuery 方法和 JQuery 类在页面上完成各种 jQuery 操作. JQuery 类参照 jQuery 的 js 脚本命名, 很容易掌握.
注意: 如果出现 jQuery 脚本编码格式导致的出错, 可以将 jQuery 脚本作为资源导入项目, 然后使用 InstallScript 方法安装即可.
除了以上功能, IEBrowser 还可以复制图片, 使 js 调用托管代码, 以及记录用户操作和完成复杂的流程控制等, 之后文章会说明.
欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.
没有更多推荐了，To be or not to be, It's a problem!!!
在chrome浏览器中执行javascript
chrome浏览器中包含了开发者工具，chrome浏览器可谓是非常的强大啊，在chrome浏览器上F12就可以打开开发者模式。如下图所示：
下面给大家简单演示一下使用jquery登陆csdn，首先打开csdn的登陆页面，然后打开开发者工具，在控制台执行如下命令即可。
javascript:$("#username").val("你的用户名称");$("#password").val("你的密码");$("#fm1").submit();
简单说明一下该脚本
javascript说的是在该页面上执行javascript脚本，我使用的是jquery，所以也就是打开的网页上必须包含了jquery的库，如果不包含的话是执行不了这个脚本的。因为CSDN网站也使用了jquery了，所以我们是可以直接在该网站上执行该脚本的。
$("#username") 使用jquery的选择器选中用户名的输入框，val("用户名")，指定用户名称
同理，$("password")也是一样的。
$("#fm1")是选中表单，submit()是jquery提供的提交表单的函数，相当于点击了确定按钮。于是将该命令行在命令控制台执行就可以实现自动登陆CSDN了。
没有更多推荐了，