为IE浏览器的javascript提速

51jsr

浏览: 246802 次
性别:
来自: 沈阳

最近访客更多访客>>

u012363178

blueios

StayHome

winara

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript & jQuery & AJAX

浏览器 IE JavaScript jQuery Chrome

随着现在网页设计越来越多的应用javascript技术，而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标，各家浏览器厂商皆宣称他们的浏览器速度更快，希望搅动现存的竞争态势。IE8浏览器的Javascript运行速度虽然相对于IE7以及IE6有着很大的提升，但相对于Webkit引擎的浏览器还是有一定的差距，在去年的ZDNET Javascript测试上Chrome浏览器表现突出，一举击败Firefox、Safari和微软的IE浏览器。不过因为IE浏览器相对庞大的使用人群，我们有必要为IE浏览器的javascript来提提速。

我们知道，浏览器在执行期时是由内到外执行脚本的，那么离我们的脚本最远的全局对象，很可能要跨越几层作用域才能访问到它。不过在IE浏览器中，从最内层到最外层要花的时间比其他多出很多。加之，javascript是一种胶水语言，它必须要调用DOM对能完成我们大多数选择。最著名的就是选择元素（document.getElementById,document.getElementsByTagName,docuemnt.evaluate,document.querySelector），创建元素（document.createElement），此外还有document.body，document.defaultView.getComputedStyle等等，频繁地调用document对象，但是document是位于window对象下，因此这路程就更远了。就了提速，我们必须把它们保存在一个本地变量，那么每次就省得它长途跋涉了。这种技术的运用明显体现在jQuery的源码中：

(function( window, undefined ) {

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context );
	},

	// Map over jQuery in case of overwrite
	_jQuery = window.jQuery,

	// Map over the $ in case of overwrite
	_$ = window.$,

	// Use the correct document accordingly with window argument (sandbox)
	document = window.document,

        //====================省=================
       }
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

})(window);

把window传进闭包内，就省得它每次都往外找window了。

再看其他类库

//Raphael
window.Raphael = (function () {
    var separator = /[, ]+/,
        elements = /^(circle|rect|path|ellipse|text|image)$/,
        doc = document,
        win = window,
//************略**************//dojo
d.global = this;//Ext
DOC = document,//YUI
//************略************
            } else if (i == 'win') {
                c[i] = o[i].contentWindow || o[i];
                c.doc = c[i].document;
//************略************
Y.config = {

            win: window || {},
            doc: document,

但是如果你没有引入类库，如果让IE的javascript跑得更快些呢？用一个变量把它储存起来？在一个国外的博客看到一种很厉害的劫持技术，偷龙转凤把全局变量document变成一个局部变量。

/*@cc_on _d=document;eval('var document=_d')@*/<!doctype html>
<html dir=”ltr” lang=”zh-CN”>
<head>
<meta charset=”utf-8″/>
<title>javascript提速技术 by 司徒正美</title>

<script type=”text/javascript”>

var date = new Date;
for (var i = 0; i < 100000; i++) document;

alert(new Date - date);

</script>

</head>
<body>
</body>
</html>

运用提速技术后：

<!doctype html>
<html dir=”ltr” lang=”zh-CN”>
<head>
<meta charset=”utf-8″/>
<title>javascript提速技术 by 司徒正美</title>

<script type=”text/javascript”>
/*@cc_on _d=document;eval(’var document=_d’)@*/

var date = new Date;
for (var i = 0; i < 100000; i++) document;

alert(new Date - date);

</script>

</head>
<body>
!!!!!!!!
</body>
</html>

经测试，用了提速技术后，IE的性能比较

IE6 document document.getElementById document.title

没有使用提速技术	485	1110	1219
使用提速技术后	109	609	656

IE8 document document.getElementById document.title

没有使用提速技术	468	797	843
使用提速技术后	78	328	407

我们看一下实现原理:

document;
doc;      //很明显，调用这个比直接document快，document还要钻进window内部找一番如何劫持它呢？

var doc = document;
var document = doc;这样明显不行因为在预编译阶段，var变量会提前，上面代码相当于

var doc
var document  //这里被劫持了
doc = document //注意，document已经变成undefined
document = doc //相当于window.undefined = undefined没有办法，只好在执行期才定义这个document变量，javascript的动态解析技术派上用场了，eval就是其代表之一。

var doc = document;
eval('var document = doc');为了让IE专用，用了IE特有的条件编译。

/*@cc_on
var doc = document;
eval('var document = doc');
@*/嘛，window的东西其实蛮多，我们一一把它们变成本地变量又如何？

/*@cc_on
eval((function(props) {
  var code = [];
  for (var i = 0 l = props.length;i<l;i++){
    var prop = props[i];
    window['_'+prop]=window[prop];
    code.push(prop+'=_'+prop)
  }
  return 'var '+code.join(',');
})('document event body location title self top parent alert setInterval clearInterval setTimeout clearTimeout'.split(' ')));
@*/

我们可以再扩展一下，让其更多全局变量或全局方法局部化。不过经验测，FF使用它会报错，chrome则慢了，其他浏览器不明显。

        if( !+"v1"  ){
          var code = [],ri = 0,prop,str = "var "
          for(var a in window)
            code[ri++] = a;
          for (var i = 0 ,n = code.length;i<n;i++){
            var prop = code[i]
            window['_'+prop] = window[prop];
            str += prop+'=_'+prop+","
          }
          str = str.slice(0,-1);
          eval(str)
        }<!doctype html>
<html dir=”ltr” lang=”zh-CN”>
<head>
<meta charset=”utf-8″/>
<title>javascript提速技术 by 司徒正美</title>

<script type=”text/javascript”>
var __chrome = navigator.userAgent.indexOf(”Chrome”) !== -1;
var __firefox = !!window.Components

if( !__chrome & !__firefox ){

var code = [],ri = 0,prop,str = “var ”
for(var a in window)
code[ri++] = a;
for (var i = 0 ,n = code.length;i<n;i++){
var prop = code[i]
window['_'+prop] = window[prop];
str += prop+’=_’+prop+”,”
}
str = str.slice(0,-1);
eval(str)
}
var date = new Date;
for (var i = 0; i < 100000; i++)
document;

alert(new Date - date);

</script>

</head>
<body>
!!!!!!
</body>
</html>

分享到：

2011-03-24 19:18
浏览 1213
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

为IE浏览器的javascript提速.docx: 总的来说，为IE浏览器的JavaScript提速主要涉及以下几个方面： 1. 缓存全局对象，如`window`和`document`，使用局部变量引用。 2. 减少DOM操作，尤其是在循环中避免频繁查询或修改DOM。 3. 针对IE特性进行优化，如...

GoogleChromeframe 谷歌浏览器的内嵌框架,IE的外壳, Chrome的芯24.0.1312.52: 众所周知，IE浏览器的性能是很差的，特别在使用诸如 WebQQ 2.0 这样的丰富的网页应用时，你就能明显感觉到 IE的内核和谷歌浏览器的webkit内核之间的性能差异了，那么有没办法提高 IE 的性能呢？ Chrome Frame 是...

稳压罐sw16_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip: 稳压罐sw16_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip

基于递推最小二乘法的永磁同步电机参数辨识及其MATLAB仿真: 内容概要：本文详细介绍了利用递推最小二乘法（RLS）进行永磁同步电机参数辨识的方法及其MATLAB仿真过程。首先解释了RLS算法的优势，如不需要概率模型、计算量适中以及适用于嵌入式系统的实时参数更新。接着展示了将电机电压方程转换为标准形式Y=φθ的具体步骤，并提供了核心的RLS迭代代码。文中还讨论了仿真过程中的一些关键技术细节，如遗忘因子的选择、协方差矩阵的初始化和更新方式、电流信号的处理方法等。最终给出了仿真结果，显示电阻和电感的辨识误差分别达到了0.08%和0.12%，并指出了实际应用中需要注意的数据同步和数值稳定性问题。适合人群：从事电机控制研究的技术人员、研究生及以上学历的学生。使用场景及目标：①帮助研究人员理解和掌握RLS算法在电机参数辨识中的应用；②提供详细的仿真代码和配置建议，便于快速搭建实验环境；③指导如何优化算法性能，提高参数辨识精度。其他说明：本文不仅涵盖了理论推导，还包括了大量的实践经验分享和技术细节探讨，有助于读者全面理解RLS算法的实际应用。同时，文中提到的仿真方案可以方便地移植到DSP平台，进一步扩展了其实用价值。

零起点Python大数据与量化交易: 零起点Python大数据与量化交易

管道清污机器人sw16可编辑_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip: 管道清污机器人sw16可编辑_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip

电路仿真：数字电路仿真.zip: 电子仿真教程，从基础到精通，每个压缩包15篇教程，每篇教程5000字以上。

电能质量分析：电压暂降与中断分析.zip: 电子仿真教程，从基础到精通，每个压缩包15篇教程，每篇教程5000字以上。

thai-scalable-garuda-fonts-0.6.5-1.el8.x64-86.rpm.tar.gz: 1、文件说明： Centos8操作系统thai-scalable-garuda-fonts-0.6.5-1.el8.rpm以及相关依赖，全打包为一个tar.gz压缩包 2、安装指令： #Step1、解压 tar -zxvf thai-scalable-garuda-fonts-0.6.5-1.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm

基于ABAQUS的滑坡与沉降对埋地管道影响的有限元分析及应用: 内容概要：本文详细介绍了利用ABAQUS进行滑坡和沉降对埋地管道影响的有限元分析方法。主要内容涵盖了几何建模、材料属性定义、接触设置、边界条件与加载等方面的技术细节。通过具体的Python脚本示例展示了如何构建模型，并深入探讨了滑坡和沉降条件下管道的应力、应变分布及其潜在破坏机制。此外，还分享了一些实战经验和优化技巧，如材料模型选择、接触条件设置、边界条件处理等，强调了这些因素对结果准确性的重要影响。适合人群：从事地下管道工程设计、施工及维护的专业技术人员，尤其是那些希望深入了解滑坡和沉降对管道影响的研究人员和技术专家。使用场景及目标：适用于评估和预测滑坡和沉降对埋地管道造成的力学响应，帮助工程师们更好地理解和应对复杂的地质灾害环境，从而提高管道系统的安全性与稳定性。其他说明：文中提供的Python代码片段仅为示意，具体实施时需结合ABAQUS的实际接口和项目需求进行适当调整。同时，对于大规模模型的计算，建议使用高性能计算资源以确保效率和精度。

Java实习一天高频面试突击!最常见的几种面试题型！！！: Java一天面试突击，迅速掌握Java常见面试题

莲子去壳机设计模型SW10_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip: 莲子去壳机设计模型SW10_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip

MFRC-522+RC522+RFID射频+IC卡感应模块: MFRC-522+RC522+RFID射频+IC卡感应模块

学术研究学术研究提示设计50招：从论文撰写到润色降重的全方位指南学术研究中常见的: 内容概要：《学术研究提示设计 50 招》是一份详尽的指南，旨在帮助研究人员提高学术写作和研究效率。该文档涵盖了从论文撰写、润色、翻译、查重降重、参考文献管理、投稿审稿到文献阅读等多个方面的具体操作指令。每一章节均针对特定任务提供了详细的步骤和注意事项，例如如何撰写标题、摘要、致谢，如何进行英文润色、中英翻译，以及如何优化逻辑结构等。文档还介绍了如何利用AI工具进行文献分析、术语表提取和研究方向探索等内容，为研究者提供了全面的支持。适合人群：适用于学术研究人员，特别是那些需要撰写、润色和提交学术论文的研究者，包括研究生、博士生及高校教师等。使用场景及目标：① 提供一系列具体的指令，帮助研究者高效完成论文的各个部分，如撰写标题、摘要、致谢等；② 提供润色和翻译的详细指导，确保论文语言的准确性和专业性；③ 提供查重降重的方法，确保论文的原创性；④ 提供参考文献管理和投稿审稿的指导，帮助研究者顺利发表论文；⑤ 利用AI工具进行文献分析、术语表提取和研究方向探索，提高研究效率。阅读建议：此资源不仅提供了具体的指令和方法，更重要的是引导研究者如何思考和解决问题。因此，在学习过程中，不仅要关注具体的步骤，还要理解背后的原理和逻辑，结合实际案例进行实践和反思。

项目optionc-20250409: 项目optionc-20250409

2023年c语言程序设计基本概念考点归纳.doc: 2023年c语言程序设计基本概念考点归纳.doc

电能质量仿真：谐波分析与仿真.zip: 电子仿真教程，从基础到精通，每个压缩包15篇教程，每篇教程5000字以上。

基于Matlab的模拟与数字滤波器设计：IIR、FIR及经典滤波器类型的实战详解: 内容概要：本文详细介绍了使用Matlab进行模拟和数字滤波器设计的方法，涵盖了巴特沃斯、切比雪夫等多种经典滤波器类型。首先讲解了模拟滤波器的设计，如巴特沃斯滤波器的通带平坦性和切比雪夫滤波器的通带波纹特性，并提供了具体的代码示例。接着讨论了数字滤波器的设计，包括IIR滤波器的递归特性和FIR滤波器的线性相位特性，同样附有详细的代码实现。文中还特别强调了不同类型滤波器之间的转换方法以及设计过程中常见的注意事项，如频率归一化、阶数选择等。最后推荐了一些实用的Matlab工具，如fvtool和FDATool，帮助用户更直观地理解和调试滤波器设计。适合人群：具有一定信号处理基础和技术背景的研究人员、工程师及学生。使用场景及目标：适用于需要进行滤波器设计的实际工程应用，如通信系统、音频处理等领域。目标是让读者掌握滤波器设计的基本原理和具体实现方法，能够独立完成滤波器的设计和调试。其他说明：文章不仅提供了理论知识，还通过大量实例代码帮助读者更好地理解和应用所学内容。建议读者在实践中多尝试不同的参数配置，以加深对滤波器特性的理解。

饲料干燥装置sw16_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip: 饲料干燥装置sw16_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip

MATLAB环境下独立分量分析(ICA)在土木、航空航天、机械领域的振动信号处理应用: 内容概要：本文详细介绍了独立分量分析（ICA）在MATLAB环境下的应用，特别是在土木工程、航空航天和机械领域的振动信号处理方面。文章通过具体实例展示了如何利用ICA将复杂的混合信号分解为独立分量，从而帮助识别结构损伤、故障特征等问题。文中提供了详细的MATLAB代码示例，涵盖数据预处理、核心算法实现以及结果可视化的全过程。此外，还讨论了ICA的应用限制及其与其他信号处理方法的结合使用。适合人群：从事土木工程、航空航天、机械等领域研究和技术工作的工程师及研究人员，尤其是那些需要处理复杂振动信号的人群。使用场景及目标：① 土木工程中用于结构健康监测，如桥梁、建筑物的振动数据分析；② 航空航天领域用于飞行器复合载荷分离；③ 机械设备故障诊断，如齿轮箱、轴承等部件的故障特征提取。通过ICA能够有效地从多源混合信号中分离出有用的独立分量，辅助决策。其他说明：ICA并非适用于所有情况，在某些特定条件下可能会失效，因此需要结合实际情况灵活运用。对于初学者来说，可以从简单的仿真数据入手，逐步过渡到真实的工程项目中。

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论