Benchmark: JS for vs while 2

HTML Preparation code:

<!DOCTYPE html>
	<html lang="pl" dir="ltr" vocab="http://schema.org" typeof="Blog">
		<head>
			<meta charset="UTF-8">

			<meta property="url" content="https://example.net/Super-hiper-wazny-wpis">
			<meta name="description" content="Super hiper wpis na temat czegokolwiek">
			<meta name="dcterms.description" lang="pl" content="Super hiper wpis na temat czegokolwiek">
			<meta name="keywords" content="Bardzo ważne słowa kluczowe">
			<meta name="dcterms.subject" lang="pl" content="Bardzo ważne słowa kluczowe; rozdzielone średnikiem">
			<meta name="application-name" content="Super hiper blog">
			<meta name="msapplication-tooltip" content="Niesamowity blog o niesamowitych sprawach">
			<meta name="msapplication-starturl" content="http://example.net">
			<meta name="msapplication-window" content="width=1024;height=768">
			<meta property="og:site_name" content="Example.net - fajowy blog, na którym bloguję">
			<meta property="og:url" content="https://example.net">
			<meta property="og:title" content="Super hiper ważny wpis | Example.net - fajowy blog, na którym bloguję">
			<meta property="og:image" content="https://example.net/images/favicon.png">

			<link rel="author" href="https://plus.google.com/108791847143656151689/">
			<link rel="alternate" type="application/rss+xml" title="Wpisy na RSS" href="http://example.net/feed">
			<link rel="alternate" type="application/atom+xml" title="Wpisy na ATOM" href="http://example.net/atom">
			<link rel="index" title="Strona główna" href="https://example.net">
			<link rel="prev" title="Jakiś hiper poprzedni wpis" href="https://example.net/Jakis-hiper-poprzedni-wpis">
			<link rel="next" title="Jakiś super następny wpis" href="https://example.net/Jakis-super-nastepny-wpis">
			<link rel="canonical" href="https://example.net/Super-hiper-wazny-wpis">
			<link rel="pingback" href="https://example.net/xmlrpc.php">
			<link rel="icon" href="https://example.net/images/favicon.png" type="image/png">
			<link rel="apple-touch-icon" href="https://example.net/images/apple-touch-icon.png">
			<link rel="stylesheet" href="https://example.net/css/style.css">

			<title property="name">Super hiper ważny wpis | Example.net - fajowy blog, na którym bloguję</title>

			<!--[if lt IE 9]>
				<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv-printshiv.min.js"></script>
			<![endif]-->
		</head>
		<body>
			<a href="#tresc" class="focus-only">Przejdź do treści</a>

			<header id="naglowek">
				<nav id="menu" vocab="http://schema.org" typeof="SiteNavigationElement">
					<ul>
						<li class="xxx-xxx__xx">
							<a href="https://example.net" rel="index">
								<p>Example.net - fajowy blog, na którym bloguję</p>
								<p>Motto</p>
							</a>
						</li>
						<li><a href="whatever.html">Whatever</a></li>
						<li><a href="wherever.html">Wherever</a></li>
						<li><a href="whenever.html">Whenever</a></li>
					</ul>
				</nav>
				<form action="search.php" method="post" role="search">
					<p>
						<label class="visuallyhidden" for="search-input">Szukaj:</label>
						<input type="search" id="search-input" name="q" placeholder="Wpisz szukaną frazę…" required>
						<button type="submit" name="submit" value="1">Szukaj</button>
					</p>
				</form>
			</header>

			<main id="tresc" class="hfeed" property="mainEntityOfPage" tabindex="-1">
				<article class="post h-entry" property="blogPost" vocab="http://schema.org" typeof="BlogPosting" id="super-hiper-wazny-wpis">
					<header>
						<h1 class="p-name" property="headline">
							<a href="https://example.net/Super-hiper-wazny-wpis" class="bookmark u-uid u-url" rel="bookmark" title="Permalink do Super hiper ważny wpis">Super hiper ważny wpis</a>
						</h1>
						<p class="post-info">Opublikowano <time datetime="2011-01-07T20:40:06+00:00" class="dt-published" property="datePublished">07.01.2011</time> przez <a href="https://example.net/author" property="author" vocab="http://schema.org" typeof="Person" rel="author" class="author p-author h-card"><span property="name">Comandeer</span></a></p>
					</header>
					<div class="e-content" property="articleBody">
						<figure property="image" class="xxx-xxx__xx">
							<picture>
								<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
								<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
								<source srcset="small-1.jpg 1x, small-2.jpg 2x">
								<img src="small-1.jpg" alt="Kwadratowa ramka z czerwonym krzyżykiem w środku">
							</picture>
							<figcaption>Bardzo ważny obrazek[…],który jest bardzo ważny</figcaption>
						</figure>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu justo enim, ac faucibus massa. Vestibulum in elit aliquam purus sollicitudin adipiscing ac et sapien. Curabitur eleifend justo diam, et viverra nisi. Quisque a ipsum vehicula nunc vestibulum posuere. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum porttitor, neque eu congue fermentum, velit ante pellentesque arcu, a posuere risus tortor vel ante. Donec et neque at odio hendrerit mattis sed eu tellus. Nullam accumsan leo ut felis suscipit vehicula posuere erat eleifend. Donec semper lorem eu nibh tincidunt varius.</p>
						<h2 id="podtytul">Podtytuł</h2>
						<p>Vivamus leo arcu, convallis id iaculis sit amet, fringilla et nunc. Donec aliquam, justo at mollis porta, enim lorem tempor eros, id iaculis arcu elit ac sem. In et erat eu metus ornare vestibulum non at arcu. Integer in nisi massa. Etiam nulla felis, rhoncus non pharetra sed, vehicula eu risus. Vestibulum sodales nunc nisi, vitae gravida nisl. Quisque lacus ipsum, commodo ac hendrerit vitae, porta dapibus tortor. Mauris sed risus diam. Morbi lacus elit, euismod dapibus interdum id, fermentum et mi. Nam at neque orci. Sed ac hendrerit augue. Vestibulum pharetra mattis mattis. Sed porta turpis dolor, condimentum blandit libero. Aliquam non nisi mi. Nulla nec sem elit. Duis blandit viverra lacus, in convallis mauris dictum et. Ut eget risus enim. Suspendisse potenti. Aenean leo odio, luctus quis eleifend quis, consectetur sit amet ipsum. Curabitur commodo leo ac risus dignissim at porttitor turpis fringilla.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper neque a magna sodales sodales. Nulla id enim sem, sit amet ultrices dolor. Vestibulum sollicitudin dolor quis quam vehicula egestas. Ut urna erat, gravida a tristique non, congue nec elit. Aenean tincidunt purus sed nisl semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus in orci sit amet ligula posuere mollis a in diam. Nam enim tortor, ultrices quis laoreet nec, egestas non leo. Nam non fringilla turpis. Quisque vitae pellentesque nibh. Etiam dictum tincidunt ultricies. Cras sit amet aliquam odio. Morbi quis urna a nulla egestas placerat sed in lacus. Morbi id urna lacinia nunc bibendum ultricies. In pretium leo non odio feugiat porttitor. Donec aliquet purus in purus pretium aliquam. Etiam aliquet nibh ut nibh semper egestas. Cras in purus quam, nec posuere diam. Aliquam erat volutpat.</p>
						<p>Morbi porta blandit nisi at fermentum. Praesent vel sagittis urna. Pellentesque ipsum eros, vestibulum id gravida vitae, dictum vel sapien. Nam placerat lacus non lacus facilisis vitae hendrerit nibh adipiscing. Sed aliquet nisi ligula, eu viverra turpis. Curabitur tincidunt arcu in enim tempus sit amet auctor nunc luctus. Praesent dui turpis, lobortis in euismod quis, fringilla at felis. Nullam ligula purus, mattis nec tristique non, aliquam vitae sem. Quisque sit amet magna magna, eget aliquam orci. Aliquam placerat diam sit amet erat gravida fermentum. Maecenas malesuada nibh quis lorem pellentesque laoreet. Vestibulum pulvinar tincidunt fringilla. Nullam pellentesque felis ac nisi dictum egestas. Nunc metus mi, euismod non convallis nec, varius et felis. Pellentesque vel lacus turpis. In hac habitasse platea dictumst. Morbi sodales mauris a nisi feugiat pulvinar.</p>
						<p>Vivamus vitae lectus ut dui luctus iaculis. Pellentesque quis lectus id ipsum venenatis bibendum. Pellentesque non magna nec purus mollis suscipit. Nulla vestibulum interdum ante, vestibulum ullamcorper est vulputate vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque aliquet mollis rhoncus. Phasellus imperdiet posuere bibendum. Quisque consequat imperdiet nibh vitae pretium. Suspendisse quis eros libero, non luctus mauris. Nulla laoreet nibh at eros scelerisque condimentum. Cras aliquam velit at orci luctus et tincidunt arcu scelerisque. Donec at quam magna. Integer leo leo, ultrices facilisis bibendum vel, feugiat interdum neque. Fusce vitae nibh sapien, sit amet consequat velit. Fusce adipiscing tortor id nibh fringilla sollicitudin. Donec sodales sapien in sapien rutrum rutrum. Nam quis enim nec nibh varius mattis nec in ante. Morbi non est eu diam elementum interdum. Morbi at odio non libero tempus eleifend nec quis ligula. Cras pellentesque mauris sit amet felis vestibulum tincidunt.</p>
					</div>
					<footer>
						<section id="tagi" class="tags" property="articleSection">
							<h2>Tagi</h2>
								<ul>
									<li>
										<a href="https://example.net/tag/Tag1" rel="tag" class="p-category">Tag1</a>
									</li>
									<li>
										<a href="https://example.net/tag/Tag2" rel="tag" class="p-category">Tag2</a>
									</li>
								</ul>
						</section>
					</footer>

					<section id="komentarze" class="comments">
						<h2>Komentarze</h2>
						<ol>
							<li id="comment-25" class="xxx-xxx__xx" property="comment" vocab="http://schema.org" typeof="Comment">
								<div class="comment-meta">
									<a href="#comment-25">
										<time datetime="2011-01-07T20:41:06+00:00" property="dateCreated">07.01.2011, 20:41</time>
									</a>
									<b property="author" vocab="http://schema.org" typeof="Person"><a href="http://example.net/" property="name url"><img alt="" src="http://avatary.gdziekolwiek.com/Comandeer" height="48" width="48" property="image">Comandeer</a> skomentował</b>
								</div>
								<p property="text">Ale komentarz!</p>
							</li>
							<li id="comment-26" property="comment" vocab="http://schema.org" typeof="Comment">
								<div class="comment-meta">
									<a href="#comment-26">
										<time datetime="2017-01-08T20:08:30+01:00" property="dateCreated">07.01.2017, 20:08</time>
									</a>
									<b property="author" vocab="http://schema.org" typeof="Person"><a href="http://example.net/" property="name url"><img alt="" src="http://example.net/avatary/Anonim" height="48" width="48" property="image">Anonim</a> skomentował</b>
								</div>
								<p property="text">Inny komentarz!</p>
							</li>
						</ol>

						<form action="https://example.net/comment.php" method="post" id="dodaj-komentarz">
							<h3>Dodaj komentarz</h3>
								<p>
									<label for="comment-author">Nick</label>
									<input type="text" name="author" id="comment-author" required>
								</p>
								<p>
									<label for="comment-email">E-mail</label>
									<input type="email" name="email" id="comment-email" required>
								</p>
								<p>
									<label for="comment-url">Strona</label>
									<input type="url" name="url" id="comment-url">
								</p>
								<p>
									<label for="comment-comment">Komentarz</label>
									<textarea name="comment" id="comment-comment" cols="48" rows="7" required></textarea>
								</p>
								<p>
									<button name="submit" type="submit" id="comment-submit">Wyślij</button>
								</p>
								<input type="hidden" name="comment_post_ID" value="88">
						</form>
					</section>
				</article>
			</main>

			<aside id="aside">
				<h2>Dodatkowe informacje</h2>
				<article class="author h-card" vocab="http://schema.org" typeof="Person">
					<h3>O autorze blogaska</h3>
					<p>Nazywam się <a href="https://example.net/author" class="fn p-name u-url" property="name url">Comandeer</a>, mieszkam w uroczym miasteczku <span class="adr p-locality" property="address" vocab="http://schema.org" typeof="PostalAddress"><span property="addressLocality">Świętochłowice</span></span> i interesuję się webmasterką.</p>
				</article>
				<article class="tags cloud">
					<h3>Tagi</h3>
					<ul>
						<li>
							<a class="xxx-xxx__xx" href="https://example.net/tag/Tag1">Tag1</a>
						</li>
						<li>
							<a href="https://example.net/tag/Tag2">Tag2</a>
						</li>
						<li>
							<a href="https://example.net/tag/Tag3">Tag3</a>
						</li>
						<li>
							<a href="https://example.net/tag/Tag2">Tag4</a>
						</li>
					</ul>
				</article>
				<article class="archive">
					<h3>Archiwum</h3>
					<ol>
						<li>
							<a href="https://example.net/archiwum/2011/01">Styczeń 2011</a>
						</li>
						<li>
							<a href="https://example.net/archiwum/2010/12">Grudzień 2010</a>
						</li>
					</ol>
				</article>
			</aside>

			<footer id="stopka" class="xxx-xxx__xx">Copyright &copy; 2017 by <a href="https://example.net/author" rel="author">Comandeer</a></footer>

			<script src="https://example.net/jquery.js" defer></script>
			<script src="https://example.net/scripty.js" defer></script>
		</body>
	</html>

Tests:

FOR elByClass: lenght in
var elByClass = document.getElementsByClassName('xxx-xxx__xx'); for (let i=elByClass.length-1; i<=0; i--) { elByClass[i].parentNode.removeChild(elByClass[i]); }
FOR elByqSAll: lenght in
var elByqSAll = document.querySelectorAll('.xxx-xxx__xx'); for (let i=elByqSAll.length-1; i<=0; i--) { elByqSAll[i].parentNode.removeChild(elByqSAll[i]); }
FOR elByClass: lenght out
var elByClass = document.getElementsByClassName('xxx-xxx__xx'); const len = elByClass.length; for (; i<=0; i--) { elByClass[i].parentNode.removeChild(elByClass[i]); }
FOR elByqSAll: lenght out
var elByqSAll = document.querySelectorAll('.xxx-xxx__xx'); let i=elByqSAll.length-1; for (; i<=0; i--) { elByqSAll[i].parentNode.removeChild(elByqSAll[i]); }
WHILE elByClass: lenght in
var elByClass = document.getElementsByClassName('xxx-xxx__xx'); while (elByClass.length > 0) { elByClass[0].parentNode.removeChild(elByClass[0]); }
WHILE elByClass: length out
var elByClass = document.getElementsByClassName('xxx-xxx__xx'); const bbb = elByClass.length; while (bbb > 0) { elByClass[0].parentNode.removeChild(elByClass[0]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
FOR elByClass: lenght in
FOR elByqSAll: lenght in
FOR elByClass: lenght out
FOR elByqSAll: lenght out
WHILE elByClass: lenght in
WHILE elByClass: length out

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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
FOR elByClass: lenght in	2566921.0 Ops/sec
FOR elByqSAll: lenght in	308581.4 Ops/sec
FOR elByClass: lenght out	2651258.0 Ops/sec
FOR elByqSAll: lenght out	253285.3 Ops/sec
WHILE elByClass: lenght in	2459647.0 Ops/sec
WHILE elByClass: length out	2352281.0 Ops/sec

JS for vs while 2 (version: 1)

Comparing performance of: FOR elByClass: lenght in vs FOR elByqSAll: lenght in vs FOR elByClass: lenght out vs FOR elByqSAll: lenght out vs WHILE elByClass: lenght in vs WHILE elByClass: length out

Created: one year ago by: Registered User

Jump to the latest result

FOR elByClass: lenght in

FOR elByqSAll: lenght in

FOR elByClass: lenght out

FOR elByqSAll: lenght out

WHILE elByClass: lenght in

WHILE elByClass: length out

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A