Simulating Frontends in Multi-Core Devices using Chrome DevTools
source link: https://blog.bitsrc.io/simulating-frontends-in-multi-core-devices-using-chrome-devtools-88e86e40abb2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Simulating Frontends in Multi-Core Devices using Chrome DevTools
JavaScript Multi-Core Web Apps Are Real, But Do You Know How To Test Them?
Do you know that you can simulate frontends in Chrome DevTools with any number of CPU cores you wish to have?
Google Chrome DevTools is one of the most common utilities among web developers. Due to its popularity, Google is constantly updating DevTools and releasing many features that most developers are unaware of.
In this article, I will discuss how you can simulate your multi-core supported frontends using Chrome DevTools.
Logical Processor Cores in Modern CPUs
In modern computer systems, the CPU includes multiple physical cores. It can be 2, 4, or even higher numbers. Notably, with the help of advanced CPU scheduling and pipelining techniques, computer architects have improved the throughput of CPUs by introducing logical cores to the CPU.
Logical CPU cores increase the number of threads executed parallelly at a given time without context switching. For example, suppose you are developing a performance-intensive web application. In that case, you can benefit from multiple logical cores available in the client’s device and use multi-core processing to deliver a seamless user experience.
Why Do You Need Multi-Core Processing in Web Development?
Even though JavaScript is single-threaded, we know it can have asynchronous execution. With the launch of the concept, “Web Workers”, developers could build parallel execution flows utilizing multi-core CPUs whenever available.
Web applications requiring complex background processing are the ideal candidates for multi-core processing. Some examples are:
- Web dashboards with multiple widgets, which require real-time data fetching.
- Real-time media streaming applications.
- Applications with complex arithmetic operations.
- Web applications that require bulk database IO operations in the background.
- Web applications that require smooth animations and transitions.
However, when developing web applications targeting multi-core devices, there is a challenge to solve.
The application you are building will have clients with single-core devices and a minimal number of logical cores. Therefore, you need to be able to check the number of cores initially before trying to utilize a large number of logical core-based processing flows.
The Navigator.hardwareConcurrency is a read-only Web API handy for knowing the number of logical CPU cores available in a device.
Using Navigator.hardwareConcurrency property, you can do a system query, as shown in the code snippet below.
<!DOCTYPE html>
<html lang="en"><head><title>CPU Logical Cores</title></head>
<body><h1></h1><script>document.querySelector("h1").textContent = "You have " + navigator.hardwareConcurrency +" CPU Logical Cores";
</script>
</body>
</html>
When a device returns a higher value for the above property, it implies that a particular machine has a higher number of logical cores. Therefore, it can execute a more significant number of web workers to achieve higher parallelism.
Not only JavaScript but also modern frontend frameworks like React support querying the client’s device to determine the multi-core count through the inbuilt APIs such as react-adaptive-hooks.
import React from 'react';
import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';
const MyComponent = () => {
const { numberOfLogicalProcessors } = useHardwareConcurrency();
return (
<div>
You have { numberOfLogicalProcessors } CPU Logical Cores
</div>
);
};
Because of these capabilities, you can develop dynamic web applications with multiple modes, such as “High-Performance Mode” and “Lite Mode”, to cater to all of your client devices.
During the development phase, you can easily simulate these frontends with Google Chrome DevTools to see how your website will perform on different CPU designs.
How to Simulate Multi-Core CPU Environments?
The Hardware Concurrency Simulation feature is already available in Google DevTools. Thanks to this great feature, now you can mock your browser to behave with custom logical cores as you wish. It is much easier than you expect. You do not need to install any other tools or set up third-party simulators. It is just a matter of inserting the number of multi-cores you wish to have using Chrome DevTools.
How to Enable This Feature?
Make sure you have the latest version of Google Chrome.
- On Google Chrome, click View -> Developer -> Developer Tools.
- Go to the Performance tab.
You may see the option “Hardware Concurrency” there, and you can check the option to provide the number of CPU cores you would like.
When you have enabled this configuration, a warning icon next to the Performance tab will be visible to remind you that hardware concurrency is enabled.
The Chrome developer team has released a set of source codes experimenting with muti-core processing with React under the GoogleChromeLabs Github repository. Out of many, the application below shows a frontend application that checks the number of CPU cores, and if the count is below the threshold value, the web app loads in “Slow CPU mode.”
Note: you can test this example with the GoogleChromeLabs team by visiting this link.
It is worth noting that this setting is ideal for simulation purposes. Still, suppose you intend to measure the performance of a web application while altering core counts using this feature. In that case, you may not get reliable results. Therefore, for performance benchmarking of production systems, this is not recommended. However, if you are looking to debug and improve your application to support multiple cores, this is one of the best and quickest techniques.
Conclusion
Many developers are unaware that JavaScript and JavaScript-based frameworks can utilize multi-core CPUs and get higher throughput. And also, for many, it is very unclear how to make sure the web application works for all the user devices and test it under different CPU configurations.
In this article, I have discussed why it is important to consider the number of logical cores available in clients’ devices. And I have shown how to simulate multi-core environments in Google Chrome DevTools.
I hope this will help you easily consider building and testing adaptive multi-core optimized frontends. Thanks for reading!
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK