使用本机javascript设置id是否比使用jQuery快？

我知道在javascript中设置元素id的两种方法如下：

var myDiv = document.createElement('div');
$(myDiv).attr('id', 'myDiv');

var myDiv = document.createElement('div');
myDiv.id = 'myDiv';

---

我猜第二个更好，因为它不使用jQuery，这是真的吗？

是的，在这里，香草javascript解决方案将是最快的（尽管在本例中我们讨论的是极端微秒）

函数调用是昂贵的。当您调用

.attr

时，您正在进行一个函数调用（在jQuery库中定义），然后基本上执行本机方法

---

正如@Vohuman在对这个答案的评论中指出的，您甚至还需要为传递给它的元素创建jQuery实例。即使从jQuery开始，也必须包括jQuery库，这也需要花费时间。

是的，这里的普通javascript解决方案将是最快的（尽管在本例中我们谈论的是极端微秒）

函数调用是昂贵的。当您调用

.attr

时，您正在进行一个函数调用（在jQuery库中定义），然后基本上执行本机方法

---

正如@Vohuman在对这个答案的评论中指出的，您甚至还需要为传递给它的元素创建jQuery实例。即使从jQuery开始，也必须包含jQuery库，这也会占用时间。

您可以通过在循环中重复执行来测量函数的持续时间。测量秒数并计算差值。它大约快7.5倍。您可以立即在此处执行测量：

var循环=100000；
var beforeJQuery=Date.now（）；
对于（变量i=0；i
您可以通过在循环中重复执行来测量函数的持续时间。测量秒数并计算差值。它大约快7.5倍。您可以立即在此处执行测量：


var循环=100000；
var beforeJQuery=Date.now（）；
对于（变量i=0；i
大约快10倍

const iterations = 10000;
const myDiv = document.createElement('div');

console.time('jQuery');
  for (let i = 1; i < iterations; i++) {
    $(myDiv).attr('id', 'myDiv');
  }
console.timeEnd('jQuery');

const myDiv2 = $(myDiv);
console.time('jQuery with object');
  for (let i = 1; i < iterations; i++) {
    myDiv2.attr('id', 'myDiv');
  }
console.timeEnd('jQuery with object');

const myDiv3 = document.createElement('div');

console.time('Vanila Javascript');
  for (let i = 1; i < iterations; i++) {
    myDiv3.id = 'myDiv';
  }
console.timeEnd('Vanila Javascript');

jQuery: 41.998ms
jQuery with object: 32.513ms
Vanila Javascript: 4.670ms

const迭代次数=10000；
const myDiv=document.createElement（'div'）；
console.time（'jQuery'）；
for（设i=1；i

编辑：

若你们在项目中有jQuery，你们可以在并没有速度差异的情况下使用它。这种微观优化不是麦汁。如果您没有制作Javascript FPS游戏：）

Edit2:@Bergi在计时函数中添加createElement不会显著改变结果，如下所示

const iterations = 10000;

console.time('jQuery');
  const myDiv = document.createElement('div');
  for (let i = 1; i < iterations; i++) {
    $(myDiv).attr('id', 'myDiv');
  }
console.timeEnd('jQuery');


console.time('jQuery with object');
  const myDiv2 = $(document.createElement('div'));
  for (let i = 1; i < iterations; i++) {
    myDiv2.attr('id', 'myDiv');
  }
console.timeEnd('jQuery with object');

console.time('Vanila Javascript');
  const myDiv3 = document.createElement('div');
  for (let i = 1; i < iterations; i++) {
    myDiv3.id = 'myDiv';
  }
console.timeEnd('Vanila Javascript');

jQuery: 35.493ms
jQuery with object: 21.310ms
Vanila Javascript: 4.515ms

const迭代次数=10000；
console.time（'jQuery'）；
const myDiv=document.createElement（'div'）；
for（设i=1；i
大约快10倍

const iterations = 10000;
const myDiv = document.createElement('div');

console.time('jQuery');
  for (let i = 1; i < iterations; i++) {
    $(myDiv).attr('id', 'myDiv');
  }
console.timeEnd('jQuery');

const myDiv2 = $(myDiv);
console.time('jQuery with object');
  for (let i = 1; i < iterations; i++) {
    myDiv2.attr('id', 'myDiv');
  }
console.timeEnd('jQuery with object');

const myDiv3 = document.createElement('div');

console.time('Vanila Javascript');
  for (let i = 1; i < iterations; i++) {
    myDiv3.id = 'myDiv';
  }
console.timeEnd('Vanila Javascript');

jQuery: 41.998ms
jQuery with object: 32.513ms
Vanila Javascript: 4.670ms

const迭代次数=10000；
const myDiv=document.createElement（'div'）；
console.time（'jQuery'）；
for（设i=1；i