Sizzle.getText bugfix#6863

Benchmark created by Ben Barber on

Description

Tests performance of improvements to Sizzle.getText() http://bugs.jquery.com/ticket/6863.

The pull request for this enhancement is at https://github.com/jquery/sizzle/pull/59

Preparation HTML

<div id="bodyContent" style="display:none">
<!-- tagline -->
<div id="siteSub">From Wikipedia, the free encyclopedia</div>
<!-- /tagline -->
<!-- subtitle -->
<div id="contentSub">  (Redirected from <a href="/w/index.php?title=Jquery&amp;redirect=no" title="Jquery">Jquery</a>)</div>

<p><b>jQuery</b> is a <a href="/wiki/Cross-browser">cross-browser</a> <a href="/wiki/JavaScript_library">JavaScript library</a> designed to simplify the <a href="/wiki/Client-side_scripting">client-side scripting</a> of <a href="/wiki/HTML">HTML</a>.<sup id="cite_ref-jquery.com_0-0" class="reference"><a href="#cite_note-jquery.com-0"><span>[</span>1<span>]</span></a></sup> It was released in January 2006 at <a href="/wiki/BarCamp">BarCamp</a> NYC by <a href="/wiki/John_Resig">John Resig</a>. Used by over 43% of the 10,000 most visited websites, jQuery is the most popular <a href="/wiki/JavaScript_library">JavaScript library</a> in use today.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span>[</span>2<span>]</span></a></sup><sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span>[</span>3<span>]</span></a></sup></p>
<p>jQuery is <a href="/wiki/Free_and_open_source_software" title="Free and open source software">free, open source software</a>, <a href="/wiki/Dual-licensing" title="Dual-licensing" class="mw-redirect">dual-licensed</a> under the <a href="/wiki/MIT_License">MIT License</a> and the <a href="/wiki/GNU_General_Public_License#Version_2" title="GNU General Public License">GNU General Public License, Version 2</a>.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span>[</span>4<span>]</span></a></sup> jQuery's syntax is designed to make it easier to navigate a document, select <a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a> elements, create <a href="/wiki/Animation" title="Animation">animations</a>, handle <a href="/wiki/Event_(computing)" title="Event (computing)">events</a>, and develop <a href="/wiki/Ajax_(programming)" title="Ajax (programming)">Ajax applications</a>. jQuery also provides capabilities for developers to create <a href="/wiki/Plug-in_(computing)" title="Plug-in (computing)">plugins</a> on top of the JavaScript library. Using these facilities, developers are able to create <a href="/wiki/Abstraction_(computer_science)" title="Abstraction (computer science)">abstractions</a> for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This contributes to the creation of powerful and dynamic web pages.</p>
<p><a href="/wiki/Microsoft">Microsoft</a> and <a href="/wiki/Nokia">Nokia</a> have announced plans to bundle jQuery on their platforms,<sup id="cite_ref-2008-09-28_4-0" class="reference"><a href="#cite_note-2008-09-28-4"><span>[</span>5<span>]</span></a></sup> Microsoft adopting it initially within <a href="/wiki/Visual_Studio" class="mw-redirect" title="Visual Studio">Visual Studio</a><sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span>[</span>6<span>]</span></a></sup> for use within Microsoft's <a href="/wiki/ASP.NET_AJAX">ASP.NET AJAX</a> framework and <a href="/wiki/ASP.NET_MVC_Framework">ASP.NET MVC Framework</a> while Nokia has integrated it into their Web Run-Time widget development platform.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span>[</span>7<span>]</span></a></sup> jQuery has also been used in <a href="/wiki/MediaWiki">MediaWiki</a> since version 1.16.<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span>[</span>8<span>]</span></a></sup></p>
<table id="toc" class="toc">
<tr>
<td>
<div id="toctitle">
<h2>Contents</h2>
</div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Features"><span class="tocnumber">1</span> <span class="toctext">Features</span></a></li>
<li class="toclevel-1 tocsection-2"><a href="#Including_the_library"><span class="tocnumber">2</span> <span class="toctext">Including the library</span></a></li>
<li class="toclevel-1 tocsection-3"><a href="#Usage_styles"><span class="tocnumber">3</span> <span class="toctext">Usage styles</span></a></li>
<li class="toclevel-1 tocsection-4"><a href="#jQuery_plug-ins"><span class="tocnumber">4</span> <span class="toctext">jQuery plug-ins</span></a></li>
<li class="toclevel-1 tocsection-5"><a href="#Release_history"><span class="tocnumber">5</span> <span class="toctext">Release history</span></a></li>
<li class="toclevel-1 tocsection-6"><a href="#See_also"><span class="tocnumber">6</span> <span class="toctext">See also</span></a></li>
<li class="toclevel-1 tocsection-7"><a href="#References"><span class="tocnumber">7</span> <span class="toctext">References</span></a></li>
<li class="toclevel-1 tocsection-8"><a href="#Further_reading"><span class="tocnumber">8</span> <span class="toctext">Further reading</span></a></li>
<li class="toclevel-1 tocsection-9"><a href="#External_links"><span class="tocnumber">9</span> <span class="toctext">External links</span></a></li>
</ul>
</td>
</tr>
</table>
<h2><span class="editsection">[<a href="/w/index.php?title=JQuery&amp;action=edit&amp;section=1" title="Edit section: Features">edit</a>]</span> <span class="mw-headline" id="Features">Features</span></h2>
<p>jQuery contains the following features:</p>
<ul>
<li><a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a> element selections using the cross-browser open source selector engine <a href="/w/index.php?title=Sizzle_selector_engine&amp;action=edit&amp;redlink=1" class="new" title="Sizzle selector engine (page does not exist)">Sizzle</a>, a spin-off out of the jQuery project<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span>[</span>9<span>]</span></a></sup></li>
<li>DOM traversal and modification (including support for CSS 1-3)</li>
<li>Events</li>
<li><a href="/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a> manipulation</li>
<li>Effects and animations</li>
<li><a href="/wiki/AJAX_(programming)" title="AJAX (programming)" class="mw-redirect">Ajax</a></li>
<li><a href="/wiki/Extensibility">Extensibility</a> through plug-ins</li>
<li>Utilities - such as browser version and the <code lang="jQuery" xml:lang="jQuery">each</code> function.</li>
<li>Cross-browser support</li>
</ul>
<h2><span class="editsection">[<a href="/w/index.php?title=JQuery&amp;action=edit&amp;section=2" title="Edit section: Including the library">edit</a>]</span> <span class="mw-headline" id="Including_the_library">Including the library</span></h2>
<p>The jQuery library is a single JavaScript file, containing all of its common DOM, event, effects, and Ajax functions. It can be included within a web page by linking to a local copy, or to one of the many copies available from public servers (such as Google <sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span>[</span>10<span>]</span></a></sup> or Microsoft <a href="/wiki/Content_delivery_network" title="Content delivery network">CDN</a>).</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="html4strict source-html4strict" style="font-family:monospace;">
<pre class="de1">
<span class="sc2">&lt;<span class="kw2">script</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text/javascript"</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"jquery.js"</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">script</span>&gt;</span>
</pre></div>
</div>
<p>The most popular and basic way to introduce a jQuery function is to use the <code lang="jQuery" xml:lang="jQuery">.ready()</code> function.</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="html4strict source-html4strict" style="font-family:monospace;">
<pre class="de1">
$(document).ready(function() {
// jquery goes here
});
</pre></div>
</div>
<p>or the shortcut</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="html4strict source-html4strict" style="font-family:monospace;">
<pre class="de1">
$(function() {
// jquery goes here
});
</pre></div>
</div>
<h2><span class="editsection">[<a href="/w/index.php?title=JQuery&amp;action=edit&amp;section=3" title="Edit section: Usage styles">edit</a>]</span> <span class="mw-headline" id="Usage_styles">Usage styles</span></h2>
<p>jQuery has two usage styles:</p>
<ul>
<li>via the <code lang="jQuery" xml:lang="jQuery">$</code> function, which is a <a href="/wiki/Factory_method_pattern" title="Factory method pattern">factory method</a> for the jQuery object. These functions, often called <i>commands</i>, are <a href="/wiki/Method_chaining" title="Method chaining"><i>chainable</i></a>; they all return jQuery objects</li>
<li>via <code lang="jQuery" xml:lang="jQuery">$.</code>-prefixed functions. These are <i>utility functions</i> which do not work on the jQuery object <i>per se</i>.</li>
</ul>
<p>Typically, access to and manipulation of multiple DOM nodes begins with the <code lang="jQuery" xml:lang="jQuery">$</code> function being called with a <a href="/wiki/CSS" class="mw-redirect" title="CSS">CSS</a> selector string, which results in a jQuery object referencing matching elements in the <a href="/wiki/HTML">HTML</a> page. This node set can be manipulated by calling instance methods on the jQuery object, or on the nodes themselves. For example:</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="javascript source-javascript" style="font-family:monospace;">
<pre class="de1">
$<span class="br0">(</span><span class="st0">"div.test"</span><span class="br0">)</span>.<span class="me1">add</span><span class="br0">(</span><span class="st0">"p.quote"</span><span class="br0">)</span>.<span class="me1">addClass</span><span class="br0">(</span><span class="st0">"blue"</span><span class="br0">)</span>.<span class="me1">slideDown</span><span class="br0">(</span><span class="st0">"slow"</span><span class="br0">)</span><span class="sy0">;</span>
</pre></div>
</div>
<p>This line finds the union of all <code lang="HTML" xml:lang="HTML">div</code> tags with class attribute <code lang="HTML" xml:lang="HTML">test</code> and all <code lang="HTML" xml:lang="HTML">p</code> tags with CSS class attribute <code lang="HTML" xml:lang="HTML">quote</code>, adds the class attribute <code lang="HTML" xml:lang="HTML">blue</code> to each matched element, and then slides them down with an animation. The <code lang="jQuery" xml:lang="jQuery">$</code> and <code lang="jQuery" xml:lang="jQuery">add</code> functions affect the matched set, while the <code lang="jQuery" xml:lang="jQuery">addClass</code> and <code lang="jQuery" xml:lang="jQuery">slideDown</code> affect the referenced nodes.</p>
<p>The methods prefixed with <code lang="jQuery" xml:lang="jQuery">$.</code> are convenience methods or affect global properties and behaviour. For example, the following is an example of the <a href="/wiki/Map_(higher-order_function)" title="Map (higher-order function)">map function</a> called <code lang="jQuery" xml:lang="jQuery">each</code> in jQuery:</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="javascript source-javascript" style="font-family:monospace;">
<pre class="de1">
$.<span class="me1">each</span><span class="br0">(</span><span class="br0">[</span>1<span class="sy0">,</span>2<span class="sy0">,</span>3<span class="br0">]</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
  document.<span class="kw1">write</span><span class="br0">(</span><span class="kw1">this</span> <span class="sy0">+</span> 1<span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
</pre></div>
</div>
<p>This writes the number 234 to the document.</p>
<p>It is possible to perform browser-independent <a href="/wiki/Ajax_(programming)" title="Ajax (programming)">Ajax</a> queries using <code lang="jQuery" xml:lang="jQuery">$.ajax</code> and associated methods to load and manipulate remote data.</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="javascript source-javascript" style="font-family:monospace;">
<pre class="de1">
$.<span class="me1">ajax</span><span class="br0">(</span><span class="br0">{</span>
  type<span class="sy0">:</span> <span class="st0">"POST"</span><span class="sy0">,</span>
  url<span class="sy0">:</span> <span class="st0">"example.php"</span><span class="sy0">,</span>
  data<span class="sy0">:</span> <span class="st0">"name=John&amp;location=Boston"</span><span class="sy0">,</span>
  success<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>msg<span class="br0">)</span><span class="br0">{</span>
    <span class="kw3">alert</span><span class="br0">(</span> <span class="st0">"Data Saved: "</span> <span class="sy0">+</span> msg <span class="br0">)</span><span class="sy0">;</span>
  <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
</pre></div>
</div>
<p>This example posts the data <code>name=John</code> and <code>location=Boston</code> to <code>example.php</code> on the server. When this request finishes successfully, the success function is called to alert the user.</p>
<h2><span class="editsection">[<a href="/w/index.php?title=JQuery&amp;action=edit&amp;section=4" title="Edit section: jQuery plug-ins">edit</a>]</span> <span class="mw-headline" id="jQuery_plug-ins">jQuery plug-ins</span></h2>
<p>Because of jQuery's architecture, other developers can use its constructs to create <a href="/wiki/Plug-in_(computing)" title="Plug-in (computing)">plug-in</a> code to extend its functionality. Currently there are thousands of jQuery plug-ins available on the web<sup id="cite_ref-plugins.jquery.com_10-0" class="reference"><a href="#cite_note-plugins.jquery.com-10"><span>[</span>11<span>]</span></a></sup> that cover a wide range of functionality such as Ajax helpers, webservices, datagrids, dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal windows, even a jQuery-based <a href="/wiki/Commodore_64">Commodore 64</a> emulator.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span>[</span>12<span>]</span></a></sup></p>
<p>An important source of jQuery plug-ins is the Plugins sub-domain of the jQuery Project website.<sup id="cite_ref-plugins.jquery.com_10-1" class="reference"><a href="#cite_note-plugins.jquery.com-10"><span>[</span>11<span>]</span></a></sup> There are alternative plug-in search engines<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span>[</span>13<span>]</span></a></sup> that take more specialist approaches, such as only listing plug-ins that meet certain criteria (e.g. those that have a public code repository). The tutorials page on the jQuery site has a list of links to jQuery plug-in tutorials under the "Plugin development" section.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span>[</span>14<span>]</span></a></sup></p>
<h2><span class="editsection">[<a href="/w/index.php?title=JQuery&amp;action=edit&amp;section=5" title="Edit section: Release history">edit</a>]</span> <span class="mw-headline" id="Release_history">Release history</span></h2>

<p class="license">This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</p>
</div>
<script>
  var Sizzle = {},
      content = document.getElementById('bodyContent');
  
  // From jQuery 1.6rc1
  Sizzle.getText = function(elems) {
   var ret = "",
       elem;
  
   for (var i = 0; elems[i]; i++) {
    elem = elems[i];
  
    // Get the text from text nodes and CDATA nodes
    if (elem.nodeType === 3 || elem.nodeType === 4) {
     ret += elem.nodeValue;
  
     // Traverse everything else, except comment nodes
    } else if (elem.nodeType !== 8) {
     ret += Sizzle.getText(elem.childNodes);
    }
   }
  
   return ret;
  };
  
  // https://github.com/jquery/sizzle/pull/59
  Sizzle.getText2 = function(elems) {
   var nodeType = elems.nodeType,
       ret = "";
  
   // Get text from the array elements if this is not a node
   if (nodeType == null) {
    for (var i = 0; elems[i]; i++) {
     ret += Sizzle.getText2(elems[i]);
    }
    // Get the text from text nodes and CDATA nodes
   } else if (nodeType === 3 || nodeType === 4) {
    ret += elems.nodeValue;
    // Traverse everything else, except comment nodes
   } else if (nodeType !== 8) {
    for (var node = elems.firstChild; node; node = node.nextSibling) {
     ret += Sizzle.getText2(node);
    }
   }
  
   return ret;
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Current Sizzle.getText()
var text = Sizzle.getText([content]);
ready
Updated Sizzle.getText()
var text = Sizzle.getText2([content]);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Ben Barber on
  • Revision 2: published by Timmy Willison on
  • Revision 3: published by Timmy Willison on