0

考虑这个示例代码：

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中更快更有效？

4

2 回答 2

7 
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.';

证明

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

于 2013-05-14T06:17:51.433 回答
-1

其中最快的是：

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

因为当您使用 JQuery 追加任何元素时，它会遍历整个 DOM 以搜索您要追加的特定 ID，而使用原生 JS 时，它将遍历直到找到您要追加的元素的第一次出现。

例如：

  <div id="a">
      <div id="b">
           <div id="c"></div>
      </div>
 </div>

假设您想在“b”中附加一些文本，JQuery 将遍历到“c”，而原生 JS 将仅遍历到“b”[该 ID 的第一个实例]

于 2013-05-14T06:35:18.477 回答