");..."> ");..."/> ");..."> ");...">

使用jQuery创建HTML元素的最有效方法是什么?

JavaScript

小胖蛋蛋

2020-03-16

最近,我一直在做很多模态窗口弹出窗口,而我没有使用jQuery。我用来在页面上创建新元素的方法绝大多数都是这样的:

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

但是,我感到这不是执行此操作的最佳或最有效的方法。从性能的角度来看,在jQuery中创建元素的最佳方法是什么?

该答案具有以下建议的基准。

第1703篇《使用jQuery创建HTML元素的最有效方法是什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
村村神无 2020.03.16

有人已经做了一个基准测试: jQuery document.createElement是否等效?

$(document.createElement('div')) 是最大的赢家。

Stafan西门 2020.03.16

我认为您正在使用最佳方法,尽管可以将其优化为:

 $("<div/>");
逆天猿理查德 2020.03.16

从CPU的角度来看,您不需要从原始操作中获得很少性能的原始性能。

小卤蛋樱 2020.03.16

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

您应该真正使用不同的Javascript引擎运行基准测试,并用结果权衡受众。从那里做出决定。

Davaid番长 2020.03.16

这不是问题的正确答案,但我还是想分享一下...

document.createElement('div')当您要动态制作大量元素并追加到DOM时,使用just 和skip JQuery将大大提高性能。

逆天十三 2020.03.16

如果您有很多HTML内容(不只是一个div),则可以考虑将HTML构建到隐藏容器内的页面中,然后对其进行更新并在需要时使其可见。这样,您的标记的很大一部分就可以由浏览器预先解析,并且避免在调用时陷入JavaScript的泥潭。希望这可以帮助!

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android