Benchmark: ID vs Class Speed

HTML Preparation code:

<!doctype html>
<html dir="ltr" lang="ru">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Андрей Янукович. Хронология</title>
		<meta name="author" content="Андрей Янукович">
		<meta name="description" content="Хронология создания произведений">
		<meta name="theme-color" content="#ffffff" id="theme-color">
		<meta name="google-site-verification" content="4a1JK2PHFLO7VrhSm6yUQojYrsRgBSLoyN7fQcoVv5s">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<link rel="icon" href="/favicon.ico" sizes="any">
		<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<link rel="mask-icon" href="/safari-pinned-tab.png">
		<link rel="manifest" href="/ay.webmanifest">
		<link rel="preload" href="/css/light-theme.css" as="style">
		<link rel="preload" href="/css/dark-theme.css" as="style">
		<link rel="stylesheet" href="/css/style.css">
		<link rel="stylesheet" href="/css/light-theme.css" id="theme-link">
		<script src="/js/jquery-3.6.0.js"></script>
		<script src="/js/headroom.js"></script>
		<script src="/js/js.cookie-2.2.1.min.js"></script>
		<script src="/js/script.js"></script>
	</head>
	<body>
		<noscript>
			<style>.allwrapper, .title_back, .title {display:none;}</style>
			<div class="nojsmsg">В браузере отключена поддержка JavaScript.</div>
		</noscript>
		<div class="title_print">Андрей Янукович. Хронология</div>
		<div class="allwrapper">
			<div class="header_w">
				<div class="leaf"></div>
				<div class="gear"></div>
			</div>
			<div class="menu_w">
				<a href="/rhymes.html"><span>СТИХИ</span></a><div></div>
				<a href="/prose.html"><span>ПРОЗА</span></a><div></div>
				<a href="/dramas.html"><span>ПЬЕСЫ</span></a><div></div>
				<a href="/history.html"><span>ИСТОРИЯ</span></a><div></div>
				<a href="/map.html"><span>КАРТА САЙТА</span></a><div></div>
				<a href="/search.html"><span>ПОИСК ПО САЙТУ</span></a><div></div>
			</div>
			<div class="navbar">
				<div class="gear "></div>
				<div class="menu_btn " role="button" aria-label="Открыть меню сайта">
					<span class="line line1"></span>
					<span class="line line2"></span>
					<span class="line line3"></span>
				</div>
				<div class="menu_back"></div>
				<div class="menu_block">
					<div class="menu menu_right">
						<div class="menu_big">
							<div><a href="/rhymes.html">СТИХИ</a></div>
							<div><a href="/prose.html">ПРОЗА</a></div>
							<div><a href="/dramas.html">ПЬЕСЫ</a></div>
						</div>
						<div class="divider"></div>
						<div class="menu_small">
							<div><a href="/history.html">ИСТОРИЯ</a></div>
							<div><a href="/map.html">КАРТА САЙТА</a></div>
							<div><a href="/search.html">ПОИСК ПО САЙТУ</a></div>
							<div><a href="/ebooks.html">СКАЧАТЬ КНИГУ</a></div>
							<div><a href="/buy.html">КУПИТЬ КНИГУ</a></div>
						</div>
					</div>
				</div>
<div class="nav unique"><div>
<svg xmlns="http://www.w3.org/2000/svg" width="97" height="46" viewBox="0 0 456 217" shape-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero"><path d="M396 103c0 6-2 9-8 9-5 0-8-4-8-9V69l-31 38c-2 3-5 5-8 5-5 0-8-3-8-8V48c0-6 2-10 8-10 5 0 8 3 8 9v35l31-39c3-3 5-5 8-5 6 0 8 4 8 10v55zm60 0c0 6-2 9-8 9-5 0-8-4-8-9V82l-21 26c-3 4-8 5-13 2-4-3-3-9 0-13l15-16c-10-1-17-9-17-19 0-15 10-23 25-23h19c5 0 8 3 8 8v56zm-16-33V54h-11c-5 0-8 3-8 8s4 8 9 8h10zM64 103c0 6-3 9-9 9-5 0-8-4-8-9V69l-31 38c-2 3-4 5-8 5s-8-3-8-8V48c0-6 3-10 8-10s8 3 8 9v35l31-39c3-3 6-5 8-5 6 0 9 4 9 10v55zm65-2c0 10-15 12-23 12-11 0-20-4-26-11s-9-16-9-27 3-20 9-27c10-10 27-13 40-8 5 2 8 5 8 9s-2 8-7 8c-4 0-9-4-14-4-13 0-19 11-19 22 0 12 6 22 18 22 7 0 11-4 15-4 5 0 8 3 8 8zm59-55c0 5-3 8-9 8h-9v49c0 6-3 9-8 9-6 0-9-3-9-9V54h-9c-5 0-8-3-8-8s3-7 8-7h35c6 0 9 2 9 7zm78 29c0 22-13 38-36 38-22 0-35-16-35-38s12-38 35-38 36 16 36 38zm-18 0c0-11-5-23-18-23s-18 12-18 23c0 12 5 23 18 23s18-12 18-23zm78-11c0 14-9 24-23 24h-14v15c0 5-3 9-8 9-6 0-8-3-8-9V47c0-5 3-8 8-8h19c15 0 26 9 26 25zm-17-1c0-6-4-10-11-10h-9v20h10c5 0 10-4 10-10z" fill="#cf6a6a"/><path id="subs" d="M89 179h-6v-19c-7 3-17 5-23 1s-7-9-7-15v-14h7v13c0 5 0 9 2 10 6 5 15 2 21 0v-23h6v47zm8-34h28v5h-11v29h-6v-29H97v-5zm32 17c0-10 6-18 16-18 11 0 16 7 16 17 0 11-4 19-16 19-10 0-16-8-16-18zm6 0c0 17 20 17 20 0s-20-18-20 0zm51-17h6v26l16-26h6v34h-5v-26l-16 26h-7v-34zm55 0h6v14c2 0 3 0 4-1 2-2 3-8 6-11 2-3 5-2 8-2v5c-1 0-4-1-5 0-1 2-2 7-4 9-1 1-2 2-4 2 6 2 11 13 14 18h-6c-3-4-7-16-13-16v16h-6v-34zm29 17c0-10 6-18 16-18 11 0 16 7 16 17 0 11-5 19-16 19s-16-8-16-18zm6 0c0 6 3 13 10 13 8 0 10-7 10-13 0-17-20-18-20 0zm35-17h19v5h-13v29h-6v-34zm27 0h24v29h4v14h-5v-9h-27v9h-5v-14h3c4-5 6-15 6-29zm5 5c-1 11-2 19-5 24h18v-24h-13zm53 25c-4 3-8 5-13 5-6 0-11-3-11-10 0-12 16-10 23-13 1-6-1-8-8-8-5 0-7 1-9 6h-5c1-9 7-11 15-11 4 0 9 1 11 4 2 2 2 6 2 9 0 6-1 16 2 22h-6c-1-1-1-3-1-4zm-1-13c-5 2-17 1-17 8 0 4 3 5 7 5s8-2 9-5c2-3 1-6 1-8z" fill="#595959"/></svg>
</div></div>
</div>
<div class="inner">
<div class="history_cont">
<p class="author author_w"></p>
<p>Ранние произведения объединены в сборник "Всячина" (<a href="/hpr_toc.html">стихи</a>, <a href="/prose.html">проза</a>, <a href="/dramas.html">пьесы</a>),&nbsp;– сия <span style="white-space: nowrap">инкунабула</span> увидела свет в 1994 году.</p>
<p>В 1995 году отдельной книгой издана повесть <a href="/Text/Plant/p1.html">"Растение"</a>.</p>
<p>С 1999 по 2002 год вышли четыре книги стихов: <a href="/dream_toc.html">"В&nbsp;оболочке сна"</a> (1999), <a href="/iwas_toc.html">"Я&nbsp;жил на свете"</a> (1999), <a href="/sil_toc.html">"Тишина"</a> (2000), <a href="/res_toc.html">"Воскрешение"</a> (2002).</p>
<p>В 2015 году опубликована книга стихов <a href="/55_toc.html">"55"</a>, в&nbsp;2017 году&nbsp;– книга стихов <a href="/letter_toc.html">"Письмо в никуда"</a>, в&nbsp;2019 году&nbsp;– книга стихов <a href="/gekkon_toc.html">"Геккон"</a>.</p>
<p>Стишки по случаю, рифмованные экспромты, а также вирши, родившиеся на фоне алкоголиза&shy;ции, составили антологию <a href="/alkonost_toc.html">"Алконост"</a>.</p>
<p>В разделе <a href="/prose.html">"Проза"</a> опубликованы первые десять глав романа <a href="/Text/Despair/d1.html">"Отчаяние"</a>.</p>
<p>В 2019 году издана книга избранного&nbsp;– "Растение", объединившая под одной обложкой одноимённую повесть, несколько ранних рассказов и более двухсот стихотворений (<a href="/buy.html">бумажная</a> и <a href="/ebooks.html">электронная</a> версии книги).</p>
<p>По ссылке – бесценные воспоминания Евгении Ивановны Янукович: <a href="https://eugenia.ianukovich.ru/" target="_blank" rel="noreferrer">"Некоторые страницы истории и жизни моей <span style="white-space: nowrap">семьи"</span></a>.</p>
<p>Приятного чтения.</p>
</div>
				<div class="footer_n">
					<div class="arrow"></div>
					<div class="copyright_n"><span class="part1">2023</span></div>
					<div class="arrow"></div>
					<div class="copyright_n_hidden"><span class="part2"></span></div>
				</div>
			</div>
			<div class="footer_w">
				<div>Книга избранного</div>
				<a href="/ebooks.html">скачаmь</a>
				<a href="/buy.html">купиmь</a>
			</div>
			<div class="copyright_w"><span class="part1">2023. </span><span class="part2"></span></div>
			<div id="modal">
				<div class="modal-cont">
					<div><p>Настройки сайта<span>сохраняются в cookies браузера</span></p><div class="close"></div></div>
					<div class="removable">Расположение кнопки меню:</div>
					<form id="menu_pos" class="removable">
						<div><input type="radio" id="m_b_l" name="menu_btn" value=""><label for="m_b_l">Слева</label></div>
						<div><input type="radio" id="m_b_r" name="menu_btn" value="" checked><label for="m_b_r">Справа</label></div>
					</form>
					<div class="font">Размер шрифта на страницах произведений:</div>
					<form id="font_sizes">
						<div><input type="radio" id="font_small" name="font_size" value="" checked><label for="font_small">Малый</label></div>
						<div><input type="radio" id="font_medium" name="font_size" value=""><label for="font_medium">Средний</label></div>
						<div><input type="radio" id="font_large" name="font_size" value=""><label for="font_large">Крупный</label></div>
					</form>
					<div>Цветовая тема:</div>
					<form id="theme_change" class="theme_change">
						<div><input type="radio" id="theme_light" name="theme" value="" checked><label for="theme_light">Светлая</label></div>
						<div><input type="radio" id="theme_dark" name="theme" value=""><label for="theme_dark">Тёмная</label></div>
					</form>
				</div>
			</div>
		</div>
		<div class="copyright_print"><span class="part1">2023</span><br>https://ianukovich.ru</div>
	</body>
</html>

Tests:

ID
document.querySelector('#theme_change');
Class
document.querySelector('.theme_change');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ID
Class

Fastest: N/A

Slowest: N/A

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/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
ID	270220.8 Ops/sec
Class	437717.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll do my best to help you with this task.

It appears that you have a HTML document and some test cases for a benchmarking tool. The goal is to optimize the performance of the site by tweaking various settings, such as layout, font size, color scheme, and more.

To begin, I'll review the provided HTML code and extract any relevant information about the settings and their corresponding IDs or classes.

From the code, I can see that:

* There are two forms with radio buttons for changing the theme (light vs. dark)
* One form is for adjusting the font size (small, medium, large)
* Another form is for choosing the layout (left-aligned vs. right-aligned)

Using this information, I'll create test cases to optimize these settings.

**Test Case 1: ID**

Based on the provided HTML code, I've created a test case for changing the theme by ID:
```javascript
document.querySelector('#theme_change');
```
This test case should retrieve the first radio button with the ID `theme_light`.

**Test Case 2: Class**

Similarly, I've created a test case for changing the theme by class:
```javascript
document.querySelector('.theme_change');
```
This test case should retrieve all elements with the class `theme_change`, which contains the radio buttons.

Please let me know if these test cases meet your requirements or if you need further assistance.

Related benchmarks:

ID vs Class Speed (version: 0)

Comparing performance of: ID vs Class

Created: 3 years ago by: Guest

Jump to the latest result

ID

Class

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):