随笔-193  评论-715  文章-1  trackbacks-0

同事写了段JQuey的代码,在某些机器上,会出现IE假死的性能问题。

我测试了一下代码花费的时间,在我的机器上,会花费600多毫秒,但在某些机器上会花费6秒多(10倍的增长),这样就导致了IE的假死。而且发现与IE版本无关,在大多数机器上会都只需要600多毫秒,不过CPU会有10%以上的瞬间提长。

先来看看出问题的代码:

$(".eXtremeTable").replaceWith($(html).find(".eXtremeTable"));
$(
"#levelGroup").replaceWith($(html).find("#levelGroup"));
$(
"#scriptDiv").replaceWith($(html).find("#scriptDiv"));
其实这段代码很简洁,只是将用AJAX取过来的数据替换一部分当前页面的数据,但性能确实不够好。

开始找原因,看看到底是什么慢?
$(".eXtremeTable").replaceWith($(html).find(".eXtremeTable"));
将此行代码分拆,逐元素去分析各自花费的时间:
$(".eXtremeTable")  花费20毫秒左右;
$(html).find(".eXtremeTable")  花费200毫秒左右;
replaceWith()  花费10毫秒左右;
不难定位到是由于$(html).find(".eXtremeTable")这种方式引起的。
(这都是在我机器上的测试结果,而且每次可能不完全一样)

简单的可以这样优化:
var newPage=$(html);
$(
".eXtremeTable").replaceWith(newPage.find(".eXtremeTable"));
$(
"#levelGroup").replaceWith(newPage.find("#levelGroup"));
$(
"#scriptDiv").replaceWith(newPage.find("#scriptDiv"));
但仔细想想,这样仍然会造成在某些机器上2秒以上的时间消耗,照样是不可接受的。

遂采用比较原始的办法,修改源程序如下:
     var tab='<span id=\"data\">';
            
var pos=html.indexOf(tab)
            
var content=html.substr(pos+tab.length);
            
var pos2=content.indexOf('</span>');
            
var content=content.substr(0,pos2);
            document.getElementById(
"data").innerHTML=content;
           
// $(".eXtremeTable").replaceWith($(html).find(".eXtremeTable"));
          
            var counter='<td id=\"counter\" align=\"right\" width=\"300\">';
            pos
=html.indexOf(counter)
            content
=html.substr(pos+counter.length);
            pos2
=content.indexOf('</table>');
            
var content=content.substr(0,pos2+'</table>'.length);
            document.getElementById(
"counter").innerHTML=content;
           
// $("#levelGroup").replaceWith($(html).find("#levelGroup"));

            var sel='<div id=\"scriptDiv\" style=\"display:none;\">'
            pos
=html.indexOf(sel)
            content
=html.substr(pos+sel.length);
            pos2
=content.indexOf('</div>');
            
var content=content.substr(0,pos2+'</div>'.length);
            document.getElementById(
"scriptDiv").innerHTML=content;            
           
// $("#scriptDiv").replaceWith($(html).find("#scriptDiv"));
现在此段代码花费的时间几乎为0毫秒。

OK,IE再也不假死了。

问题分析:
原因应该就出在jQuery(html)这个方法上,官方文档解释如下:
根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。 
你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制,可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $(
"<span/>") 或 $("<span></span>") ,但不推荐 $("<span>"
--------------------------------------------------------------------------------
Create DOM elements on
-the-fly from the provided String of raw HTML. 
You can pass 
in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag. 
因为要构建一个完整的DOM,所以需要花费较长的时间。

至于为何在某些机器上出现高达6秒多的时间消耗,百思不得其解,请高手指点!

特别提示:
本Blog所有内容不得随意转载,版权属于作者所有。如需转载请与作者联系(
fastzch@163.com)。未经许可的转载,本人保留一切法律权益。
posted on 2009-06-14 14:39 Robin's Programming World 阅读(2430) 评论(7)  编辑  收藏 所属分类: 其它

评论:
# re: 一次JQuery性能优化实战 2009-06-15 09:16 | HiMagic!
那你修改后,在别的机器上也是6秒?如果时间还很长,看一下ajax的反应速度。  回复  更多评论
  
# re: 一次JQuery性能优化实战 2009-06-15 09:50 | usherlight
会不会和jquery的版本有关?据说1.3之后的版本改进了dom  回复  更多评论
  
# re: 一次JQuery性能优化实战 2009-06-15 10:07 | Robin's Java World
@HiMagic!
修改后所有的机器都可以达到几乎0秒!
因为不需要构建DOM了。  回复  更多评论
  
# re: 一次JQuery性能优化实战 2009-06-15 11:02 | kane
不需要构造dom却使用了构造dom的方法,而没有预料到构造dom是很耗时的操作。所以说我们使用工具,只有深入了解其特性才能正确地使用  回复  更多评论
  
# re: 一次JQuery性能优化实战 2009-06-15 14:43 | Robin's Java World
@kane
说得很有道理。  回复  更多评论
  
# re: 一次JQuery性能优化实战 2009-06-15 15:47 | metadmin
真个页面是DOM吗?如果是,这无法接受。我更倾向于gwt那样,在某个div里面嵌入ajax。


---------------------------------
解开权限与业务耦合,提高开发效率
细粒度权限管理软件 试用版下载
http://www.metadmin.com

  回复  更多评论
  
# re: 一次JQuery性能优化实战 2016-01-04 17:42 | bns
不需要构建DOM  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: