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;
        }
    }
})();

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

标签：

原文地址：http://www.cnblogs.com/surfaces/p/4545867.html