ie innerHTML极慢的问题

madpc 2011-05-30 04:12:14

doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

此模式下

网页中有一滑动条

滑动时(mousemove) 用innerHTML去更新一个 span 中的文字

文字非常少，就是一个百分比

火狐非常快，ie7极慢，几乎完全停顿

换用 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 就会慢得很快

求解决之道, 文档头不能换

...全文

363 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

madpc 2011-06-08

打赏
举报

[Quote=引用 12 楼 jparser 的回复:]

浏览器对文档解析（包括JS,CSS）都是单线程的，但我不知道对embed元素的解析是怎么样的，又是怎么执行embed元素的。不知道有没人能分析分析。
[/Quote]

怀疑 ie 在这方面是有什么 bug

madpc 2011-06-08

打赏
举报

[Quote=引用 11 楼 falconshh 的回复:]

那是机器性能问题，
[/Quote]

这不能解释为什么
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
时ie很快

也不能解释为什么其它浏览器，即使
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
也很快

madpc 2011-06-08

打赏
举报

[Quote=引用 13 楼 brainwkernighan 的回复:]

影响网页性能的JS方法也只有查找Document.getElementById,或者createElement这种类别的。innerHtml这种类别的方法即使不支持也不会变慢
[/Quote]

>>ie7就是把 innerHTML 改为添加 TextNode 解决的，而且变得很快很平滑

还是有关的，尤其在性能敏感的时候, innerHTML显然还有语法分析之类的工作

brainwkernighan 2011-06-08

打赏
举报

影响网页性能的JS方法也只有查找Document.getElementById,或者createElement这种类别的。innerHtml这种类别的方法即使不支持也不会变慢

JParser 2011-06-08

打赏
举报

浏览器对文档解析（包括JS,CSS）都是单线程的，但我不知道对embed元素的解析是怎么样的，又是怎么执行embed元素的。不知道有没人能分析分析。

香椿炒鸡蛋 2011-06-08

打赏
举报

那是机器性能问题，

madpc 2011-06-08

打赏
举报

刚刚发现，页面上有一个flash，有关系



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<body>

	<center>

		current pos:<span id="label"></span>

		<script type="text/javascript">

			var label=document.getElementById("label");

			function changetext(e){

			label.innerHTML=e.clientX+","+e.clientY;

			}

		</script>

		<div style="background:#555;height:500px;width:500px" onmousemove="changetext(window.event)">

			xdfsf

		</div>

		<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="ac_flash1" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="770" height="540" id="nim-game" align="middle">

      <param name="allowScriptAccess" value="sameDomain" />

      <param name="movie" value="some.swf" />

      <param name="quality" value="best" />

      <param name="bgcolor" value="#FFFFFF" />

      <embed src="some.swf" id="ac_flash2" quality="best" bgcolor="#FFFFFF" width="770" height="540" name="pretest-measurement" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

    </object>		

	</center>

</body>

js 跟 flash 并无关系， flash 本身也不卡, 把这个 flash 去掉就快了，很晕

madpc 2011-06-08

打赏
举报

[Quote=引用 8 楼 jparser 的回复:]

innerHTML property works a little different in Internet Explorer than in other browsers. If the contents of an element are set with the innerHTML property, Internet Explorer removes white spaces fro……
[/Quote]

确认是 innerHTML 影响的, 之前 ie7就是把 innerHTML 改为添加 TextNode 解决的，而且变得很快很平滑

JParser 2011-06-08

打赏
举报

innerHTML property works a little different in Internet Explorer than in other browsers. If the contents of an element are set with the innerHTML property, Internet Explorer removes white spaces from the beginning and end of the specified value and collapses adjacent white spaces into a single space.
虽然说IE会进行一些对空格的处理，也不至于会影响很多的速度。我觉得可以是你前面程序的速度影响的。

licip 2011-06-08

打赏
举报

innerHTML会慢，不应该吧，那只能求高手解答一下了。

madpc 2011-06-08

打赏
举报

发现ie7下用createTextNode 可以解决，如果是ie8一样极慢，看来只能用ie7模式了?

madpc 2011-05-30

打赏
举报

[Quote=引用 3 楼 luxu001207 的回复:]

var text=document.createTextNode("xxx");
spanObj.appendChild(text);

换用createTextNode更新试试
[/Quote]

看来也只能用 createTextNode 了, 这个还是很快的

madpc 2011-05-30

打赏
举报





<div style="width:400px;padding-top:3px;border:0px solid;">

	<span style="float:left;line-height:12px;">Size: </span>



	<div id="slider" class="slider" style="margin:auto;float:left;text-align:left;"></div>

	<span id="trace" style="float:left;margin-left:10px;line-height:12px;width:200px;border:1px solid;"></span>



</div>



<script>

var sliderbar=new SliderBar(document.getElementById("slider"));



sliderbar.onChange=function(a){

  document.getElementById("trace").innerHTML=a+"%";

}

</script>