MacBook Air M1 vs Pro M3 Pro

Introduction

For over two years, I've used the MacBook Air M1 daily for frontend development, enjoying a mostly seamless experience. I've been using it every day for frontend development and it has been a great experience. I've been able to run all the tools I need (mostly) without any issues. However, I've been curious about the MacBook Pro M3 Pro and how it compares to the MacBook Air M1. I decided to upgrade to the 16" MacBook Pro M3 Pro and compare it to the MacBook Air M1 from a developer's perspective, since when I was still considering if the upgrade was worth it, I couldn't find any everyday use case comparisons from a developer's perspective, who mostly uses JavaScript technologies only. If you are a frontend developer in the same or similar situation, then I hope this article will help you decide which one is the best for you.

Base Specifications

Here are the base specifications of the two laptops I've tested:

Available benchmarks

You can find plenty of benchmarks online, where you can compare all the available Mac configuration, such as Geekbench or Novabench, which test these machines and offer a high-level comparison. However, I've personally found that these benchmarks are not always a good representation of real-world performance, especially for developers. So, I decided to run some very basic real-world tests with operations that I do every day, and see how the two machines compare.

Real-world tests

Casual use

In day-to-day activities like browsing the web, watching videos, or using office applications, both the MacBook Air M1 and the MacBook Pro M3 Pro perform excellently, with little noticeable difference in speed or responsiveness. However, if we shift our focus to the physical aspects, the MacBook Air M1's lighter and smaller frame stands out for those prioritizing portability. On the other hand, for users seeking enhanced features such as a larger screen, superior display quality with ProMotion technology, and improved audio and video capabilities, the MacBook Pro M3 Pro emerges as the clear winner.

Browser benchmarks

I've run some browser benchmarks to see how the two machines compare when browsing the web. I've used the Speedometer benchmark, which is a real-world web browsing benchmark that measures the responsiveness of web applications. I've also used the SilverBench benchmark, which is an online multicore CPU benchmarking service using only JavaScript, which tests the performance by using a photon mapping rendering engine.

The results of the benchmarks are as follows:

As you can see, the results from Speedometer are very close, this proves my previous point that for casual use you will not notice any difference between the two machines. However, the results from SilverBench are very different. The "Standard" benchmark is not so rough on the CPU, and the M1 Air could still handle it relatively well, but the "Extreme" benchmark is a different story. While the M3 Pro was able to handle it with ease, the M1 Air was struggling to keep up, and after the test the machine was hot to the touch, while the M3 Pro's fans didn't even turn on. (as a matter of fact, I've still never heard the fans of the M3 Pro turn on)

Development benchmarks

Given that I am currently working on a project that has over 100 repositories, I've installed the package dependencies, built the project, and run the tests quite frequently. Therefore, for the next stage of my tests I've performed these activities on two publicly available repositories with an immense amount of code, dependencies and tests, and I've measured the time it took to complete these tasks.

React

I've cloned the React.js repository, installed the dependencies (with clean npm/yarn cache), and ran all the tests using the test script (they use Jest). I was curious about single-core and multi-core performance, so I've ran the tests twice: once with the --maxWorkers=1 flag, and once without it. There was a total of 318 test suites, containing 8251 tests. Here are the results:

Interestingly, the Air M1 beat the M3 Pro while installing the dependencies with a low margin, but the M3 Pro was able to run the tests much faster. I was not suprised by the multi-core results, as the M3 Pro has 4 more CPU cores than the M1 Air, but we can see that the M3 Pro has also beat the M1 Air in the single-core test as well. While Apple claimed that the M3 family CPUs are 50% and 30% faster than the M1 family when it comes to efficiency and performance, respectively, I find that the 22.10% difference is not that far from the 30% claim, considering that the task itself did not push the machines to their limits.

Next.js

Given the popularity of the framework, I've also cloned the Next.js repository, where I've only installed the dependencies using pnpm and also built the project using the build script. Here are the results:

The M3 Pro was able to install the dependencies and build the project much faster than the M1 Air. The difference in the build time is quite significant, and it is worth mentioning that the M3 Pro was able to build the project in less than 20 seconds, which is very impressive.

Conclusion

Transitioning to the MacBook Pro M3 Pro was initially a decision met with skepticism, particularly concerning the performance difference and its justification against the cost. However, weeks into using the new machine daily, the performance enhancements have proven substantial. The improved speeds in repetitive development tasks, while may seem modest individually, aggregate to noticeable efficiency gains over time. This performance leap, coupled with my future plans in photo and video editing, validates my upgrade decision, thanks to the M3 Pro's superior display and hardware capabilities. Your choice, however, will depend on your specific needs, workflow, and budget. I aimed to provide a detailed comparison to assist fellow developers and tech enthusiasts in making an informed decision. Should you have any queries or require further clarification, do not hesitate to contact me; my details are available on my website.