最近我做了很多模态窗口弹出之类的事情,为此我使用了jQuery。我用来在页面上创建新元素的方法基本上是这样的:

$("<div></div>");

然而,我感觉这并不是最好或最有效的方法。从性能的角度来看,用jQuery创建元素的最佳方法是什么?

这个答案有以下建议的基准。


当前回答

这不是问题的正确答案,但我仍然想分享这个……

使用document.createElement('div')而跳过JQuery将大大提高性能,当你想要动态制作大量元素并附加到DOM时。

其他回答

从CPU的角度来看,您不需要一个极少执行的操作的原始性能。

我使用$(document.createElement('div'));基准测试表明这种技术是最快的。我推测这是因为jQuery不需要将其标识为元素并自己创建元素。

您应该使用不同的Javascript引擎运行基准测试,并根据结果来衡量您的受众。然后再做决定。

您必须首先理解,在使用jQuery的上下文中,元素创建性能的重要性是无关紧要的。

请记住,创建一个元素没有真正的目的,除非您真的要使用它。

你可能很想测试$(document.createElement('div')) vs. $('<div>')之类的东西,并从使用$(document.createElement('div'))中获得巨大的性能提升,但这只是一个还不在DOM中的元素。

然而,在一天结束的时候,你还是会想要使用元素,所以真正的测试应该包括f.ex. appendto ();

让我们看看,如果你将以下内容进行对比测试:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

你会注意到结果会有所不同。有时一种方法比另一种更好。这只是因为你的电脑上后台任务的数量随着时间的推移而变化。

在这里测试自己

因此,在一天结束时,您确实希望选择最小和最可读的方式来创建元素。这样,至少您的脚本文件将尽可能小。在性能方面,这可能是比在DOM中使用元素之前创建元素的方式更重要的因素。

实际上,如果你使用$('<div>'), jQuery也会使用document.createElement()。

(看一下第117行)。

有一些函数调用开销,但除非性能非常关键(您要创建数百[数千]个元素),否则没有太多理由恢复到纯DOM。

只是为一个新网页创建元素可能是一种情况下,你最好坚持用jQuery的方式做事情。

如果您有很多HTML内容(不仅仅是一个div),您可以考虑将HTML构建到隐藏容器中的页面中,然后更新它并在需要时使其可见。这样,浏览器就可以预先解析大部分标记,避免在调用时被JavaScript缠住。希望这能有所帮助!