js 性能优化整理之 惰性载入

跨检查浏览器特性,解决不同浏览器的兼容问题。 例如,我们最常见的为 dom 节点添加事件的函数

	 function addEvent(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false)
			}else if(element.attacheEvent){   //attacheEvent
				element.attachEven(‘on‘+type,function(){
					handler.apply(element,arguments);    // attachEvent方法中,修复this指针问题
					});

				}else{
					element[‘on‘+type]=handler;

					}
		}
 
每次调用 addEvent 函数的时候,它都要对浏览器所支持的能力进行检查,首先检查是否支持addEventListener 方法,如果不支持,再检查是否支持 attachEvent 方法,如果还不支持,就用 dom 0 级的方法添加事件。 这个过程,在 addEvent 函数每次调用的时候都要走一遍,其实,如果浏览器支持其中的一种方法,那么他就会一直支持了,就没有必要再进行其他分支的检测了, 也就是说,if 语句不必每次都执行,代码可以运行的更快一些。
 

解决方法:惰性载入

	function addEvent (element,type,handler) {
		  if (element.addEventListener) {
			  addEvent = function (element,type,handler) {
				  element.addEventListener(type, handler, false);
			  }
		  }
		  else if(element.attachEvent){
			  addEvent = function (element,type,handler) {
				  element.attachEvent(‘on‘ + type, function(){
					  handler.apply(element,arguments);    // attachEvent方法中,修复this指针问题
					  });
			  }
		  }
		  else{
			  addEvent = function (element,type,handler) {
				  element[‘on‘ + type] = handler;
			  }
		  }
		  return addEvent(element,type,handler);
	  }

函数声明时就指定适当的函数。 这样在第一次调用函数时就不会损失性能了,只在代码加载时会损失一点性能。

 var addEvent = (function () {
    if (document.addEventListener) {
        return function (type, element, handler) {
            element.addEventListener(type, handler, false);
        }
    }
    else if (document.attachEvent) {
        return function (type, element, handler) {
            element.attachEvent(‘on‘ + type, function(){
				 handler.apply(element,arguments);    // attachEvent方法中,修复this指针问题
				});
        }
    }
    else {
        return function (type, element, handler) {
            element[‘on‘ + type] = handler;
        }
    }
})();
时间: 2024-10-12 14:12:45

js 性能优化整理之 惰性载入的相关文章

js 性能优化整理之 高频优化

//mousemove 拖拽操作 var count = 0; elem.onmousemove = function(){ count++; // 当计数器为偶数的时候不执行mousemove if( count % 2 === 0 ){ return; } // 实现拖拽功能的代码... }; 高频事件的简单处理 var throldHold = 200; //两次scroll事件触发之间最小的事件间隔 window.onscroll = function () { if (argument

js性能优化-事件委托(2)

<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>js性能优化</title> <script type="text/javascript" src="script/jquery.js"></script></head><body><ul id='lis

JS性能优化

下面是一些关于客户端JS性能的一些优化的小技巧: 1.[顶]关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推 荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2.如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中

js 性能优化 篇一

JS性能优化 摘自:http://www.china125.com/design/js/3631.htm 首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内置优化引擎,将JS编译成本地代码的浏览器,其它浏览器也陆续实现了JS的编译过程.但是,即使到了编译执行JS的新阶段,仍然会存在低效率的代码.)以下总结一些可以改进代码的整体性能的方法. 1.注意作用域 记住一点,随着作用域中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.所以,访问全局变量

js性能优化-事件委托

js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>js性能优化&l

js性能优化文章集锦

总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/webkaifa/javascript/2012/0619/10568.html 我所经历的JS性能优化http://www.cnblogs.com/koking/archive/2011/10/17/2215665.html DOM性能瓶颈与Javascript性能优化http://www.cnb

stb前端开发js性能优化总结

js性能优化 javascript是一种解释型语言,性能无法达到和C.C++等编译语言的水平,但还是有一些方法来改进. 1.循环 JavaScript中的循环方式有for(;;).while().for(in)3种.其中for(in)的效率极差,因为for(in)执行过程中需要查询散列键.for(;;)和while()比较,while循环的效率要优于for(;;). 2.局部变量和全局变量 局部变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的堆栈当中的. 3.不使用e

你不知道的Node.js性能优化,读了之后水平直线上升

本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 Duang~ 的一下就上去了,那读者一定会骂我,Node.js 根本没有这样搞性能优化的,都是假的." ------ 斯塔克·成龙·王 1.使用最新版本的 Node.js 仅仅是简单的升级 Node.js 版本就可以轻松地获得性能提升,因为几乎任何新版本的 Node.js 都会比老版本性能更好,为什么

JS性能优化笔记搜索整理

通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while