How To Determine The Number Of CPU Cores In JavaScript

In today's modern technology era, increasing speed and performance are top priorities in software development. Especially when dealing with programming languages like JavaScript, understanding the available hardware resources is crucial. One critical aspect of optimizing JavaScript application performance is knowing the number of CPU cores on the user's machine. In this article, we will discuss in detail how to determine the number of CPU cores in JavaScript. Not only that, but we will also explore several simple implementation examples that can assist you in optimizing your JavaScript code to run more efficiently on various devices. So, the author will use one of the available functions in JavaScript.

Navigator Hardware Concurrency

The `navigator.hardwareConcurrency` function is a part of the `navigator` object in JavaScript that provides information about the number of CPU cores available on the user's device. This property returns a number indicating the count of physical CPU cores present in the hardware system. The information provided by `navigator.hardwareConcurrency` is beneficial in optimizing the performance of JavaScript applications. By knowing the number of CPU cores available, you can design algorithms or parallel tasks that are suitable for leveraging the full potential of the user's hardware.

The information provided by `navigator.hardwareConcurrency` is beneficial in optimizing the performance of JavaScript applications. By knowing the number of CPU cores available, you can design algorithms or parallel tasks that are suitable for leveraging the full potential of the user's hardware. Some important points about navigator hardware concurrency:

  1. Default Value: If the device cannot detect the number of CPU cores, the default value is 2. This value may apply to many devices, especially if information about the hardware is not available.
  2. Parallelism Approach: In scenarios where you need to perform heavy tasks in parallel, such as processing large data or complex graphics rendering, knowing the number of CPU cores allows you to divide the workload into multiple threads to speed up execution.
  3. Browser Limitations: Although this property exists in many modern browsers, not all browsers support it. Therefore, before using it, it is important to check the browser compatibility documentation.
  4. No Performance Guarantee: While knowing the number of CPU cores can help in performance optimization, it is not the only factor determining the application's performance. There are many other aspects such as RAM, GPU, and processor speed that also influence performance.

You can visit its official website at the following site developer mozilla. Let's begin the tutorial on how to use this function.

Tutorial

  1. First, create a folder named cpu-cores-js to facilitate our tutorial.
  2. Next, open your text editor, it could be Notepad++ or any other editor.
  3. The next step is, of course, to create the HTML file named index.html so that we can display the results on the HTML page, and save it in the cpu-cores-js folder.
  4. Here is the HTML code:
    5. <html>
<head>
    <title>CPU cores JS Tutorial</title>
</head>

<body>

 <h3>Number of CPU cores on your device : <div class="cores" style="display:inline;"></div></h3>

<script src="script.js"></script>
</body>
</html>

    The code above is quite simple. We created an HTML structure by adding a heading tag and a div with a class named cores to display the result using JavaScript. Finally, we called the JavaScript script using the script tag.

  5. Well, for the JavaScript script, you need to create a JavaScript file named script.js and also save it in the cpu-cores-js folder.
  6. Here is the javascript code:
    7. let cores = [];
let displayCPUCores = document.querySelector('.cores');
for (let i = 0; i < window.navigator.hardwareConcurrency; i++) {
  cores.push(i);
  displayCPUCores.innerText = cores.length;
}

    The code is a JavaScript script aimed at displaying the number of CPU cores available on the user's device on a web page using a div element with the class cores. Let's explain step by step:

    let cores = [];

    - This line declares an empty array named cores. The array will be used to store numbers representing each CPU core.

    let displayCPUCores = document.querySelector('.cores');

    - This line selects an HTML element with the class cores and assigns it to the variable displayCPUCores. It will be used to display the number of CPU cores on the web page.

    for (let i = 0; i < window.navigator.hardwareConcurrency; i++) {}

    - This is a for loop starting from 0 and running until the number of CPU cores available on the device, obtained from the window.navigator.hardwareConcurrency property.

    cores.push(i);

    - Inside the loop, each iteration, the value of i (representing the core number) is pushed into the cores array.

    displayCPUCores.innerText = cores.length;

    - In each iteration, the number of elements in the cores array (representing the number of CPU cores) is assigned as text to the displayCPUCores element. It will update the content of the HTML element with the number of CPU cores.

    In summary, this script initializes an empty array cores and selects the div element with class cores from the HTML. Then, it iterates through a loop from 0 to the number of CPU cores available on the device. In each iteration, it pushes the core number into the cores array and updates the text of the selected div element with the number of CPU cores. As a result, the web page will display the number of CPU cores available on the user's device.

  7. How about the result? When you open the index.html file in the cpu-cores-js folder, you can see the result below:
  8. Above, the author used an ASUS notebook and has a 2 cores CPU. As proof, you can see the picture below:
  9. Done.

Closing

With this tutorial, you can learn how to use the navigator hardware concurrency function in JavaScript to communicate with hardware devices. Hope it's helpful!