html里jquery的append效率问题

Posted 2023-05-06

append的第一次追加效率低吗？
如下是分析引擎搜索结果页面的部分代码
功能：获取源码里的body之内的元素
function sch_out_div_append(html_src)
try
var body_src = get_body_inerHtml(html_src);
write_log_dbg("sch_ajax_succ af get_body_inerHtml " + getTimeFix())
$("#sch_out").append(body_src);
write_log_dbg("sch_ajax_succ af sch_out append" + getTimeFix())
catch (e)
alert(e.message);


得到的日志时间是：
sch_ajax_succ b4 20140930140535
sch_ajax_succ af get_body_inerHtml 20140930140536
sch_ajax_succ af sch_out append20140930140558
sch_ajax_succ af append 20140930140558
sch_ajax_succ b4 20140930140558
sch_ajax_succ af get_body_inerHtml 20140930140558
sch_ajax_succ af sch_out append20140930140558
sch_ajax_succ af append 20140930140558
sch_ajax_succ b4 20140930140558
sch_ajax_succ af get_body_inerHtml 20140930140558
sch_ajax_succ af sch_out append20140930140558
sch_ajax_succ af append 20140930140558
--------------------------------------------------------------
sch_ajax_succ b4 20140930140606
sch_ajax_succ af get_body_inerHtml 20140930140606
sch_ajax_succ af sch_out append20140930140606
sch_ajax_succ af append 20140930140606
sch_ajax_succ b4 20140930140606
sch_ajax_succ af get_body_inerHtml 20140930140606
sch_ajax_succ af sch_out append20140930140607
sch_ajax_succ af append 20140930140607
sch_ajax_succ b4 20140930140607
sch_ajax_succ af get_body_inerHtml 20140930140607
sch_ajax_succ af sch_out append20140930140607
sch_ajax_succ af append 20140930140607
=======
结论是第一次append耗时较长，请问为什么？
功能：获取源码里的body之内的元素,
并append到id为sch_out 的元素中

多次测试发现，第一次append要耗时22秒，
请问有熟悉网页的朋友知道这是为什么？

append的实现就是 innerHtml

相当于动态改变页面内容，要重新绘制。
你说的要22秒，我也太离谱了吧!!!!

以前写了一个大页面内容较多的，就是是5、6秒。
所以如果页面没有动态需求的话，尽量不要用append。
还要Append 你可以一块一块的加，比如：
<div id=sch_out>
<div id=s1></div>

<div id=s2></div>
<div id=s3></div>
....

</div>
$("#sch_out").append(s4);

$("#sch_out").append(s5);
......
这样页面改动较小，速度较快。

日志的时间，可以多加一个变量，打印差值就可以了，这样比较直观。追问

谢谢你的回答
你的分块append应该会影响效率的，具体我没测试，但是有网文分析过
日志时间本来是文件后缀用的，这边调试就将就用了
我在多次测试后
发现连续两次以内的append的基本就是1秒
而连续3次或以上的第一次append就要22秒，其后的append又正常了
实在是想不通，如果有熟悉的请指点
非常谢谢所有回复的同学
----又测试，不一定连续2次以内的append就正常
有可能也是需要22秒
求高人指点

参考技术A 可能因为 body_src 的HTML层级结构太复杂了，append 的速度只适合少量的小层级的DOM插入 参考技术B 你说的是毫秒吧。我在Chrome里测试的结果，也没有那么大的差距啊。
for (i = 0; i < 20; i++)
$('.guide-msg').append('<li>Item' + i + '</li>');
console.log("i=" + i + ":"+ (new Date).getMilliseconds());

>>>>>>>>>>>>>
i=0:121
i=1:122
i=2:123
i=3:123
i=4:124
i=5:125
i=6:126
i=7:126
i=8:128
i=9:129
i=10:129
i=11:130
i=12:130
i=13:131
i=14:131
i=15:132
i=16:132
i=17:133
i=18:133
i=19:134追问

非常谢谢你的回复
你看我下面回复者的追问就知道
我也很奇怪
不明原因才问你们高手的

追答

写法很重要。
firefox下刚才的写法需要17.281ms, 内部调用函数次数600回
而下面这种写法需要7.048ms, 内部调用函数次数125回
这就是差距----------------------------------------------------
var toInsert = "";
for (i = 0; i Item' + i + '';
console.log("i=" + i + ":"+ (new Date).getMilliseconds());

$('.guide-msg').append(toInsert);

参考技术C 我想是不是第一次append，后台做了很多初始化工作，比如实例化了一个string类型，初始化string的大小长度，也不是很懂这个

jQuery、html5、append()/appendTo() 和 IE

【中文标题】jQuery、html5、append()/appendTo() 和 IE

【英文标题】：jQuery, html5, append()/appendTo() and IE

【发布时间】：2010-11-14 12:55:44

【问题描述】：

如何复制：

创建一个 html5 页面。

确保您已添加来自 remysharp.com/2009/01/07/html5-enabling-script/ 的脚本，以便 IE 注意到标签。

创建一个硬编码的<section id='anything'></section> 标签。

使用 jQuery 1.3.2，附加另一个部分标签：$('#anything').append('<section id="whatever"></section>'); 到目前为止，所有浏览器都可以正常工作。

重复上一步。 $('#whatever').append('<section id="fail"></section>'); 这是 IE6/7 失败的地方。 Firefox/Safari 将继续工作。

错误

想法

可能是 IE6/7 无法处理 HTML5 部分标签。我这样说是因为当我将第 4 步从 <section> 更改为 <div> 时，IE6/7 将开始工作。

如果我使用 document.createElement() 并创建我的新元素，它可以工作，但似乎 jQuery 的 append() 对 html5 元素有问题。

【问题讨论】：

到目前为止，还没有找到答案。我切换回 xhtml 1.0 strict。这是我唯一的问题。

【参考方案1】：

在开发 IE6 和 7 时，HTML5 还不存在。

【讨论】：

对我来说似乎是常识

不支持多年后构思的功能集并不是被动攻击性的；也许它没有想象力或令人满意，但它绝对不是被动攻击。这只是一个事实陈述。

是的答案与问题并不真正相关。

【参考方案2】：

各位，请保持冷静。查看http://html5shiv.googlecode.com/svn/trunk/html5.js，html5 shiv 确实成功地欺骗了 IE6/7 执行 createElement()。

在上面的 karbassi 的情况下，人们希望 IE6/7 会首先关注 html5 shiv，然后每次都按预期执行 jQuery append()。附加到附加时，它显然不会按该顺序执行操作。这很容易知道。

【讨论】：

这实际上是错误的。 HTML5 shiv 没有修复 IE6-8 jQuery.append 错误。 shiv 修复了样式问题。这是由于 .innerHTML 中的一个错误，正如我在此处的回答中所解释的那样：***.com/questions/1191164/…

【参考方案3】：

HTML5 shiv 是否处理innerHTML？ IE 很可能将innerHTML 与createElement 之类的DOM 方法区别对待，并且阅读jQuery 源代码（我推荐），看来您的代码正在触发innerHTML 而不是DOM 方法。您可以尝试将<section id="fail"></section> 重写为<section id="fail" />（乍一看应该会在清理过程中触发DOM 方法），看看它的行为是否不同。如果是这样，您已经确定了 jQuery 中的一个错误和 HTML5 shiv 的限制。如果没有，至少有一种可能划掉。

【讨论】：

我尝试了您的建议，但没有任何区别。我在 jQuery 错误跟踪器中进行了检查，没有任何类似的报告。由于它是 html5，我知道没有太多的支持/想法。

【参考方案4】：

该错误存在于 IE 的 innerHTML 实现中 - 出于某种原因，它不喜欢通过 innerHTML 插入的“未知”元素 - 而 DOM 脚本很好。

jQuery 使用创建一个保持 div，然后通过 innerHTML 放入您要附加的标记。 IE 现在将未知元素视为两个新的损坏元素，即 <article>content</article> 被视为 ARTICLE、#text、/ARTICLE，由 innerHTML borking 引起。

这是一个例子，在 IE 中查看，你会看到 innerHTML 插入方法错误地报告 3 个节点插入到 div 中：http://jsbin.com/olizu

没有 IE 的屏幕截图：http://leftlogic.litmusapp.com/pub/2c3ea3e

【讨论】：

更新：截至目前，html5shiv 已经修复了这个 innerHTML 问题，所以如果您已经在使用它，只需更新它并做好您的工作，否则，您应该使用它。

【参考方案5】：

我也遇到过这个问题。解决方案似乎是在已附加到文档的元素上使用 innerHTML，然后提取创建的节点。我创建了这个 li'l 函数来做到这一点：

http://jdbartlett.github.com/innershiv/

【讨论】：

更新：截至目前，html5shiv 已经修复了这个 innerHTML 问题，所以如果您已经在使用它，只需更新它并做好您的工作，否则，您应该使用它。