一行代码dom操作在不同浏览器下的效率不同

本文探讨了在IE11等IE版本中使用jQuery的innerHTML, html(), append()方法为Select元素动态添加大量数据时的性能差异,并通过对比分析发现不同浏览器表现不一。着重介绍了IE9以上版本在处理此类操作时的性能瓶颈,以及IE8以下版本的相对优势。文章旨在帮助开发者理解并优化在IE环境下Select元素加载效率。

项目的的一个问题,给一个select动态添加数据,js代码如下

            var strSelect="<option></option>";
            for(var i =0;i < organizationList.length;i++){
                strSelect +='<option value='+organizationList[i].VALUE+'>'+organizationList[i].NAME+'</option>';
            }
            console.time("selectCmdFill2 jquery append") ;
            $(obj).append(strSelect);
             console.timeEnd("selectCmdFill2 jquery append") ;


在IE11浏览器分别尝试了innerHTML,jquery 的html()和append(),但是加载时间差的不是很多,数据量一千条左右,都需要3.5秒左右,时间如下

jQuery的版本是1.7.2

innerHTML


jquery.append()

jquery.html()




之后又测试了在不同浏览器及IE不同版本下的不同

Chrome


Firefox


IE11


IE10


IE9


IE8


IE7



略感奇怪,IE9以上包括Edge都很忙,IE8以下(包含IE8)的却明显快了很多。

后面如果知道了原因所在再补充上来

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值