创建HTML元素的最快方法？

Question

考虑这个示例代码:

function appendText()
{
    var txt1="<p>Text.</p>";               // Create element with HTML 

    var txt2=$("<p></p>").text("Text.");   // Create with jQuery

    var txt3=document.createElement("p");  // Create with DOM
    txt3.innerHTML="Text.";

    $("p").append(txt1,txt2,txt3);         // Append the new elements
}

在上面的代码中,我使用三种不同的技术创建了段落.我想知道哪一个在phonegap中速度更快,效率更高？

Answer 1

var txt1="<p>Text.</p>";               // Create element with HTML 
// actually: $('<p>Text.</p>');

在这种情况下,jQuery将创建一个<div>元素,然后将其.innerHTML属性设置为您传递的HTML字符串.这不是特别快.

var txt2=$("<p></p>").text("Text.");   // Create with jQuery

这要快得多,因为jQuery经过优化可以直接映射到createElement()你正在使用的.text()所以不需要额外的解析.

var txt3=document.createElement("p");  // Create with DOM
txt3.innerHTML="Text.";

这避免了两种方法的某些部分,应该更快,但不是因为你正在使用.innerHTML必须先解析.

最快的将是:

var txt4 = document.createElement('p');
txt4.textContent = 'Text.';

证明

请注意,当我说快时,它是基于这个特定测试用例的结果; 通常你不会达到这个重要的地步.此外,本机版本要快得多,以至于必须进行单独的测试才能获得其他测试用例的更准确结果:)