为IE浏览器的javascript提速

 随着现在网页设计越来越多的应用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>

文章来源:http://www.cnblogs.com/rubylouvre/archive/2010/02/11/1667628.html

虽然IE8的发布并没有给我们带来多大的惊喜,但根据微软所公布了IE9的各种评测效能信息,惊奇的发现,IE9在而针对Javascript引擎性能的SunSpider测试中,IE9大幅超越了IE7与IE8,并与Chrome、Safari及Firefox浏览器的Javascript运行基本处于同一等级。希望微软以后不要在重蹈IE8的覆辙,毕竟微软现在出新浏览器的动作是越来越勤奋了,记得当前IE6了,不知用了多少年,才听说有了IE7了,到现在IE8才超越IE6成为全球最流行的浏览器版本,我们期盼微软IE9浏览器能够让竞争对手刮目相看。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 浏览器
, window
, document
, var
, 提速
, javascript函数劫持
, 变量劫持
JavaScript,IE
ie浏览器javascript、360浏览器下载提速、千兆浏览器怎么提速、谷歌浏览器提速、浏览器提速,以便于您获取更多的相关知识。

时间: 2024-09-15 11:16:20

为IE浏览器的javascript提速的相关文章

怎样为IE的javascript提速

 我们知道,javascript在执行期时是由内到外执行脚本的,那么离我们的脚本最远的全局对象,很可能要跨越几层作用域才能访问到它.不过在IE中,从最内层到最外层要花的时间比其他多出很多.加之,javascript是一种胶水语言,它必须要调用DOM对能完成我们大多数选择.最著名的就是选择元素(document.getElementById,document.getElementsByTagName,docuemnt.evaluate,document.querySelector),创建元素(do

判断网页浏览器支持javascript的方法

javascript|浏览器|网页 许多网站需要客户端做许多复杂的工作,比如:用客户端 JavaScript 进行数据合法性校验,这需要客户浏览器的 JavaScript enabled:使用 Session 变量记录身份等信息,需要浏览器 Cookies enabled.因此,有必要确定用户浏览器中的这些选项被打开.在我的网站中,我使用了一串简洁的代码实现这些功能,在用户登录时进行检查,如果不符合就不让登录.在本文中,我就介绍一下这个login页面的写法. 我们首先用 JavaScript 建

使浏览器实现JavaScript支持的方法解析

一.基本的JavaScript 开发环境 JavaScript Reference与JavaScript API: JavaScript Reference是用于建立包含JavaScript runtime的Library或 DLL,然后编译成小的 "shell" 程序,连接Library后生成交互式的JavaScript解释器,也可以用来解释.js 文件. 该程序不依赖Navigator代码. 生成的"shell" 程序,对比浏览器对JavaScript的支持,相

让浏览器实现JavaScript支持的方法解析

一. 基本的JavaScript 开发环境 JavaScript Reference与JavaScript API: JavaScript Reference是用于建立包含JavaScript runtime的Library或 DLL,然后编译成小的 "shell" 程序,连接Library后生成交互式的JavaScript解释器,也可以用来解释.js 文件. 该程序不依赖Navigator代码. 生成的"shell" 程序,对比浏览器对JavaScript的支持,

测试IE浏览器对JavaScript的AngularJS的兼容性

这篇文章主要介绍了测试IE浏览器对JavaScript的AngularJS的兼容性的方法,尽管随着Windows10的近期上市,IE浏览器即将成为历史...需要的朋友可以参考下 短版本 为确保Angular应用在IE上能够工作请确认:   1. 在IE7或更早的版本上polyfill JSON.stringify.你可以使用JSON2或JSON3来polyfills. ? 1 2 3 4 5 6 7 8 9 10 11 <!doctype html> <html xmlns:ng=&qu

如何搭建自动化、跨浏览器的 JavaScript 单元测试

本文讲的是如何搭建自动化.跨浏览器的 JavaScript 单元测试, 我们都知道在各个不同的浏览器环境里测试代码是很重要的,并且在大多数时候,我们这些 Web 开发者在这一点上还是做的不错的 -- 至少在第一次发布项目的时候是这样. 然而我们每次更改代码之后的测试工作,却做的不尽人意. 我深切地知道我本人就是这样的 -- 我早就把"学习怎样搭建自动化.跨浏览器的 JavaScript 单元测试"写在 To-do List 上了,但每当我坐下来想要真正的去解决这个问题的时候,我却不得不

前端-求助,手机qq内置浏览器,javascript问题

问题描述 求助,手机qq内置浏览器,javascript问题 function touchMove(event) { if(event.touches.length > 1 || event.scale && event.scale !== 1 ) return; var touch = event.targetTouches[0]; endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y}; isScrolli

怎样写一个能同时用于 Node 和浏览器的 JavaScript 包?

本文讲的是怎样写一个能同时用于 Node 和浏览器的 JavaScript 包?, 我在这个问题上见过很多困惑,即使是很有经验的 JavaScript 开发者也可能难以把握其中的巧妙之处.因此我认为值得为它书写一小段教程. 假设你有一个 JavaScript 的模块想要发布到 npm 上,它是同时适用于 Node 和浏览器的.但是请注意!这个特殊的模块在 Node 版本和浏览器版本上的实现有着细微的区别. 这种情况出现得实在频繁,因为在 Node 和浏览器间有着很多微小的环境差别.在这种情况下,

开发跨浏览器的JavaScript方法说明第1/2页_javascript技巧

开发跨浏览器的JavaScript 1. childNodes在ff中和ie的区别. ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的,而ie/op不是这样的. <div id="box1"><span>content</span></div> 在ff下,box1的childNodes为3个,ie下为1个. 2. 设置某个node对象的style class名称. ie中要设置某个nod