zoukankan      html  css  js  c++  java
  • 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;
            }
        }
    })();
  • 相关阅读:
    什么是软件架构?
    子系统、框架与架构
    今天开始锻炼身体
    程序语言中基本数值类型的分类
    软件架构的作用
    软件架构要设计到什么程度
    软件架构视图
    更多资料
    How to:如何在调用外部文件时调试文件路径(常见于使用LaunchAppAndWait和LaunchApp函数)
    installshield卸载时提示重启动的原因以及解决办法
  • 原文地址:https://www.cnblogs.com/surfaces/p/4545867.html
Copyright © 2011-2022 走看看