Benchmark: search exactly one element in array filter vs for loop

HTML Preparation code:

<h3>test 1</h3><!-- id='t1' -->
<h3>test 2</h3><!-- id='t2' -->
<h3>test 3</h3><!-- id='t3' -->
<h3>test 4</h3><!-- id='t4' -->
<h3>test 5</h3><!-- id='t5' -->
<h3>test 6</h3><!-- id='t6' -->
<h3>test 7</h3><!-- id='t7' -->
<h3>test 8</h3><!-- id='t8' -->
<h3>test 9</h3><!-- id='t9' -->
<h3>test 10</h3><!-- id='t10' -->
<h3>test 11</h3><!-- id='t11' -->
<h3>test 12</h3><!-- id='t12' -->
<h3>test 13</h3><!-- id='t13' -->
<h3>test 14</h3><!-- id='t14' -->
<h3>test 15</h3><!-- id='t15' -->
<h3>test 16</h3><!-- id='t16' -->
<h3>test 17</h3><!-- id='t17' -->
<h3>test 18</h3><!-- id='t18' -->
<h3>test 19</h3><!-- id='t19' -->
<h3>test 20</h3><!-- id='t20' -->
<h3>test 21</h3><!-- id='t21' -->
<h3>test 22</h3><!-- id='t22' -->
<h3>test 23</h3><!-- id='t23' -->
<h3>test 24</h3><!-- id='t24' -->
<h3>test 25</h3><!-- id='t25' -->
<h3>test 26</h3><!-- id='t26' -->
<h3>test 27</h3><!-- id='t27' -->
<h3>test 28</h3><!-- id='t28' -->
<h3>test 29</h3><!-- id='t29' -->
<h3>test 30</h3><!-- id='t30' -->
<h3>test 31</h3><!-- id='t31' -->
<h3>test 32</h3><!-- id='t32' -->
<h3>test 33</h3><!-- id='t33' -->
<h3>test 34</h3><!-- id='t34' -->
<h3>test 35</h3><!-- id='t35' -->
<h3>test 36</h3><!-- id='t36' -->
<h3>test 37</h3><!-- id='t37' -->
<h3>test 38</h3><!-- id='t38' -->
<h3>test 39</h3><!-- id='t39' -->
<h3>test 40</h3><!-- id='t40' -->
<h3>test 41</h3><!-- id='t41' -->
<h3>test 42</h3><!-- id='t42' -->
<h3>test 43</h3><!-- id='t43' -->
<h3>test 44</h3><!-- id='t44' -->
<h3>test 45</h3><!-- id='t45' -->
<h3>test 46</h3><!-- id='t46' -->
<h3>test 47</h3><!-- id='t47' -->
<h3>test 48</h3><!-- id='t48' -->
<h3>test 49</h3><!-- id='t49' -->
<h3>test 50</h3><!-- id='t50' -->
<h3>test 51</h3><!-- id='t51' -->
<h3>test 52</h3><!-- id='t52' -->
<h3>test 53</h3><!-- id='t53' -->
<h3>test 54</h3><!-- id='t54' -->
<h3>test 55</h3><!-- id='t55' -->
<h3>test 56</h3><!-- id='t56' -->
<h3>test 57</h3><!-- id='t57' -->
<h3>test 58</h3><!-- id='t58' -->
<h3>test 59</h3><!-- id='t59' -->
<h3>test 60</h3><!-- id='t60' -->
<h3>test 61</h3><!-- id='t61' -->
<h3>test 62</h3><!-- id='t62' -->
<h3>test 63</h3><!-- id='t63' -->
<h3>test 64</h3><!-- id='t64' -->
<h3>test 65</h3><!-- id='t65' -->
<h3>test 66</h3><!-- id='t66' -->
<h3>test 67</h3><!-- id='t67' -->
<h3>test 68</h3><!-- id='t68' -->
<h3>test 69</h3><!-- id='t69' -->
<h3>test 70</h3><!-- id='t70' -->
<h3>test 71</h3><!-- id='t71' -->
<h3>test 72</h3><!-- id='t72' -->
<h3>test 73</h3><!-- id='t73' -->
<h3>test 74</h3><!-- id='t74' -->
<h3>test 75</h3><!-- id='t75' -->
<h3>test 76</h3><!-- id='t76' -->
<h3>test 77</h3><!-- id='t77' -->
<h3>test 78</h3><!-- id='t78' -->
<h3>test 79</h3><!-- id='t79' -->
<h3>test 80</h3><!-- id='t80' -->
<h3>test 81</h3><!-- id='t81' -->
<h3>test 82</h3><!-- id='t82' -->
<h3>test 83</h3><!-- id='t83' -->
<h3>test 84</h3><!-- id='t84' -->
<h3>test 85</h3><!-- id='t85' -->
<h3>test 86</h3><!-- id='t86' -->
<h3>test 87</h3><!-- id='t87' -->
<h3>test 88</h3><!-- id='t88' -->
<h3>test 89</h3><!-- id='t89' -->
<h3>test 90</h3><!-- id='t90' -->
<h3>test 91</h3><!-- id='t91' -->
<h3>test 92</h3><!-- id='t92' -->
<h3>test 93</h3><!-- id='t93' -->
<h3>test 94</h3><!-- id='t94' -->
<h3>test 95</h3><!-- id='t95' -->
<h3>test 96</h3><!-- id='t96' -->
<h3>test 97</h3><!-- id='t97' -->
<h3>test 98</h3><!-- id='t98' -->
<h3>test 99</h3><!-- id='t99' -->
<h3>test 100</h3><!-- id='t100' -->

Script Preparation code:

var arrComments = []; // Create empty array for the comment nodes

// Create a NodeIterator object with all comment nodes in the <table class="ms-formtable"...>
var nodeIterator = document.createNodeIterator(
    document.body,
    NodeFilter.SHOW_COMMENT,    
    function acceptNode(node) {
		return NodeFilter.FILTER_ACCEPT;
	}, false 
);

// Add all the comment nodes of the nodeIterator to the arrComments array
while(nextNode = nodeIterator.nextNode()){
	arrComments.push(nextNode);
}

Tests:

filter
arrComments.getNodeFilter = function(strID) { var objRegExp = new RegExp("id='" + strID + "'"); var commentNode = arrComments.filter(function(comCurrent){ if(objRegExp.test(comCurrent.textContent) == true) return comCurrent; })[0]; return commentNode; } console.log(arrComments.getNodeFilter('t97')); console.log(arrComments.getNodeFilter('t87')); console.log(arrComments.getNodeFilter('t95')); console.log(arrComments.getNodeFilter('t3')); console.log(arrComments.getNodeFilter('t12'));
for loop
arrComments.getNodeForLoop = function(strID) { var objRegExp = new RegExp("id='" + strID + "'"); for(var i = 0; i < this.length; i++) { var commentNode = this[i]; if(objRegExp.test(commentNode.textContent) == true) return commentNode; }; } console.log(arrComments.getNodeForLoop('t97')); console.log(arrComments.getNodeForLoop('t87')); console.log(arrComments.getNodeForLoop('t95')); console.log(arrComments.getNodeForLoop('t3')); console.log(arrComments.getNodeForLoop('t12'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter
for loop

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 6 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0

Browser/OS: Firefox 52 on Windows

View result in a separate tab

Test name	Executions per second
filter	1015.5 Ops/sec
for loop	1796.3 Ops/sec

search exactly one element in array filter vs for loop (version: 0)

Comparing performance of: filter vs for loop

Created: 6 years ago by: Guest

Jump to the latest result

filter

for loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A