EasyUI：DataGrid在IE下的性能问题

标签：

现象：EasyUI的DataGrid组件在IE下性能比较差，如加载1000条数据就耗时10几秒，加载10000条数据就可能让浏览器崩溃，归咎原因，是DataGrid主要使用了jQuery的html()方法进行渲染，而这个方法却存在一定的性能缺陷，下面就html()和innerHTML的优缺点做一下分析：

innerHTML属性的优点

• innerHTML是w3c制定的行业标准，几乎所有浏览器都做了支持；
• 作为原生支持，innerHTML在各主流浏览器下的执行效率是很高的；

innerHTML属性的缺点

　　虽然各个浏览器都实现了innerHTML，但是各个浏览器下innerHTML的行为却有着差异，较为另类的当属IE，IE不同版本表现得也不一样，这样导致innerHTML在IE下，用起来有很多不方便的地方：

　　IE6-IE8处理html5标签和属性问题

　　　　IE6,IE7,IE8浏览器设置innerHTML属性时会忽略html5属性和标签。IE6-IE8不是不支持html5么？在这些版本IE里设置html5标签有什么意义呢？答案很简单，就算不支持html5的一些效果，至少要让网页的大体布局能够正常显示出来。解决方案网上有很多资料，也有现成的脚本插件解决这个问题的，主体思路就是利用document.createElement方法创建出html5里的标签来，createElement接口是可以接纳任何标签的。

　　　　IE6-IE7处理href和src属性问题

　　　　标准模式下，IE6,IE7设置innerHTML属性时会把href,src属性自动转为绝对路径；在IE的怪异模式(Quirks)下，几乎所有IE版本都会不自觉地转换路劲为绝对路径。

html()函数的优点

　　看看innerHTML属性的缺点，就知道jQuery中html()函数的优点了，它是兼容所有浏览的，不存在html5标签不支持的问题，不存在href,src属性被转换的问题，不存在某些标签设置不了html串的问题，总之就是一句话，用它基本就万事无忧了，至少功能的实现上是这样。

html()函数的缺点

看来jQuery的html()函数似乎完美无限了，其实不然，它的完美只表现它的功能上，它兼容了所有浏览器，包括IE。但偏偏也是IE，尽管兼容了，性能并不乐观，如果使用html()函数设置大数据量的html串的话，那将是场灾难。

在IE下，html()函数的性能到底低到什么程度？电脑的配置为"i5 四核，8G内存，IE9"，测试了用html()函数设置2000行4列的table，其平均耗时达到27秒！具体什么原因导致html()在IE下这么慢，个人粗略看过源码，觉得使用try方式是主要原因之一。

　　解决办法：以EasyUI-1.4.3为例，在10302行，把

　　　　　　　$(_77c).html(this.renderTable(_77b,0,rows,_77d));改为

　　　　　　　$(_77c)[0].innerHTML = this.renderTable(_77b,0,rows,_77d);

EasyUI：DataGrid在IE下的性能问题

标签：

原文地址：http://www.cnblogs.com/asgard-thor/p/4932666.html