- 浏览: 234867 次
- 性别:
- 来自: 沈阳
文章分类
最新评论
-
Araxis:
也遇到了楼主的问题,我用的sockjs.0.3.4,升级版本到 ...
Websocket出现的错误 -
love_jun1314:
怎么进行转换成功并没有看到a.flv文件呢? 你把commen ...
java调用ffmpeg执行视频转换 -
枫林top:
不错,挺好的
看老外程序员如何向妻子解释设计模式 -
likj_sh:
太感谢了 ,困惑了好久
Struts2 + Spring + Hibernate + DWR 项目布署笔记 -
dhl004:
...
web.xml 通过contextConfigLocation配置spring 的方式
随着现在网页设计越来越多的应用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的性能比较
没有使用提速技术 | 485 | 1110 | 1219 |
使用提速技术后 | 109 | 609 | 656 |
没有使用提速技术 | 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>
发表评论
-
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2017-09-16 22:28 611系列简介 也许,三百 ... -
30分钟掌握ES6/ES2015核心内容
2017-01-09 11:21 348ECMAScript 6(以下简称ES6)是JavaSc ... -
requirejs、require方法冲突
2016-12-21 18:10 1445如果加载了多个requirejs脚本,每个requirejs ... -
谈谈使用 promise 时候的一些反模式
2016-11-25 15:20 355本文翻译自 We have a problem with ... -
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2016-11-23 12:11 586HTML5 Canvas中提供了 ... -
移动端H5页面高清多屏适配方案
2016-11-17 08:35 752背景 开发移动端H5页面 面对不同分辨率的 ... -
JavaScript Promises 相当酷
2016-09-02 18:53 458And when I promise some ... -
gulp使用小结
2016-05-22 19:02 609这篇文章不会介绍 gulp 的起源、发展;不会去一个个讲解 ... -
用gulp做一个略完整的前端打包工作
2016-05-22 18:59 2372我们的官网要改版,会从以前的单一产品变成 ... -
前端神器avalonJS入门
2016-05-19 19:32 556本章将介绍如何使用avalon来实现前端路由功能。 我们需 ... -
给Webstorm的HTML自动压缩插件
2016-05-07 14:20 1181前端代码的压缩 前端的js、css、html的压缩不仅会让 ... -
gulp教程之gulp中文API
2016-05-07 13:44 514http://www.ydcss.com/ ... -
gulp详细入门教程
2016-05-07 13:00 509简介: gulp是前端开发过程中对代码进行构建的工具, ... -
HTML5 Boilerplate - 让页面有个好的开始
2016-04-20 19:08 626一:HTML5 Boilerplate是什 ... -
Websocket出现的错误
2016-04-06 10:49 6840前端使用sockjs,后台使用spring的websocke ... -
移动平台的meta标签-----神奇的功效
2016-02-18 10:51 419对于桌面平台web布局中大家对meta标签再熟悉不过了,它永 ... -
GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
2015-10-26 17:34 1083WGS-84:是国际标准,GPS坐标(Google Eart ... -
Modernizr.js入门指南
2015-05-26 17:52 619Modernizr.js入门指南 ... -
智能机浏览器版本信息
2015-05-12 01:06 512/* * 智能机浏览器版 ... -
jQuery data
2015-02-10 16:35 587但这不是jQuery想要的 jQuery要解决的是对应元素 ...
相关推荐
为IE浏览器的javascript提速.docx
通过js实现谷歌浏览器自动打开IE浏览器,压缩包里有教程和代码,火狐、360浏览器应该也可以,请自行尝试,本人实际项目中使用的谷歌浏览器
Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Firefox与IE浏览器的javascript兼容性问题Fire...
为帮助广大正处于Web2.0洪流中的开发人员,在这里为大家介绍一款轻巧灵活的辅助开发工具。 Firebug是Firefox下的一款开发类插件,现属于Firefox 的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台...
ie不执行javascript修复ie不执行javascript修复ie不执行javascript修复 当IE不能正常运行时,打开该工具就可以了,自动修复
本资源包括ie上调试javascirpt所需要的Companion.JS.exe 和 Microsoft Script Debugger 以及使用方法
这是全世界最短的判断IE浏览器的代码,判断仅仅需要6 bytes
用于自助终端,支持A3/A4打印,支持选择本地打印机和共享打印机,可查询mac地址,用于集成快速打印证照文件,简单易用,附带完整示例,使用前部署到web服务器和注册ocx
ie浏览器全屏代码测试,通过对ie浏览器的设置,实现打开网页,自动全屏功能。该代码模拟 发送F11按键,判断当前页面是否为全屏,否则发送F11将浏览器设为全屏。
众所周知,IE浏览器的性能是很差的,特别在使用诸如 WebQQ 2.0 这样的丰富的网页应用时,你就能明显感觉到 IE的内核 和 谷歌浏览器的webkit内核 之间的性能差异了,那么有没办法提高 IE 的性能呢? Chrome Frame 是...
主要介绍了使用JavaScript开发IE浏览器本地插件实例,本文讲解使用JS+注册表的方式开发一个IE浏览器本地插件,需要的朋友可以参考下
IE启用javascript IE启用javascript IE启用javascript IE启用javascript IE启用javascript
获取IE信息的JavaScript脚本,是一个完整的html文件,直接打开就可以。
HTML+CSS+JavaScript+SQLserver+IE浏览器实现食堂餐厅管理系统,有登录,点餐,充值,查询等功能.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 项目具有较高的学习...
修复IE的JavaScript的批处理。比如发现IE下,点击JavaScript链接不响应,多数可以用此脚本。
让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会...
IE的JavaScript调试工具,感觉还行
在IE中的JS调试一直是影响我们开发效率的一大问题,本文就介绍如何在IE中调试JS
只适合于IE浏览器,打开工具,输入 javascript 脚本,然后把鼠标移到 IE浏览器上,按下标题中指示的快捷键,神奇出现了,你的脚本在页面上执行了!!下面的脚本可在CSDN登录页面输入帐号密码,赶快试一试吧: var fm...
主要介绍了IE8的JavaScript点击事件(onclick)不兼容的解决方法,大家参考使用吧