给页面加速，干掉Dom Level 0 Event

xuedong

浏览: 304914 次
性别:
来自: 北京

最近访客更多访客>>

yihui224

gaohe0426

IrisZhang15138

梁静茹的小三

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

javascript event level attachEvent

现在的web应用越来越复杂,需要响应各种各样的用户触发事件,因而也就不可避免的,需要给我们的html页面上的dom元素增加事件监听函数.

我们知道给dom元素绑定事件监听函数的方法有如下3种:

1 : 页面html:


<button onclick=”test();”></button>

2: 页面html:


<button id=”btn”></button>

Javascript:


document.getElementById(“btn”).onclick =  test;

3: 页面html:


 <button id=”btn”></button>

Javascript:

document.getElementById(“btn”).atachEvent(“onclick”,test); //ie

这3种方法的功能效果和差异,大家都了解,在此就不在赘述了,但是这3种方法,对页面渲染的速度,资源的消耗,却是有很大不同的.

正文后面的html代码是一个demo页面,大家可以用ie浏览器打开,通过注释不同的代码段,查看页面运行效果.

可以看到第一种方式的效率是最低的,随着页面节点的增多,页面渲染时间急剧增加,在ie7下运行,大概670ms;

第二种方式明显好一些,在ie7下,大概250ms

而第三种方式则是最快的方法,也是web前端开发推荐的标准写法,在ie7下,大概188ms;

然后我们去掉事件绑定的逻辑,发现只渲染dom元素,不绑定事件的时间,仅仅125ms,可见事件绑定的时间消耗还是很大的 ,尤其是第一种方式,也就是Dom Level 0 Event,最为耗时.

另外,大家运行各段代码的时候,不妨打开任务管理器,找到浏览器对应的进程,查看代码运行时cpu的消耗以及内存的使用.

我们可以看到,Dom Level 0 Event,对cpu的消耗明显要高很多.

对内存的消耗分析:

重新打开浏览器,空白页面的内存占用量大概是37M,虚拟内存为28M,页面渲染后:

1 内存使用 54M,虚拟内存41M

2 内存使用44M,虚拟内存31M

3 内存使用44M,虚拟内存31M

可见Dom Level 0 Event对内存的消耗,也远远超出了其它方式.

为什么Dom Level 0 Event会这么消耗系统资源呢?对cpu和内存的消耗都远远超出了其它方式.我们来做一个简单分析.

为了便于分析,我们不妨修改一下我们的代码 <button onclick=”debugger;test();”></button> ,然后运行页面,在ie的script debugger里我们找到堆栈调用这一项,可以看到有一个anonymos function,这个function是从何而来的呢.原来浏览器在对Dom Level 0 Event做绑定的时候,会自动生成一个包含我们的代码的匿名函数,然后把这个匿名函数绑定到事件.类似于如下方式:

document.getElementById(“btn”).onclick = function(event){

test();

} ;

而ie浏览器又没有足够的智能,区分出众多内部功能完全一致的匿名函数并合并它们的引用,所以导致了随着dom事件绑定的越来越多,匿名函数的个数也越来越多.因为要声明数量众多的事件处理匿名函数,也就不难明白,为什么会消耗如此多的系统资源了.

随着dom元素的增多,这个资源消耗就会越来越严重.而且我们可以尝试着刷新一下页面,发现随着刷新的次数增加,页面运行越来越慢,cpu消耗也越来越多,内存也会有少量增加.可见,Dom Level 0 Event 还会带来少量的内存泄露.至于时间的延长,cpu消耗的加聚,推测是因为浏览器忙于释放众多的匿名函数所占用的资源所带来的后果.

进一步深入,由于ie浏览器是基于冒泡的事件模型,子元素的event会冒泡到父元素,所以更极致的优化,是去掉众多子元素的事件绑定,而将事件绑定到父元素,在正文后的demo中,也有这方面的尝试,可以看到不仅cpu,内存消耗最低,时间上也跟渲染干净的html页面是一样的.

所以我们在页面事件绑定中,要尽量避免Dom Level 0 Event,而且要尽可能的将事件上升．（当然也要考虑事件处理的灵活性）．

demo：


<BODY>
    <ul id="list"></ul>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        var $ = function(id){
        return document.getElementById(id)
        };
        function test(){
            alert(1)
        }
        var ul = $("list");
        var count = 5000;
        // ie7 
    //-->
    </SCRIPT>
  <script>
    var d = new Date()
    var str = [];
    for(var i = 0;i<count;i++){
        str.push('<li onclick="test();">'+i+'</li>')
    }
    ul.innerHTML = str.join("");
    alert(new Date - d);
    //670  刷新时时间增加   85
  </script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
    /*var d = new Date()
    var str = [];
    for(var i = 0;i<count;i++){
        str.push('<li>'+i+'</li>')
    }
    ul.innerHTML = str.join("");
    alert(new Date - d); */  
    //125
  //-->
  </SCRIPT>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
    /*var d = new Date()
    var str = [];
    for(var i = 0;i<count;i++){
        str.push('<li>'+i+'</li>')
    }
    ul.innerHTML = str.join("");
    var li = document.getElementsByTagName("li");
    var l = li.length;
    for(var i=0;i<l;i++){
        li[i].onclick = test;
    }
    li = null;
    alert(new Date - d);*/
    //250
  //-->
  </SCRIPT>
   <SCRIPT LANGUAGE="JavaScript">
  <!--
    /*var d = new Date()
    var str = [];
    for(var i = 0;i<count;i++){
        str.push('<li>'+i+'</li>')
    }
    ul.innerHTML = str.join("");
    var li = document.getElementsByTagName("li");
    var l = li.length;
    for(var i=0;i<l;i++){
        li[i].attachEvent("onclick",test);
    }
    li = null;
    alert(new Date - d);*/
    //188
  //-->
  </SCRIPT>
   <SCRIPT LANGUAGE="JavaScript">
  <!--
    /*var d = new Date()
    var str = [];
    for(var i = 0;i<count;i++){
        str.push('<li>'+i+'</li>')
    }
    ul.innerHTML = str.join("");
    ul.attachEvent("onclick",test);
    alert(new Date - d);*/
    //125
  //-->
  </SCRIPT>
 </BODY>

转自：http://www.cnblogs.com/rt0d/archive/2011/04/15/2017579.html

分享到：

window.location.hash属性介绍 | 关于图片的预加载,你所不知道的

2011-08-08 11:50
浏览 935
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

给页面渲染时间加速干掉Dom Level 0 Event: 例如，在IE7浏览器中，使用Dom Level 0 Event进行事件绑定的页面渲染时间可能达到670ms，而这种性能开销在对比其他两种事件绑定方式（即使用Element的onclick属性和attachEvent方法）时显得尤为显著。文章进一步...

外加热强制循环蒸发器装配图（CAD).rar: 外加热强制循环蒸发器装配图（CAD).rar

数控车床纵向进给系统设计.zip: 数控车床纵向进给系统设计.zip

vault_side_off_ominous.png: j

爬虫 bangumi名称和评论数: 爬虫 bangumi名称和评论数

基于SpringBoot的垃圾分类回收系统(源码+数据库+万字文档)526: 基于SpringBoot的垃圾分类回收系统，系统包含两种角色：管理员、用户主要功能如下。【用户功能】首页：浏览垃圾分类回收系统信息。个人中心：管理个人信息，查看历史记录和订单状态。运输管理：查看运输信息，垃圾回收的时间和地点。公告管理：阅读系统发布的相关通知和公告。垃圾回收管理：查看垃圾回收的信息，回收类型和进度。垃圾出库申请管理：提交和查看垃圾出库申请的状态。【管理员功能】首页：查看垃圾分类回收系统。个人中心：管理个人信息。管理员管理：审核和管理注册管理员用户的信息。用户管理：审核和管理注册用户的信息。运输管理：监管和管理系统中的运输信息。公告管理：发布、编辑和删除系统的通知和公告。垃圾回收管理：监管和管理垃圾回收的信息。垃圾出库申请管理：审批和管理用户提交的垃圾出库申请。基础数据管理：管理系统的基础数据，运输类型、公告类型和垃圾回收类型。二、项目技术编程语言：Java 数据库：MySQL 项目管理工具：Maven 前端技术：Vue 后端技术：SpringBoot 三、运行环境操作系统：Windows、macOS都可以 JDK版本：JDK1.8以上都可以开发工具：IDEA、Ecplise、Myecplise都可以数据库: MySQL5.7以上都可以 Maven：任意版本都可以

这篇文章是台湾大学（NTU）计算机科学与信息工程系（CSIE）2021年秋季学期算法设计与分析课程的第一份作业（Homework#1）的具体要求和题目描述以下是主要内容的总结：: 内容概要：本文档是台湾大学计算机科学与信息工程系2021年秋季学期《算法设计与分析》课程的第一次作业（Homework#1）。作业包含四道编程题和三道手写题，旨在考察学生对算法设计和分析的理解与应用能力。编程题涉及汉诺塔、数组计算、矩形点对、糖果分配等问题；手写题涵盖渐近符号证明、递归方程求解、幽灵腿游戏优化、不公平的卢卡斯问题等。文档详细描述了每个问题的具体要求、输入输出格式、测试用例以及评分标准。此外，还提供了编程技巧和注意事项，如避免延迟提交、正确引用资料、处理大输入文件等。适合人群：具备一定编程基础的本科生或研究生，特别是修读过或正在修读算法设计与分析相关课程的学生。使用场景及目标：①帮助学生巩固课堂所学的算法理论知识；②通过实际编程练习提高解决复杂问题的能力；③为后续更深入的学习和研究打下坚实的基础。其他说明：此作业强调团队合作和个人独立思考相结合的重要性，鼓励学生在讨论后用自己的语言表达解决方案，并注明参考资料。对于编程题，特别提醒学生注意输入文件可能较大，建议采取适当的优化措施以确保程序运行效率。

基于SpringBoot的铁路订票管理系统(源码+数据库+万字文档+ppt)528: 基于SpringBoot的铁路订票管理系统，系统包含两种角色：管理员、用户主要功能如下。【用户功能】首页：浏览铁路订票管理系统的主要信息。火车信息：查看火车的相关信息，包括车次、出发地、目的地和票价等。公告资讯：阅读系统发布的相关通知和资讯。后台管理：进行系统首页、个人中心、车票预订管理、车票退票管理等操作。个人中心：管理个人信息，查看订单历史记录等。【管理员功能】首页：查看铁路订票管理系统。个人中心：修改密码、管理个人信息。用户管理：审核和管理注册用户的信息。火车类型管理：管理系统中的火车类型信息。火车信息管理：监管和管理系统中的火车信息，添加、编辑、删除等。车票预订管理：处理用户的车票预订请求。车票退票管理：处理用户的车票退票请求。系统管理：管理系统的基本设置，公告资讯、关于我们、系统简介和轮播图管理。二、项目技术编程语言：Java 数据库：MySQL 项目管理工具：Maven 前端技术：Vue 后端技术：SpringBoot 三、运行环境操作系统：Windows、macOS都可以 JDK版本：JDK1.8以上都可以开发工具：IDEA、Ecplise、Myecplise都可以数据库: MySQL5.7以上都可以 Maven：任意版本都可以

塑料架注射模具设计.rar: 塑料架注射模具设计.rar

基于json文件数据驱动的的接口测试框架.zip: 基于json文件数据驱动的的接口测试框架

铁丝缠绕包装机设计-缠绕盘设计.rar: 铁丝缠绕包装机设计-缠绕盘设计.rar

Linux操作系统及常用命令详解.zip: linux

圆柱体相贯线焊接专机工作台设计.rar: 圆柱体相贯线焊接专机工作台设计.rar

硬币分拣机设计.rar: 硬币分拣机设计.rar

【机器学习与数据挖掘】行业级机器学习软件开发经验与教训：从LIBSVM和LIBLINEAR看算法部署及软件设计挑战: 内容概要：本文探讨了开发行业级机器学习和数据挖掘软件的经验与教训，指出当前研究界与工业界之间的脱节问题。作者分享了开发LIBSVM和LIBLINEAR的经验，强调了用户需求的重要性。大多数用户并非机器学习专家，期望简单易用的工具来获得良好结果。文章还详细介绍了支持向量机（SVM）的实际应用案例，包括数据预处理（如特征缩放）、参数选择等步骤，并提出了为初学者设计的简易流程。此外，作者讨论了在设计机器学习软件时应考虑的功能选择、选项数量、性能优化与数值稳定性等问题，强调了软件开发与实验代码的区别以及鼓励研究人员参与高质量软件开发的重要性。适合人群：对机器学习软件开发感兴趣的科研人员、工程师及从业者，尤其是那些希望了解如何将学术研究成果转化为实际可用工具的人士。使用场景及目标：①帮助非机器学习专家的用户更好地理解和使用机器学习方法；②指导开发者在设计机器学习软件时考虑用户需求、功能选择、性能优化等方面的问题；③促进学术界与工业界之间的合作，推动高质量机器学习软件的发展。其他说明：本文不仅提供了具体的开发经验和技巧，还呼吁建立激励机制，鼓励更多研究人员投入到机器学习软件的开发中，以解决当前存在的研究与应用脱节的问题。

pandas学习代码，jypyter格式: 一天入门pandas代码

joblib-0.12.0-py2.py3-none-any.whl: 该资源为joblib-0.12.0-py2.py3-none-any.whl，欢迎下载使用哦！

深度学习基于PyTorch==2.6.0和Transformers==4.48.0的XTuner环境配置：AI模型开发与优化依赖库列表: 内容概要：本文档《xtuner_requirements.txt》列出了用于支持特定项目（可能是机器学习或深度学习项目）运行所需的所有Python包及其版本。其中不仅包括常见的数据处理和科学计算库如numpy、pandas，还包括了与深度学习密切相关的库如torch、transformers等。值得注意的是，文档中还特别指定了NVIDIA CUDA相关组件的具体版本，确保了GPU加速环境的一致性和兼容性。此外，文档中也包含了从GitHub直接安装的xtuner库，明确了具体的提交哈希值，保证了代码来源的精确性。适合人群：对机器学习、深度学习领域有一定了解并需要搭建相应开发环境的研发人员，尤其是那些希望复现特定实验结果或基于已有模型进行二次开发的研究者和技术爱好者。使用场景及目标：①帮助开发者快速搭建完整的开发环境，确保所有依赖项正确无误；②为研究人员提供一个稳定的实验平台，以便于重复实验和验证结果；③作为项目协作的基础，确保团队成员之间的环境一致性，减少因环境差异带来的问题。阅读建议：由于该文档主要为技术性依赖列表，在阅读时应重点关注所需安装的库及其版本号，特别是CUDA相关组件和自定义库（如xtuner）的安装方式。对于非技术人员而言，可能需要额外查阅相关资料来理解各库的作用。同时，在实际操作过程中，建议按照文档中的顺序逐一安装依赖，避免版本冲突等问题的发生。

vault_side_on_ominous.png: j

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论