Run results for: document.body vs document.querySelector vs document.getElementsByTagName speed test

Run details:

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: Chrome 109

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Direct access

40.8M/s

getElementsByTagName 2

21.7M/s

getElementsByClassName 2

15.4M/s

querySelector

11.0M/s

getElementsByTagName

10.4M/s

querySelector 2

9.0M/s

getElementsByClassName

8.8M/s

View exact numbers

HTML Preparation code:

<!DOCTYPE html>
<html lang="ru">
<head>
</head>
<body class="bd">
  <div id="foo"></div>
</body>
</html>

Tests:

querySelector
const pageBody = document.querySelector('body');
Direct access
const pageBody = document.body;
getElementsByTagName
const pageBody = document.getElementsByTagName('body')[0];
getElementsByTagName 2
const pageBody = document.getElementsByTagName('body');
getElementsByClassName
const pageBody = document.getElementsByClassName('bd')[0]
getElementsByClassName 2
const pageBody = document.getElementsByClassName('bd')
querySelector 2
const pageBody = document.querySelector('.bd');