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

xuedong

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

最近访客更多访客>>

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
浏览 922
评论(0)
分类:Web前端
查看更多

发表评论

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

相关推荐

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

sblim-gather-provider-2.2.8-9.el7.x64-86.rpm.tar.gz: 1、文件内容：sblim-gather-provider-2.2.8-9.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/sblim-gather-provider-2.2.8-9.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊

基于pringboot框架的图书进销存管理系统的设计与实现（Java项目编程实战+完整源码+毕设文档+sql文件+学习练手好项目）.zip: 本图书进销存管理系统管理员功能有个人中心，用户管理，图书类型管理，进货订单管理，商品退货管理，批销订单管理，图书信息管理，客户信息管理，供应商管理，库存分析管理，收入金额管理，应收金额管理，我的收藏管理。用户功能有个人中心，图书类型管理，进货订单管理，商品退货管理，批销订单管理，图书信息管理，客户信息管理，供应商管理，库存分析管理，收入金额管理，应收金额管理。因而具有一定的实用性。本站是一个B/S模式系统，采用Spring Boot框架，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得图书进销存管理系统管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来，实现无纸化办公，能够有效的提高图书进销存管理系统管理效率。关键词：图书进销存管理系统；Spring Boot框架；MYSQL数据库

2024中国在人工智能领域的创新能力如何研究报告.pdf: 2024中国在人工智能领域的创新能力如何研究报告.pdf

安全生产_人脸识别_移动目标跟踪_智能管控平台技术实现与应用_1741777778.zip: 人脸识别项目实战

人脸识别_TF2_Facenet_训练预测应用仓库_1741778670.zip: 人脸识别项目实战

安全人脸识别_对抗攻击_多模型集成_减少扰动_竞赛方案_Ne_1741779504.zip: 人脸识别项目实战

Python实现基于CEEMDAN完全自适应噪声集合经验模态分解时间序列信号分解的详细项目实例（含完整的程序，GUI设计和代码详解）: 内容概要：本文档详细介绍了基于CEEMDAN（完全自适应噪声集合经验模态分解）的方法实现时间序列信号分解的具体项目。文中涵盖项目背景介绍、主要目标、面临的挑战及解决方案、技术创新点、应用领域等多方面内容。项目通过多阶段流程（数据准备、模型设计与构建、性能评估、UI设计），并融入多项关键技术手段（自适应噪声引入、并行计算、机器学习优化等）以提高非线性非平稳信号的分析质量。同时，该文档包含详细的模型架构描述和丰富的代码样例（Python代码），有助于开发者直接参考与复用。适合人群：具有时间序列分析基础的科研工作者、高校教师与研究生，从事信号处理工作的工程技术人员，或致力于数据科学研究的从业人员。使用场景及目标：此项目可供那些面临时间序列数据中噪声问题的人群使用，尤其适用于需从含有随机噪音的真实世界信号里提取有意义成分的研究者。具体场景包括但不限于金融市场趋势预测、设备故障预警、医疗健康监控以及环境质量变动跟踪等，旨在提供一种高效的信号分离和分析工具，辅助专业人士进行精准判断和支持决策。其他说明：本文档不仅限于理论讲解和技术演示，更着眼于实际工程项目落地应用，强调软硬件资源配置、系统稳定性测试等方面的细节考量。通过完善的代码实现说明以及GUI界面设计指南，使读者能够全面理解整个项目的开发流程，同时也鼓励后续研究者基于已有成果继续创新拓展，探索更多的改进空间与发展机遇。此外，针对未来可能遇到的各种情况，提出了诸如模型自我调整、多模态数据融合等发展方向，为长期发展提供了思路指导。

监护人，小孩和玩具数据集 4647张原始图片监护人食物孩子玩具精确率可达85.4% pasical voc xml格式: 监护人，小孩和玩具数据集 4647张原始图片监护人食物孩子玩具精确率可达85.4% pasical voc xml格式

根据提供的内容可以构建以下_1741777949.zip: 人脸识别项目实战

`计算机视觉_人脸识别_Python_OpenCV_树莓派毕业设计`.zip: 人脸识别项目实战

智慧生产企业园区解决方案PPT(54页).pptx: 在智慧园区建设的浪潮中，一个集高效、安全、便捷于一体的综合解决方案正逐步成为现代园区管理的标配。这一方案旨在解决传统园区面临的智能化水平低、信息孤岛、管理手段落后等痛点，通过信息化平台与智能硬件的深度融合，为园区带来前所未有的变革。首先，智慧园区综合解决方案以提升园区整体智能化水平为核心，打破了信息孤岛现象。通过构建统一的智能运营中心（IOC），采用1+N模式，即一个智能运营中心集成多个应用系统，实现了园区内各系统的互联互通与数据共享。IOC运营中心如同园区的“智慧大脑”，利用大数据可视化技术，将园区安防、机电设备运行、车辆通行、人员流动、能源能耗等关键信息实时呈现在拼接巨屏上，管理者可直观掌握园区运行状态，实现科学决策。这种“万物互联”的能力不仅消除了系统间的壁垒，还大幅提升了管理效率，让园区管理更加精细化、智能化。更令人兴奋的是，该方案融入了诸多前沿科技，让智慧园区充满了未来感。例如，利用AI视频分析技术，智慧园区实现了对人脸、车辆、行为的智能识别与追踪，不仅极大提升了安防水平，还能为园区提供精准的人流分析、车辆管理等增值服务。同时，无人机巡查、巡逻机器人等智能设备的加入，让园区安全无死角，管理更轻松。特别是巡逻机器人，不仅能进行360度地面全天候巡检，还能自主绕障、充电，甚至具备火灾预警、空气质量检测等环境感知能力，成为了园区管理的得力助手。此外，通过构建高精度数字孪生系统，将园区现实场景与数字世界完美融合，管理者可借助VR/AR技术进行远程巡检、设备维护等操作，仿佛置身于一个虚拟与现实交织的智慧世界。最值得关注的是，智慧园区综合解决方案还带来了显著的经济与社会效益。通过优化园区管理流程，实现降本增效。例如，智能库存管理、及时响应采购需求等举措，大幅减少了库存积压与浪费；而设备自动化与远程监控则降低了维修与人力成本。同时，借助大数据分析技术，园区可精准把握产业趋势，优化招商策略，提高入驻企业满意度与营收水平。此外，智慧园区的低碳节能设计，通过能源分析与精细化管理，实现了能耗的显著降低，为园区可持续发展奠定了坚实基础。总之，这一综合解决方案不仅让园区管理变得更加智慧、高效，更为入驻企业与员工带来了更加舒适、便捷的工作与生活环境，是未来园区建设的必然趋势。

第八届全国大学生创新创业年会-创新创业展示项目集: 本届年会的主题是“青春梦想创新创业”。通过学术论文报告、创新创业项目展示、创业项目推介、工作研讨、联谊活动、大会报告等活动，全面展示大学生最新的创新创业成果。年会共收到491所高校推荐的学术论文756篇、创新创业展示项目721项、创业推介项目156项，合计1633项，为历届年会数量最高。经过36所“985”高校相关学科专家的初评以及国家级大学生创新创业训练计划专家组的复选，最终遴选出可参加本次年会的学术论文180篇，创新创业展示项目150个，创业推介项目45项，共计375项，涉及30个省市的236所高校。年会还收到了来自澳门特别行政区、俄罗斯的13项学术论文及参展项目。这些材料集中反映了各高校最新的创新创业教育成果，也直接体现了当代大学生的创新思维和实践能力。

人脸识别_实时_ArcFace_多路识别技术_JavaScr_1741771263.zip: 人脸识别项目实战

6ES7215-1AG40-0XB0-V04.04.01固件4.5: 6ES7215-1AG40-0XB0_V04.04.01固件4.5

在无人机上部署SchurVins的yaml配置文件: 在无人机上部署SchurVins的yaml配置文件

uniapp实战商城类app和小程序源码.rar: uniapp实战商城类app和小程序源码，包含后端API源码和交互完整源码。

基于MobileNet轻量级网络实现的常见30多种食物分类: 基于MobileNet轻量级网络实现的常见30多种食物分类，包含数据集、训练脚本、验证脚本、推理脚本等等。数据集总共20k左右，推理的形式是本地的网页推理

2024年央国企RPA市场研究报.pdf: 2024年央国企RPA市场研究报.pdf

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论