Underscore.each vs jQuery.each vs. for loop (v226)

Revision 226 of this benchmark created on

Description

Adding an optimized for loop.

Preparation HTML

<input name="FeedModel.UniqueDataModelName" id="FeedModel_UniqueDataModelName" type="hidden"
value="safasf" sab="35" data-val-required="The Name field is required." data-val="true"
data-val-remote-url="/FeedMapper/checkDataModelNameUnique" data-val-remote-type="POST"
data-val-remote-additionalfields="*.UniqueDataModelName" data-val-remote="Please choose a different name."
data-val-length-max="100" data-val-length="The field Name must be a string with a maximum length of 100.">
<input name="FeedModel.Icon" id="FeedModel_Icon" type="hidden" value="Sports" sab="36"
data-val-required="The Icon field is required." data-val="true">
<input name="FeedModel.MaxColumns" id="FeedModel_MaxColumns" type="hidden" value="2"
sab="37" data-val-required="The MaxColumns field is required." data-val="true" data-val-range-min="1"
data-val-range-max="8" data-val-range="Column Range is 1 to 8" data-val-number="The field MaxColumns must be a number.">
<input name="FeedModel.ContentType" id="FeedModel_ContentType" type="hidden" value="Article"
sab="38" data-val-required="The ContentType field is required." data-val="true">
<input name="FeedModel.FeedUrl" id="FeedModel_FeedUrl" type="hidden" value="http://www.as.com/rss/feed.html?feedId=17037&amp;version=5"
sab="39" data-val-required="The FeedURL field is required." data-val="true">
<input name="FeedModel.FeedUserName" id="FeedModel_FeedUserName" type="hidden" value=""
sab="40">
<input name="FeedModel.FeedPassword" id="FeedModel_FeedPassword" type="hidden" value=""
sab="41">
<div style="-ms-grid-column: 1; -ms-grid-row: 1;" sab="42">
  <label for="Title" sab="43">
    Title
  </label>
  <div class="required" sab="44">
    *
  </div>
</div>
<div class="exampleDiv" style="-ms-grid-column: 2; -ms-grid-row: 1;" sab="45">
  <div class="editor-field" sab="46">
    <select name="ArticleModel.TitleList" id="ArticleModel_TitleList" size="1" multiple="multiple"
    sab="47" data-val-required="The TitleList field is required." data-val="true">
      <option value="Los internautas creen que Mou mantendrá a Diego López" sab="48">
        title
      </option>
    </select>
    <span class="field-validation-valid" sab="49" data-valmsg-replace="true" data-valmsg-for="ArticleModel.TitleList">
    </span>
  </div>
  <div id="ArticleModel_TitleList_Example" sab="50" hidden="hidden">
  </div>
</div>
<div style="-ms-grid-column: 1; -ms-grid-row: 2;" sab="51">
  <label for="Description" sab="52">
    Description
  </label>
  <div class="required" sab="53">
    *
  </div>
</div>
<div class="exampleDiv" style="-ms-grid-column: 2; -ms-grid-row: 2;" sab="54">
  <div class="editor-field" sab="55">
    <select name="ArticleModel.DescriptionList" id="ArticleModel_DescriptionList" size="2"
    multiple="multiple" sab="56" data-val-required="The DescriptionList field is required."
    data-val="true">
      <option value="Ante el Zaragoza es el primer partido para el que Iker Casillas está apto tras su lesión. El capitán del Real Madrid, en 'Facebook': &quot;Qué alegría, la mano responde&quot;."
      sab="57">
        description
      </option>
      <option value='&#10;<genre>NTC</genre>&#10;<subtitle>Real Madrid</subtitle>&#10;<detail>Mourinho tomará la decisión mañana, después de supervisar el entrenamiento matutino, de si convoca o no a Casillas para el partido del sábado ante el Zaragoza y de si, por tanto, el capitán viaja con el resto del equipo. Casillas tiene el alta médica desde el 19 de marzo (hoy se cumplen diez días), 55 días después de lesionarse en Mestalla y acortando los plazos de recuperación de las 12 semanas previstas a siete. Vuelve el morbo en la portería. Ayer lo dejó claro en su Facebook: "Qué alegría... La mano va respondiendo".&#10;La convocatoria de mañana sería el primer paso. Pero la gran pregunta es si, con Casillas apto para jugar, Mou le pondrá en Liga (con 13 puntos de distancia con el Barça) para que vaya cogiendo la forma. Los internautas de AS.com no le dan posibilidades si se les pregunta por lo que hará el técnico: sólo el 15% cree en su alineación ante el Zaragoza. Cosa distinta es el deseo de los aficionados: el 46% pondrían al capitán, aunque un 54% seguiría apostando por Diego López, que tan buenos partidos hizo ante el United, salvando incluso el pase a cuartos en Old Trafford. Después de aquello, Mourinho le significó: "Ha sido el mejor del partido". Un elogio que nunca salió de su boca para definir a un Iker tantas veces salvador.&#10;Desde que Diego López retornó al Madrid promedia 3,45 paradas y un gol encajado por partido. Jugó once (ocho ganados, dos empates y una derrota). Hasta que se lesionó, Casillas, que viajó con sus compañeros a Barcelona (en Copa) y a Old Trafford para apoyar como capitán, promediaba 2,18 paradas y 0,92 goles encajados por partido.</detail>&#10;'
      sab="58">
        {http://search.yahoo.com/mrss/}description
      </option>
    </select>
    <span class="field-validation-valid" sab="59" data-valmsg-replace="true" data-valmsg-for="ArticleModel.DescriptionList">
    </span>
  </div>
  <div id="ArticleModel_DescriptionList_Example" sab="60" hidden="hidden">
  </div>
</div>
<div style="-ms-grid-column: 1; -ms-grid-row: 3;" sab="61">
  <label for="Image" sab="62">
    Image
  </label>
  <div class="required" sab="63">
    *
  </div>
</div>
<div class="exampleDiv" style="-ms-grid-column: 2; -ms-grid-row: 3;" sab="64">
  <div class="editor-field" sab="65">
    <select name="ArticleModel.ImageList" id="ArticleModel_ImageList" size="1" multiple="multiple"
    sab="66" data-val-required="The ImageList field is required." data-val="true">
      <option value="http://www.as.com/recorte/20130328dasnasftb_7/C106/Ies/20130328dasnasftb_7_Ies_LCO.jpg"
      sab="67">
        {http://search.yahoo.com/mrss/}thumbnail
      </option>
    </select>
    <span class="field-validation-valid" sab="68" data-valmsg-replace="true" data-valmsg-for="ArticleModel.ImageList">
    </span>
  </div>
  <div id="imageDiv" sab="69">
    <div style="display: block;" sab="70">
      <label id="imgSizeLabel" style="float: left;" for="imageSize" sab="71" hidden="hidden">
        Size:
      </label>
      <div id="imgSizeTextBox" style="display: inline-block;" sab="72" hidden="hidden">
      </div>
    </div>
    <img id="ArticleModel_ImageList_Example" src="" sab="73" hidden="hidden">
    <div class="imageError" sab="74" hidden="hidden">
      No Image Available
    </div>
    <div id="imgTextBox" sab="75" hidden="hidden">
    </div>
  </div>
</div>
<div style="-ms-grid-column: 1; -ms-grid-row: 4;" sab="76">
  <label for="Author" sab="77">
    Author
  </label>
  <div class="required" sab="78">
    *
  </div>
</div>
<div class="exampleDiv" style="-ms-grid-column: 2; -ms-grid-row: 4;" sab="79">
  <div class="editor-field" sab="80">
    <select name="ArticleModel.AuthorList" id="ArticleModel_AuthorList" size="1" multiple="multiple"
    sab="81" data-val-required="The AuthorList field is required." data-val="true">
      <option value="Marco Ruiz" sab="82">
        author
      </option>
    </select>
    <span class="field-validation-valid" sab="83" data-valmsg-replace="true" data-valmsg-for="ArticleModel.AuthorList">
    </span>
  </div>
  <div id="ArticleModel_AuthorList_Example" sab="84" hidden="hidden">
  </div>
</div>
<div style="-ms-grid-column: 1; -ms-grid-row: 5;" sab="85">
  <label for="PublishedDate" sab="86">
    PublishedDate
  </label>
  <div class="required" sab="87">
    *
  </div>
</div>
<div class="exampleDiv" style="-ms-grid-column: 2; -ms-grid-row: 5;" sab="88">
  <div class="editor-field" sab="89">
    <select name="ArticleModel.PubDateList" id="ArticleModel_PubDateList" size="1" multiple="multiple"
    sab="90" data-val-required="The PubDateList field is required." data-val="true">
      <option value="Thu, 28 Mar 2013 01:04:00 +0100" sab="91">
        pubDate
      </option>
    </select>
    <span class="field-validation-valid" sab="92" data-valmsg-replace="true" data-valmsg-for="ArticleModel.PubDateList">
    </span>
  </div>
  <div id="ArticleModel_PubDateList_Example" sab="93" hidden="hidden">
  </div>
</div>
<div style="-ms-grid-column: 1; -ms-grid-row: 6;" sab="94">
  <label for="LastBuildDate" sab="95">
    LastBuildDate
  </label>
  <div class="required" sab="96">
    *
  </div>
</div>
<div class="exampleDiv" style="-ms-grid-column: 2; -ms-grid-row: 6;" sab="97">
  <div class="editor-field" sab="98">
    <select name="ArticleModel.LastBuildDateList" id="ArticleModel_LastBuildDateList"
    size="1" multiple="multiple" sab="99" data-val-required="The LastBuildDateList field is required."
    data-val="true">
      <option value="No Example" sab="100">
        None
      </option>
    </select>
    <span class="field-validation-valid" sab="101" data-valmsg-replace="true" data-valmsg-for="ArticleModel.LastBuildDateList">
    </span>
  </div>
  <div id="ArticleModel_LastBuildDateList_Example" sab="102" hidden="hidden">
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.each
$('select').each(function() {
  if ($(this).length == 1) {
    $(this).selectedIndex = 0;
    var getDropDownID = $(this).attr('id');
    var dropdownValue = $(this).find('option:selected').val();
    if (dropdownValue != null) {
      if (getDropDownID != "ArticleModel_ImageList") {
        var $txtBox = $("#" + getDropDownID + "_Example");
        $txtBox.show(300);
        $txtBox.html("<div style=\"width:17%;float:left;\">Example: </div>");
        $txtBox.append("<div style=\"width:83%;float:right;\">" + dropdownValue + "</div>");
      } else if (getDropDownID == "ArticleModel_ImageList") {
        ImageWrapper(getDropDownID, dropdownValue);
      }
    }
  }
});
ready
good old for loop
 
ready
underscore.each
 
ready
mozilla foreach
 
ready
Another good old optimized 'for loop'
 
ready

Revisions

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