`
xuedong
  • 浏览: 301094 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

javascripteventlevelattachEvent 
阅读更多

现在的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
分享到：
| 关于图片的预加载,你所不知道的
评论
发表评论

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

相关推荐

    给页面渲染时间加速 干掉Dom Level 0 Event

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

    ibus-table-chinese-erbi-1.4.6-3.el7.x64-86.rpm.tar.gz

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

    基于微信小程序的新乡学院自习室预约系统.zip

    选择Java后台技术和MySQL数据库，在前台界面为提升用户体验，使用Jquery、Ajax、CSS等技术进行布局。 系统包括两类用户：学生、管理员。 学生用户只要实现了前台信息的查看，打开首页，查看网站介绍、自习室信息、在线留言、轮播图信息公告等，通过点击首页的菜单跳转到对应的功能页面菜单，包括网站首页、自习室信息、注册登录、个人中心、后台登录。 学生用户通过账户账号登录，登录后具有所有的操作权限，如果没有登录，不能在线预约。学生用户退出系统将注销个人的登录信息。 管理员通过后台的登录页面，选择管理员权限后进行登录，管理员的权限包括轮播公告管理、老师学生信息管理和信息审核管理，管理员管理后点击退出，注销登录信息。 管理员用户具有在线交流的管理，自习室信息管理、自习室预约管理。 在线交流是对前台用户留言内容进行管理，删除留言信息，查看留言信息。

    面向基层就业个性化大学生服务平台(源码+数据库+论文+ppt)java开发springboot框架javaweb，可做计算机毕业设计或课程设计

    面向基层就业个性化大学生服务平台(源码+数据库+论文+ppt)java开发springboot框架javaweb，可做计算机毕业设计或课程设计 【功能需求】 面向基层就业个性化大学生服务平台(源码+数据库+论文+ppt)java开发springboot框架javaweb，可做计算机毕业设计或课程设计 面向基层就业个性化大学生服务平台中的管理员角色主要负责了如下功能操作。 （1）职业分类管理功能需求：对职业进行划分分类管理等。 （2）用户管理功能需求：对用户信息进行维护管理等。 （3）职业信息管理功能需求：对职业信息进行发布等。 （4）问卷信息管理功能需求：可以发布学生的问卷调查操作。 （5）个性化测试管理功能需求：可以发布个性化测试试题。 （6）试题管理功能需求：对测试试题进行增删改查操作。 （7）社区交流管理功能需求：对用户的交流论坛信息进行维护管理。 面向基层就业个性化大学生服务平台中的用户角色主要负责了如下功能操作。 （1）注册登录功能需求：没有账号的用户，可以输入账号，密码，昵称，邮箱等信息进行注册操作，注册后可以输入账号和密码进行登录。 （2）职业信息功能需求：用户可以对职业信息进行查看。 （3）问卷信息功能需求：可以在线进行问卷调查答卷操作。 （4）社区交流功能需求：可以在线进行社区交流。 （5）个性化测试功能需求：可以在线进行个性化测试。 （6）公告资讯功能需求：可以查看浏览系统发布的公告资讯信息。 【环境需要】 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.数据库：MySql 5.7/8.0等版本均可； 【购买须知】 本源码项目经过严格的调试，项目已确保无误，可直接用于课程实训或毕业设计提交。里面都有配套的运行环境软件，讲解视频，部署视频教程，一应俱全，可以自己按照教程导入运行。附有论文参考，使学习者能够快速掌握系统设计和实现的核心技术。

    三菱Fx3u程序：自动检测包装机电机控制模板，PLC脉冲与伺服定位，手自动切换功能,三菱Fx3u程序：自动检测包装机电机控制模板-涵盖伺服定位与手自动切换功能,三菱Fx3u程序，自动检测包装机 该

    三菱Fx3u程序：自动检测包装机电机控制模板，PLC脉冲与伺服定位，手自动切换功能,三菱Fx3u程序：自动检测包装机电机控制模板——涵盖伺服定位与手自动切换功能,三菱Fx3u程序，自动检测包装机。 该程序六个电机，plc本体脉冲控制3个轴，3个1pg控制。 程序内包括伺服定位，手自动切，功能快的使用，可作为模板程序，很适合新手。 ,三菱Fx3u程序; 自动检测包装机; 六个电机; PLC脉冲控制; 伺服定位; 手自动切换; 功能快捷键; 模板程序。,三菱Fx3u PLC控制下的自动包装机程序：六电机伺服定位与手自动切换模板程序

    基于多尺度集成极限学习机回归 附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    计及信息间隙决策与多能转换的综合能源系统优化调度模型：实现碳经济最大化与源荷不确定性考量,基于信息间隙决策与多能转换的综合能源系统优化调度模型：源荷不确定性下的高效碳经济调度策略,计及信息间隙决策及多

    计及信息间隙决策与多能转换的综合能源系统优化调度模型：实现碳经济最大化与源荷不确定性考量,基于信息间隙决策与多能转换的综合能源系统优化调度模型：源荷不确定性下的高效碳经济调度策略,计及信息间隙决策及多能转的综合能源系统优化调度 本代码构建了含风电、光伏、光热发电系统、燃气轮机、燃气锅炉、电锅炉、储气、储电、储碳、碳捕集装置的综合能源系统优化调度模型，并考虑P2G装置与碳捕集装置联合运行，从而实现碳经济的最大化，最重要的是本文引入了信息间隙决策理论考虑了源荷的不确定性（本代码的重点）与店铺的47代码形成鲜明的对比，注意擦亮眼睛，认准原创，该代码非常适合修改创新，，提供相关的模型资料 ,计及信息间隙决策; 综合能源系统; 优化调度; 多能转换; 碳经济最大化; 风电; 光伏; 燃气轮机; 储气; 储电; 储碳; 碳捕集装置; P2G装置联合运行; 模型资料,综合能源系统优化调度模型：基于信息间隙决策和多能转换的原创方案

    IPG QCW激光模块电源驱动电路设计与实现：包含安全回路、紧急放电回路及光纤互锁功能的多版本原理图解析,IPG QCW激光模块电源驱动电路设计与实现：含安全回路、紧急放电及光纤互锁等多重保护功能的原

    IPG QCW激光模块电源驱动电路设计与实现：包含安全回路、紧急放电回路及光纤互锁功能的多版本原理图解析,IPG QCW激光模块电源驱动电路设计与实现：含安全回路、紧急放电及光纤互锁等多重保护功能的原理图解析,IPG QCW激光模块电源驱动电路， 包含安全回路，紧急放电回路，光纤互锁回路等， 元件参数请根据实际设计适当调整，此电路仅供参考，不提供pcb文件 原理图提供PDF和KICAD两个版本。 ,IPG激光模块; QCW激光电源驱动; 安全回路; 紧急放电回路; 光纤互锁回路; 原理图PDF和KICAD版本。,IPG激光模块电源驱动电路图解：含安全与紧急放电回路

    基于LSSVM的短期电力负荷预测模型及其性能评估：结果揭露精确度与误差分析,LSSVM在短期电力负荷预测中的结果分析：基于均方根误差、平均绝对误差及平均相对百分误差的评估 ,LSSVM最小二乘支持向量

    基于LSSVM的短期电力负荷预测模型及其性能评估：结果揭露精确度与误差分析,LSSVM在短期电力负荷预测中的结果分析：基于均方根误差、平均绝对误差及平均相对百分误差的评估。,LSSVM最小二乘支持向量机做短期电力负荷预测。 结果分析 均方根误差(RMSE)：0.79172 平均绝对误差（MAE）：0.4871 平均相对百分误差（MAPE）：13.079% ,LSSVM（最小二乘支持向量机）；短期电力负荷预测；均方根误差（RMSE）;平均绝对误差（MAE）;平均相对百分误差（MAPE）,LSSVM在电力负荷短期预测中的应用及性能分析

    libmtp-examples-1.1.14-1.el7.x64-86.rpm.tar.gz

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

    《基于 Transformer 的光学字符识别模型》（毕业设计，源码，教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip

    资源内项目源码是均来自个人的课程设计、毕业设计或者具体项目，代码都测试ok，都是运行成功后才上传资源，答辩评审绝对信服的，拿来就能用。放心下载使用！源码、说明、论文、数据集一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 4、如有侵权请私信博主，感谢支持

    2023-04-06-项目笔记 - 第四百一十六阶段 - 4.4.2.414全局变量的作用域-414 -2025.02.21

    2023-04-06-项目笔记-第四百一十六阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.414局变量的作用域_414- 2025-02-21

    MINIST数据集和春风机器学习框架

    MINIST数据集和春风机器学习框架

    ibus-table-chinese-wu-1.4.6-3.el7.x64-86.rpm.tar.gz

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

    宿舍管理系统(源码+数据库+论文+ppt)java开发springboot框架javaweb，可做计算机毕业设计或课程设计

    宿舍管理系统(源码+数据库+论文+ppt)java开发springboot框架javaweb，可做计算机毕业设计或课程设计 【功能需求】 系统拥有管理员和学生两个角色，主要具备系统首页、个人中心、学生管理、宿舍信息管理、宿舍分配管理、水电费管理、进入宿舍管理、出入宿舍管理、维修信息管理、卫生信息管理、考勤信息管理、留言板、交流论坛、系统管理等功能模块。 【环境需要】 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.数据库：MySql 5.7/8.0等版本均可； 【购买须知】 本源码项目经过严格的调试，项目已确保无误，可直接用于课程实训或毕业设计提交。里面都有配套的运行环境软件，讲解视频，部署视频教程，一应俱全，可以自己按照教程导入运行。附有论文参考，使学习者能够快速掌握系统设计和实现的核心技术。

    基于智能算法的无人机路径规划研究 附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    人凤飞飞凤飞飞是粉色丰富

    人凤飞飞凤飞飞是粉色丰富

    2024蓝桥杯嵌入式学习资料

    2024蓝桥杯嵌入式学习资料

    image_download_1740129191509.jpg

    image_download_1740129191509.jpg

Magicbox
Global site tag (gtag.js) - Google Analytics