jQuery hide vs CSS class

Benchmark created on

Preparation HTML

<style>
.hidden {
    display: none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.3.0/lodash.js"></script>

<div class="hideable">0</div>
<div class="hideable">1</div>
<div class="hideable">2</div>
<div class="hideable">3</div>
<div class="hideable">4</div>
<div class="hideable">5</div>
<div class="hideable">6</div>
<div class="hideable">7</div>
<div class="hideable">8</div>
<div class="hideable">9</div>
<div class="hideable">10</div>
<div class="hideable">11</div>
<div class="hideable">12</div>
<div class="hideable">13</div>
<div class="hideable">14</div>
<div class="hideable">15</div>
<div class="hideable">16</div>
<div class="hideable">17</div>
<div class="hideable">18</div>
<div class="hideable">19</div>
<div class="hideable">20</div>
<div class="hideable">21</div>
<div class="hideable">22</div>
<div class="hideable">23</div>
<div class="hideable">24</div>
<div class="hideable">25</div>
<div class="hideable">26</div>
<div class="hideable">27</div>
<div class="hideable">28</div>
<div class="hideable">29</div>
<div class="hideable">30</div>
<div class="hideable">31</div>
<div class="hideable">32</div>
<div class="hideable">33</div>
<div class="hideable">34</div>
<div class="hideable">35</div>
<div class="hideable">36</div>
<div class="hideable">37</div>
<div class="hideable">38</div>
<div class="hideable">39</div>
<div class="hideable">40</div>
<div class="hideable">41</div>
<div class="hideable">42</div>
<div class="hideable">43</div>
<div class="hideable">44</div>
<div class="hideable">45</div>
<div class="hideable">46</div>
<div class="hideable">47</div>
<div class="hideable">48</div>
<div class="hideable">49</div>
<div class="hideable">50</div>
<div class="hideable">51</div>
<div class="hideable">52</div>
<div class="hideable">53</div>
<div class="hideable">54</div>
<div class="hideable">55</div>
<div class="hideable">56</div>
<div class="hideable">57</div>
<div class="hideable">58</div>
<div class="hideable">59</div>
<div class="hideable">60</div>
<div class="hideable">61</div>
<div class="hideable">62</div>
<div class="hideable">63</div>
<div class="hideable">64</div>
<div class="hideable">65</div>
<div class="hideable">66</div>
<div class="hideable">67</div>
<div class="hideable">68</div>
<div class="hideable">69</div>
<div class="hideable">70</div>
<div class="hideable">71</div>
<div class="hideable">72</div>
<div class="hideable">73</div>
<div class="hideable">74</div>
<div class="hideable">75</div>
<div class="hideable">76</div>
<div class="hideable">77</div>
<div class="hideable">78</div>
<div class="hideable">79</div>
<div class="hideable">80</div>
<div class="hideable">81</div>
<div class="hideable">82</div>
<div class="hideable">83</div>
<div class="hideable">84</div>
<div class="hideable">85</div>
<div class="hideable">86</div>
<div class="hideable">87</div>
<div class="hideable">88</div>
<div class="hideable">89</div>
<div class="hideable">90</div>
<div class="hideable">91</div>
<div class="hideable">92</div>
<div class="hideable">93</div>
<div class="hideable">94</div>
<div class="hideable">95</div>
<div class="hideable">96</div>
<div class="hideable">97</div>
<div class="hideable">98</div>
<div class="hideable">99</div>
<div class="hideable">100</div>
<div class="hideable">101</div>
<div class="hideable">102</div>
<div class="hideable">103</div>
<div class="hideable">104</div>
<div class="hideable">105</div>
<div class="hideable">106</div>
<div class="hideable">107</div>
<div class="hideable">108</div>
<div class="hideable">109</div>
<div class="hideable">110</div>
<div class="hideable">111</div>
<div class="hideable">112</div>
<div class="hideable">113</div>
<div class="hideable">114</div>
<div class="hideable">115</div>
<div class="hideable">116</div>
<div class="hideable">117</div>
<div class="hideable">118</div>
<div class="hideable">119</div>
<div class="hideable">120</div>
<div class="hideable">121</div>
<div class="hideable">122</div>
<div class="hideable">123</div>
<div class="hideable">124</div>
<div class="hideable">125</div>
<div class="hideable">126</div>
<div class="hideable">127</div>
<div class="hideable">128</div>
<div class="hideable">129</div>
<div class="hideable">130</div>
<div class="hideable">131</div>
<div class="hideable">132</div>
<div class="hideable">133</div>
<div class="hideable">134</div>
<div class="hideable">135</div>
<div class="hideable">136</div>
<div class="hideable">137</div>
<div class="hideable">138</div>
<div class="hideable">139</div>
<div class="hideable">140</div>
<div class="hideable">141</div>
<div class="hideable">142</div>
<div class="hideable">143</div>
<div class="hideable">144</div>
<div class="hideable">145</div>
<div class="hideable">146</div>
<div class="hideable">147</div>
<div class="hideable">148</div>
<div class="hideable">149</div>
<div class="hideable">150</div>
<div class="hideable">151</div>
<div class="hideable">152</div>
<div class="hideable">153</div>
<div class="hideable">154</div>
<div class="hideable">155</div>
<div class="hideable">156</div>
<div class="hideable">157</div>
<div class="hideable">158</div>
<div class="hideable">159</div>
<div class="hideable">160</div>
<div class="hideable">161</div>
<div class="hideable">162</div>
<div class="hideable">163</div>
<div class="hideable">164</div>
<div class="hideable">165</div>
<div class="hideable">166</div>
<div class="hideable">167</div>
<div class="hideable">168</div>
<div class="hideable">169</div>
<div class="hideable">170</div>
<div class="hideable">171</div>
<div class="hideable">172</div>
<div class="hideable">173</div>
<div class="hideable">174</div>
<div class="hideable">175</div>
<div class="hideable">176</div>
<div class="hideable">177</div>
<div class="hideable">178</div>
<div class="hideable">179</div>
<div class="hideable">180</div>
<div class="hideable">181</div>
<div class="hideable">182</div>
<div class="hideable">183</div>
<div class="hideable">184</div>
<div class="hideable">185</div>
<div class="hideable">186</div>
<div class="hideable">187</div>
<div class="hideable">188</div>
<div class="hideable">189</div>
<div class="hideable">190</div>
<div class="hideable">191</div>
<div class="hideable">192</div>
<div class="hideable">193</div>
<div class="hideable">194</div>
<div class="hideable">195</div>
<div class="hideable">196</div>
<div class="hideable">197</div>
<div class="hideable">198</div>
<div class="hideable">199</div>
<div class="hideable">200</div>
<div class="hideable">201</div>
<div class="hideable">202</div>
<div class="hideable">203</div>
<div class="hideable">204</div>
<div class="hideable">205</div>
<div class="hideable">206</div>
<div class="hideable">207</div>
<div class="hideable">208</div>
<div class="hideable">209</div>
<div class="hideable">210</div>
<div class="hideable">211</div>
<div class="hideable">212</div>
<div class="hideable">213</div>
<div class="hideable">214</div>
<div class="hideable">215</div>
<div class="hideable">216</div>
<div class="hideable">217</div>
<div class="hideable">218</div>
<div class="hideable">219</div>
<div class="hideable">220</div>
<div class="hideable">221</div>
<div class="hideable">222</div>
<div class="hideable">223</div>
<div class="hideable">224</div>
<div class="hideable">225</div>
<div class="hideable">226</div>
<div class="hideable">227</div>
<div class="hideable">228</div>
<div class="hideable">229</div>
<div class="hideable">230</div>
<div class="hideable">231</div>
<div class="hideable">232</div>
<div class="hideable">233</div>
<div class="hideable">234</div>
<div class="hideable">235</div>
<div class="hideable">236</div>
<div class="hideable">237</div>
<div class="hideable">238</div>
<div class="hideable">239</div>
<div class="hideable">240</div>
<div class="hideable">241</div>
<div class="hideable">242</div>
<div class="hideable">243</div>
<div class="hideable">244</div>
<div class="hideable">245</div>
<div class="hideable">246</div>
<div class="hideable">247</div>
<div class="hideable">248</div>
<div class="hideable">249</div>
<div class="hideable">250</div>
<div class="hideable">251</div>
<div class="hideable">252</div>
<div class="hideable">253</div>
<div class="hideable">254</div>
<div class="hideable">255</div>
<div class="hideable">256</div>
<div class="hideable">257</div>
<div class="hideable">258</div>
<div class="hideable">259</div>
<div class="hideable">260</div>
<div class="hideable">261</div>
<div class="hideable">262</div>
<div class="hideable">263</div>
<div class="hideable">264</div>
<div class="hideable">265</div>
<div class="hideable">266</div>
<div class="hideable">267</div>
<div class="hideable">268</div>
<div class="hideable">269</div>
<div class="hideable">270</div>
<div class="hideable">271</div>
<div class="hideable">272</div>
<div class="hideable">273</div>
<div class="hideable">274</div>
<div class="hideable">275</div>
<div class="hideable">276</div>
<div class="hideable">277</div>
<div class="hideable">278</div>
<div class="hideable">279</div>
<div class="hideable">280</div>
<div class="hideable">281</div>
<div class="hideable">282</div>
<div class="hideable">283</div>
<div class="hideable">284</div>
<div class="hideable">285</div>
<div class="hideable">286</div>
<div class="hideable">287</div>
<div class="hideable">288</div>
<div class="hideable">289</div>
<div class="hideable">290</div>
<div class="hideable">291</div>
<div class="hideable">292</div>
<div class="hideable">293</div>
<div class="hideable">294</div>
<div class="hideable">295</div>
<div class="hideable">296</div>
<div class="hideable">297</div>
<div class="hideable">298</div>
<div class="hideable">299</div>
<div class="hideable">300</div>
<div class="hideable">301</div>
<div class="hideable">302</div>
<div class="hideable">303</div>
<div class="hideable">304</div>
<div class="hideable">305</div>
<div class="hideable">306</div>
<div class="hideable">307</div>
<div class="hideable">308</div>
<div class="hideable">309</div>
<div class="hideable">310</div>
<div class="hideable">311</div>
<div class="hideable">312</div>
<div class="hideable">313</div>
<div class="hideable">314</div>
<div class="hideable">315</div>
<div class="hideable">316</div>
<div class="hideable">317</div>
<div class="hideable">318</div>
<div class="hideable">319</div>
<div class="hideable">320</div>
<div class="hideable">321</div>
<div class="hideable">322</div>
<div class="hideable">323</div>
<div class="hideable">324</div>
<div class="hideable">325</div>
<div class="hideable">326</div>
<div class="hideable">327</div>
<div class="hideable">328</div>
<div class="hideable">329</div>
<div class="hideable">330</div>
<div class="hideable">331</div>
<div class="hideable">332</div>
<div class="hideable">333</div>
<div class="hideable">334</div>
<div class="hideable">335</div>
<div class="hideable">336</div>
<div class="hideable">337</div>
<div class="hideable">338</div>
<div class="hideable">339</div>
<div class="hideable">340</div>
<div class="hideable">341</div>
<div class="hideable">342</div>
<div class="hideable">343</div>
<div class="hideable">344</div>
<div class="hideable">345</div>
<div class="hideable">346</div>
<div class="hideable">347</div>
<div class="hideable">348</div>
<div class="hideable">349</div>
<div class="hideable">350</div>
<div class="hideable">351</div>
<div class="hideable">352</div>
<div class="hideable">353</div>
<div class="hideable">354</div>
<div class="hideable">355</div>
<div class="hideable">356</div>
<div class="hideable">357</div>
<div class="hideable">358</div>
<div class="hideable">359</div>
<div class="hideable">360</div>
<div class="hideable">361</div>
<div class="hideable">362</div>
<div class="hideable">363</div>
<div class="hideable">364</div>
<div class="hideable">365</div>
<div class="hideable">366</div>
<div class="hideable">367</div>
<div class="hideable">368</div>
<div class="hideable">369</div>
<div class="hideable">370</div>
<div class="hideable">371</div>
<div class="hideable">372</div>
<div class="hideable">373</div>
<div class="hideable">374</div>
<div class="hideable">375</div>
<div class="hideable">376</div>
<div class="hideable">377</div>
<div class="hideable">378</div>
<div class="hideable">379</div>
<div class="hideable">380</div>
<div class="hideable">381</div>
<div class="hideable">382</div>
<div class="hideable">383</div>
<div class="hideable">384</div>
<div class="hideable">385</div>
<div class="hideable">386</div>
<div class="hideable">387</div>
<div class="hideable">388</div>
<div class="hideable">389</div>
<div class="hideable">390</div>
<div class="hideable">391</div>
<div class="hideable">392</div>
<div class="hideable">393</div>
<div class="hideable">394</div>
<div class="hideable">395</div>
<div class="hideable">396</div>
<div class="hideable">397</div>
<div class="hideable">398</div>
<div class="hideable">399</div>
<div class="hideable">400</div>
<div class="hideable">401</div>
<div class="hideable">402</div>
<div class="hideable">403</div>
<div class="hideable">404</div>
<div class="hideable">405</div>
<div class="hideable">406</div>
<div class="hideable">407</div>
<div class="hideable">408</div>
<div class="hideable">409</div>
<div class="hideable">410</div>
<div class="hideable">411</div>
<div class="hideable">412</div>
<div class="hideable">413</div>
<div class="hideable">414</div>
<div class="hideable">415</div>
<div class="hideable">416</div>
<div class="hideable">417</div>
<div class="hideable">418</div>
<div class="hideable">419</div>
<div class="hideable">420</div>
<div class="hideable">421</div>
<div class="hideable">422</div>
<div class="hideable">423</div>
<div class="hideable">424</div>
<div class="hideable">425</div>
<div class="hideable">426</div>
<div class="hideable">427</div>
<div class="hideable">428</div>
<div class="hideable">429</div>
<div class="hideable">430</div>
<div class="hideable">431</div>
<div class="hideable">432</div>
<div class="hideable">433</div>
<div class="hideable">434</div>
<div class="hideable">435</div>
<div class="hideable">436</div>
<div class="hideable">437</div>
<div class="hideable">438</div>
<div class="hideable">439</div>
<div class="hideable">440</div>
<div class="hideable">441</div>
<div class="hideable">442</div>
<div class="hideable">443</div>
<div class="hideable">444</div>
<div class="hideable">445</div>
<div class="hideable">446</div>
<div class="hideable">447</div>
<div class="hideable">448</div>
<div class="hideable">449</div>
<div class="hideable">450</div>
<div class="hideable">451</div>
<div class="hideable">452</div>
<div class="hideable">453</div>
<div class="hideable">454</div>
<div class="hideable">455</div>
<div class="hideable">456</div>
<div class="hideable">457</div>
<div class="hideable">458</div>
<div class="hideable">459</div>
<div class="hideable">460</div>
<div class="hideable">461</div>
<div class="hideable">462</div>
<div class="hideable">463</div>
<div class="hideable">464</div>
<div class="hideable">465</div>
<div class="hideable">466</div>
<div class="hideable">467</div>
<div class="hideable">468</div>
<div class="hideable">469</div>
<div class="hideable">470</div>
<div class="hideable">471</div>
<div class="hideable">472</div>
<div class="hideable">473</div>
<div class="hideable">474</div>
<div class="hideable">475</div>
<div class="hideable">476</div>
<div class="hideable">477</div>
<div class="hideable">478</div>
<div class="hideable">479</div>
<div class="hideable">480</div>
<div class="hideable">481</div>
<div class="hideable">482</div>
<div class="hideable">483</div>
<div class="hideable">484</div>
<div class="hideable">485</div>
<div class="hideable">486</div>
<div class="hideable">487</div>
<div class="hideable">488</div>
<div class="hideable">489</div>
<div class="hideable">490</div>
<div class="hideable">491</div>
<div class="hideable">492</div>
<div class="hideable">493</div>
<div class="hideable">494</div>
<div class="hideable">495</div>
<div class="hideable">496</div>
<div class="hideable">497</div>
<div class="hideable">498</div>
<div class="hideable">499</div>
<div class="hideable">500</div>
<div class="hideable">501</div>
<div class="hideable">502</div>
<div class="hideable">503</div>
<div class="hideable">504</div>
<div class="hideable">505</div>
<div class="hideable">506</div>
<div class="hideable">507</div>
<div class="hideable">508</div>
<div class="hideable">509</div>
<div class="hideable">510</div>
<div class="hideable">511</div>
<div class="hideable">512</div>
<div class="hideable">513</div>
<div class="hideable">514</div>
<div class="hideable">515</div>
<div class="hideable">516</div>
<div class="hideable">517</div>
<div class="hideable">518</div>
<div class="hideable">519</div>
<div class="hideable">520</div>
<div class="hideable">521</div>
<div class="hideable">522</div>
<div class="hideable">523</div>
<div class="hideable">524</div>
<div class="hideable">525</div>
<div class="hideable">526</div>
<div class="hideable">527</div>
<div class="hideable">528</div>
<div class="hideable">529</div>
<div class="hideable">530</div>
<div class="hideable">531</div>
<div class="hideable">532</div>
<div class="hideable">533</div>
<div class="hideable">534</div>
<div class="hideable">535</div>
<div class="hideable">536</div>
<div class="hideable">537</div>
<div class="hideable">538</div>
<div class="hideable">539</div>
<div class="hideable">540</div>
<div class="hideable">541</div>
<div class="hideable">542</div>
<div class="hideable">543</div>
<div class="hideable">544</div>
<div class="hideable">545</div>
<div class="hideable">546</div>
<div class="hideable">547</div>
<div class="hideable">548</div>
<div class="hideable">549</div>
<div class="hideable">550</div>
<div class="hideable">551</div>
<div class="hideable">552</div>
<div class="hideable">553</div>
<div class="hideable">554</div>
<div class="hideable">555</div>
<div class="hideable">556</div>
<div class="hideable">557</div>
<div class="hideable">558</div>
<div class="hideable">559</div>
<div class="hideable">560</div>
<div class="hideable">561</div>
<div class="hideable">562</div>
<div class="hideable">563</div>
<div class="hideable">564</div>
<div class="hideable">565</div>
<div class="hideable">566</div>
<div class="hideable">567</div>
<div class="hideable">568</div>
<div class="hideable">569</div>
<div class="hideable">570</div>
<div class="hideable">571</div>
<div class="hideable">572</div>
<div class="hideable">573</div>
<div class="hideable">574</div>
<div class="hideable">575</div>
<div class="hideable">576</div>
<div class="hideable">577</div>
<div class="hideable">578</div>
<div class="hideable">579</div>
<div class="hideable">580</div>
<div class="hideable">581</div>
<div class="hideable">582</div>
<div class="hideable">583</div>
<div class="hideable">584</div>
<div class="hideable">585</div>
<div class="hideable">586</div>
<div class="hideable">587</div>
<div class="hideable">588</div>
<div class="hideable">589</div>
<div class="hideable">590</div>
<div class="hideable">591</div>
<div class="hideable">592</div>
<div class="hideable">593</div>
<div class="hideable">594</div>
<div class="hideable">595</div>
<div class="hideable">596</div>
<div class="hideable">597</div>
<div class="hideable">598</div>
<div class="hideable">599</div>
<div class="hideable">600</div>
<div class="hideable">601</div>
<div class="hideable">602</div>
<div class="hideable">603</div>
<div class="hideable">604</div>
<div class="hideable">605</div>
<div class="hideable">606</div>
<div class="hideable">607</div>
<div class="hideable">608</div>
<div class="hideable">609</div>
<div class="hideable">610</div>
<div class="hideable">611</div>
<div class="hideable">612</div>
<div class="hideable">613</div>
<div class="hideable">614</div>
<div class="hideable">615</div>
<div class="hideable">616</div>
<div class="hideable">617</div>
<div class="hideable">618</div>
<div class="hideable">619</div>
<div class="hideable">620</div>
<div class="hideable">621</div>
<div class="hideable">622</div>
<div class="hideable">623</div>
<div class="hideable">624</div>
<div class="hideable">625</div>
<div class="hideable">626</div>
<div class="hideable">627</div>
<div class="hideable">628</div>
<div class="hideable">629</div>
<div class="hideable">630</div>
<div class="hideable">631</div>
<div class="hideable">632</div>
<div class="hideable">633</div>
<div class="hideable">634</div>
<div class="hideable">635</div>
<div class="hideable">636</div>
<div class="hideable">637</div>
<div class="hideable">638</div>
<div class="hideable">639</div>
<div class="hideable">640</div>
<div class="hideable">641</div>
<div class="hideable">642</div>
<div class="hideable">643</div>
<div class="hideable">644</div>
<div class="hideable">645</div>
<div class="hideable">646</div>
<div class="hideable">647</div>
<div class="hideable">648</div>
<div class="hideable">649</div>
<div class="hideable">650</div>
<div class="hideable">651</div>
<div class="hideable">652</div>
<div class="hideable">653</div>
<div class="hideable">654</div>
<div class="hideable">655</div>
<div class="hideable">656</div>
<div class="hideable">657</div>
<div class="hideable">658</div>
<div class="hideable">659</div>
<div class="hideable">660</div>
<div class="hideable">661</div>
<div class="hideable">662</div>
<div class="hideable">663</div>
<div class="hideable">664</div>
<div class="hideable">665</div>
<div class="hideable">666</div>
<div class="hideable">667</div>
<div class="hideable">668</div>
<div class="hideable">669</div>
<div class="hideable">670</div>
<div class="hideable">671</div>
<div class="hideable">672</div>
<div class="hideable">673</div>
<div class="hideable">674</div>
<div class="hideable">675</div>
<div class="hideable">676</div>
<div class="hideable">677</div>
<div class="hideable">678</div>
<div class="hideable">679</div>
<div class="hideable">680</div>
<div class="hideable">681</div>
<div class="hideable">682</div>
<div class="hideable">683</div>
<div class="hideable">684</div>
<div class="hideable">685</div>
<div class="hideable">686</div>
<div class="hideable">687</div>
<div class="hideable">688</div>
<div class="hideable">689</div>
<div class="hideable">690</div>
<div class="hideable">691</div>
<div class="hideable">692</div>
<div class="hideable">693</div>
<div class="hideable">694</div>
<div class="hideable">695</div>
<div class="hideable">696</div>
<div class="hideable">697</div>
<div class="hideable">698</div>
<div class="hideable">699</div>
<div class="hideable">700</div>
<div class="hideable">701</div>
<div class="hideable">702</div>
<div class="hideable">703</div>
<div class="hideable">704</div>
<div class="hideable">705</div>
<div class="hideable">706</div>
<div class="hideable">707</div>
<div class="hideable">708</div>
<div class="hideable">709</div>
<div class="hideable">710</div>
<div class="hideable">711</div>
<div class="hideable">712</div>
<div class="hideable">713</div>
<div class="hideable">714</div>
<div class="hideable">715</div>
<div class="hideable">716</div>
<div class="hideable">717</div>
<div class="hideable">718</div>
<div class="hideable">719</div>
<div class="hideable">720</div>
<div class="hideable">721</div>
<div class="hideable">722</div>
<div class="hideable">723</div>
<div class="hideable">724</div>
<div class="hideable">725</div>
<div class="hideable">726</div>
<div class="hideable">727</div>
<div class="hideable">728</div>
<div class="hideable">729</div>
<div class="hideable">730</div>
<div class="hideable">731</div>
<div class="hideable">732</div>
<div class="hideable">733</div>
<div class="hideable">734</div>
<div class="hideable">735</div>
<div class="hideable">736</div>
<div class="hideable">737</div>
<div class="hideable">738</div>
<div class="hideable">739</div>
<div class="hideable">740</div>
<div class="hideable">741</div>
<div class="hideable">742</div>
<div class="hideable">743</div>
<div class="hideable">744</div>
<div class="hideable">745</div>
<div class="hideable">746</div>
<div class="hideable">747</div>
<div class="hideable">748</div>
<div class="hideable">749</div>
<div class="hideable">750</div>
<div class="hideable">751</div>
<div class="hideable">752</div>
<div class="hideable">753</div>
<div class="hideable">754</div>
<div class="hideable">755</div>
<div class="hideable">756</div>
<div class="hideable">757</div>
<div class="hideable">758</div>
<div class="hideable">759</div>
<div class="hideable">760</div>
<div class="hideable">761</div>
<div class="hideable">762</div>
<div class="hideable">763</div>
<div class="hideable">764</div>
<div class="hideable">765</div>
<div class="hideable">766</div>
<div class="hideable">767</div>
<div class="hideable">768</div>
<div class="hideable">769</div>
<div class="hideable">770</div>
<div class="hideable">771</div>
<div class="hideable">772</div>
<div class="hideable">773</div>
<div class="hideable">774</div>
<div class="hideable">775</div>
<div class="hideable">776</div>
<div class="hideable">777</div>
<div class="hideable">778</div>
<div class="hideable">779</div>
<div class="hideable">780</div>
<div class="hideable">781</div>
<div class="hideable">782</div>
<div class="hideable">783</div>
<div class="hideable">784</div>
<div class="hideable">785</div>
<div class="hideable">786</div>
<div class="hideable">787</div>
<div class="hideable">788</div>
<div class="hideable">789</div>
<div class="hideable">790</div>
<div class="hideable">791</div>
<div class="hideable">792</div>
<div class="hideable">793</div>
<div class="hideable">794</div>
<div class="hideable">795</div>
<div class="hideable">796</div>
<div class="hideable">797</div>
<div class="hideable">798</div>
<div class="hideable">799</div>
<div class="hideable">800</div>
<div class="hideable">801</div>
<div class="hideable">802</div>
<div class="hideable">803</div>
<div class="hideable">804</div>
<div class="hideable">805</div>
<div class="hideable">806</div>
<div class="hideable">807</div>
<div class="hideable">808</div>
<div class="hideable">809</div>
<div class="hideable">810</div>
<div class="hideable">811</div>
<div class="hideable">812</div>
<div class="hideable">813</div>
<div class="hideable">814</div>
<div class="hideable">815</div>
<div class="hideable">816</div>
<div class="hideable">817</div>
<div class="hideable">818</div>
<div class="hideable">819</div>
<div class="hideable">820</div>
<div class="hideable">821</div>
<div class="hideable">822</div>
<div class="hideable">823</div>
<div class="hideable">824</div>
<div class="hideable">825</div>
<div class="hideable">826</div>
<div class="hideable">827</div>
<div class="hideable">828</div>
<div class="hideable">829</div>
<div class="hideable">830</div>
<div class="hideable">831</div>
<div class="hideable">832</div>
<div class="hideable">833</div>
<div class="hideable">834</div>
<div class="hideable">835</div>
<div class="hideable">836</div>
<div class="hideable">837</div>
<div class="hideable">838</div>
<div class="hideable">839</div>
<div class="hideable">840</div>
<div class="hideable">841</div>
<div class="hideable">842</div>
<div class="hideable">843</div>
<div class="hideable">844</div>
<div class="hideable">845</div>
<div class="hideable">846</div>
<div class="hideable">847</div>
<div class="hideable">848</div>
<div class="hideable">849</div>
<div class="hideable">850</div>
<div class="hideable">851</div>
<div class="hideable">852</div>
<div class="hideable">853</div>
<div class="hideable">854</div>
<div class="hideable">855</div>
<div class="hideable">856</div>
<div class="hideable">857</div>
<div class="hideable">858</div>
<div class="hideable">859</div>
<div class="hideable">860</div>
<div class="hideable">861</div>
<div class="hideable">862</div>
<div class="hideable">863</div>
<div class="hideable">864</div>
<div class="hideable">865</div>
<div class="hideable">866</div>
<div class="hideable">867</div>
<div class="hideable">868</div>
<div class="hideable">869</div>
<div class="hideable">870</div>
<div class="hideable">871</div>
<div class="hideable">872</div>
<div class="hideable">873</div>
<div class="hideable">874</div>
<div class="hideable">875</div>
<div class="hideable">876</div>
<div class="hideable">877</div>
<div class="hideable">878</div>
<div class="hideable">879</div>
<div class="hideable">880</div>
<div class="hideable">881</div>
<div class="hideable">882</div>
<div class="hideable">883</div>
<div class="hideable">884</div>
<div class="hideable">885</div>
<div class="hideable">886</div>
<div class="hideable">887</div>
<div class="hideable">888</div>
<div class="hideable">889</div>
<div class="hideable">890</div>
<div class="hideable">891</div>
<div class="hideable">892</div>
<div class="hideable">893</div>
<div class="hideable">894</div>
<div class="hideable">895</div>
<div class="hideable">896</div>
<div class="hideable">897</div>
<div class="hideable">898</div>
<div class="hideable">899</div>
<div class="hideable">900</div>
<div class="hideable">901</div>
<div class="hideable">902</div>
<div class="hideable">903</div>
<div class="hideable">904</div>
<div class="hideable">905</div>
<div class="hideable">906</div>
<div class="hideable">907</div>
<div class="hideable">908</div>
<div class="hideable">909</div>
<div class="hideable">910</div>
<div class="hideable">911</div>
<div class="hideable">912</div>
<div class="hideable">913</div>
<div class="hideable">914</div>
<div class="hideable">915</div>
<div class="hideable">916</div>
<div class="hideable">917</div>
<div class="hideable">918</div>
<div class="hideable">919</div>
<div class="hideable">920</div>
<div class="hideable">921</div>
<div class="hideable">922</div>
<div class="hideable">923</div>
<div class="hideable">924</div>
<div class="hideable">925</div>
<div class="hideable">926</div>
<div class="hideable">927</div>
<div class="hideable">928</div>
<div class="hideable">929</div>
<div class="hideable">930</div>
<div class="hideable">931</div>
<div class="hideable">932</div>
<div class="hideable">933</div>
<div class="hideable">934</div>
<div class="hideable">935</div>
<div class="hideable">936</div>
<div class="hideable">937</div>
<div class="hideable">938</div>
<div class="hideable">939</div>
<div class="hideable">940</div>
<div class="hideable">941</div>
<div class="hideable">942</div>
<div class="hideable">943</div>
<div class="hideable">944</div>
<div class="hideable">945</div>
<div class="hideable">946</div>
<div class="hideable">947</div>
<div class="hideable">948</div>
<div class="hideable">949</div>
<div class="hideable">950</div>
<div class="hideable">951</div>
<div class="hideable">952</div>
<div class="hideable">953</div>
<div class="hideable">954</div>
<div class="hideable">955</div>
<div class="hideable">956</div>
<div class="hideable">957</div>
<div class="hideable">958</div>
<div class="hideable">959</div>
<div class="hideable">960</div>
<div class="hideable">961</div>
<div class="hideable">962</div>
<div class="hideable">963</div>
<div class="hideable">964</div>
<div class="hideable">965</div>
<div class="hideable">966</div>
<div class="hideable">967</div>
<div class="hideable">968</div>
<div class="hideable">969</div>
<div class="hideable">970</div>
<div class="hideable">971</div>
<div class="hideable">972</div>
<div class="hideable">973</div>
<div class="hideable">974</div>
<div class="hideable">975</div>
<div class="hideable">976</div>
<div class="hideable">977</div>
<div class="hideable">978</div>
<div class="hideable">979</div>
<div class="hideable">980</div>
<div class="hideable">981</div>
<div class="hideable">982</div>
<div class="hideable">983</div>
<div class="hideable">984</div>
<div class="hideable">985</div>
<div class="hideable">986</div>
<div class="hideable">987</div>
<div class="hideable">988</div>
<div class="hideable">989</div>
<div class="hideable">990</div>
<div class="hideable">991</div>
<div class="hideable">992</div>
<div class="hideable">993</div>
<div class="hideable">994</div>
<div class="hideable">995</div>
<div class="hideable">996</div>
<div class="hideable">997</div>
<div class="hideable">998</div>
<div class="hideable">999</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Using jQuery hide() and show()
$('.hideable').hide();
$('.hideable').show();
ready
Using CSS class to hide/show (class applied using jQuery)
$('.hideable').addClass('hidden');
$('.hideable').removeClass('hidden');
ready
Using all-native, with an external iterator
var nodes = document.getElementsByClassName('hideable');
for (var i=nodes.length-1; i>=0; i--){
    nodes[i].classList.add('hidden');
}
for (var i=nodes.length-1; i>=0; i--){
    nodes[i].classList.remove('hidden');
}
 
ready
Forcing use of Array.forEach
var nodes = document.getElementsByClassName('hideable');
Array.prototype.forEach.call(nodes, function(elem){
    elem.classList.add('hidden');
});
Array.prototype.forEach.call(nodes, function(elem){
    elem.classList.remove('hidden');
});
ready
Using lodash for internal iteration
var nodes = document.getElementsByClassName('hideable');
_(nodes).forEach(function(elem){
    elem.classList.add('hidden');
});
_(nodes).forEach(function(elem){
    elem.classList.remove('hidden');
});
ready

Revisions

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