跨检查浏览器特性,解决不同浏览器的兼容问题。 例如,我们最常见的为 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 性能优化整理之 惰性载入的更多相关文章

  1. js 性能优化整理之 缓存变量

    简单的常见的操作:假设每个便签添加一个  属性   -webkit-animation-delay:0.1s 递增操作::通过for循环添加 <ul id="uls"> ...

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

    mousemove 拖拽操作 var count = 0; elem.onmousemove = function(){ count++; // 当计数器为偶数的时候不执行mousemove if( ...

  3. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  4. js 性能优化利器:prepack

    1. js 性能优化 js 本身是没有像 python 一样的预编译功能,更没有像 java 一样的编译功能,所以,这里所说的 js 代码预编译 只是通过工具实现的类似功能而已. 这就要提到 prep ...

  5. js 性能优化 篇一

    JS性能优化 摘自:http://www.china125.com/design/js/3631.htm  首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...

  6. js性能优化文章集锦

    总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...

  7. JS性能优化笔记搜索整理

    通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x ...

  8. js性能优化--学习笔记

    <高性能网站建设进阶指南>: 1.使用局部变量,避免深入作用域查找,局部变量是读写速度最快的:把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法:比如for循环中的.len ...

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

    本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 D ...

随机推荐

  1. wamp在win7下64位系统memcache/memcached安装教程

    折腾了1个多小时,终于搞定.操作系统时64位的,php5.3.13 类似于上一篇的xdebug安装教程~~ memcache和memcached的区别  在自己的新程序中打算全面应用memcached ...

  2. JavaScript的作用域和变量对象

    变量对象 先来说说什么是变量对象.变量对象中又存储了什么东西吧. JavaScript中的运行环境包含全局运行环境和函数运行环境这两种,每进入到一个运行环境都会创建一个变量对象,这个对象中记录了在当前 ...

  3. BZOJ 2002 HNOI2010 弹飞羊 块

    标题效果,LCT解释版本:见 http://blog.csdn.net/popoqqq/article/details/38849471 如今,用一只手滑动块,并再次改写这个问题0.0 块短啊 将进入 ...

  4. error C2504: “CActiveXDocControl”: 基类没有定义

    这样的错误,通常,第一个文件失败: 1.相互头包括 2.头文件秩序 此错误是编译错误,和"inclued头文件"有关 问题描写叙述 有三个头文件AgentSDK.h.AA.h.BB ...

  5. 每天一点儿JAVA-向量的操作

    package java_prac2; import java.util.*; /** * <p>Title: 矢量操作</p> * <p>Description: ...

  6. vultr centos x64 6.5.x 升级php7.0

    升级前,先卸载 php5.6.x 卸载php5.6.2 从cent 6.5.x 需要卸载: yum remove php56u-mysqlnd-5.6.20-1.ius.centos6.x86_64 ...

  7. JDK基本介绍

    JDK这是Java Development Kit 缩写,中国被称为Java开发套件.由SUN该公司提供.这是Java应用程序开发提供了编译和执行环境,所有的Java写程序都依赖于它. JDK能够将J ...

  8. Quartz CronTrigger应用

    CronTrigger配置格式: 格式: [第二] [支] [小时] [日本] [月] [周] [年]  序号 说明  是否必填  同意填写的值 同意的通配符  1  秒  是  0-59    , ...

  9. WPF中的三维空间(1)

    原文:WPF中的三维空间(1) WPF中可以创建三维几何图形,支持3D对象的应用,支持从3D Max等软件将3D文件obj导入设计中,但是目前还不支持将材质同时导入,这样需要在WPF中对3D对象重新设 ...

  10. JVM内存区域划分Eden Space、Survivor Space、Tenured Gen,Perm Gen解释(转)

    jvm区域总体分两类,heap区和非heap区.heap区又分:Eden Space(伊甸园).Survivor Space(幸存者区).Tenured Gen(老年代-养老区). 非heap区又分: ...