Browser Wars™ (Extended) From A Developer Point Of View

I’ve been talking to my peers a couple of times in the past and every time I was coming with the same angry rant about “how I dropped [insert browser here] and switched to [insert browser here]”, and I was always getting the same response “what’s the big deal, why can’t you just be happy”. Truth is — it’s much more difficult than it seems. Now, years later, countless browser switches, and lorries full of nerves and frustration I finally decided to share my own point of view on browsers to this day.

As rules of article writing state — Let’s start off with a bit of history:

A bit of history

Before 2008, Firefox, slowly but steady started eating the whole browser market, until Google introduced Chrome and marketed the crap out of it. Of course, competition isn’t a bad thing, and Google’s move had its impact as an innovation in browser technology with an amazing UI, faster loading, privacy perks, etc.

That is already in the past, and fast-forward to today — the competitive scene for browsers has moved into a completely different direction, focusing more on their security of online data such as their passwords, bank info, browsing history and other sensitive information.

Privacy and Security, needless to say, is an important aspect of what makes a great browser great, I would like to look at today’s competitive scene from a more developer point of view, and to start off, I would like to talk about engines.

---

Browser Engines

The Giants

In a way, browsers are exactly like cars, there is a salon in which there is a gas pedal, brakes and many switches that are useful and understandable to the user; and there’s a mechanical part — hidden from the user, under the hood, the pipe that gets the juice flowing, the brains of the whole operation *(alright we get it!!).

While the browser integrates peripherals, and provides functionality that allows you to manipulate the engine, its behaviour, and provides additional services; the engine does all the dirty work: loading, processing, rendering data and all possible calculations.

Currently, there are mainly 3 Engines (not to disrespect the other ones, but this is another kind of review) that compete between themselves:

• WebKit, made by Apple, which powers Safari.

• Blink, a fork of WebKit, made by Google, which powers Chrome and other Chromium-based browsers such as Edge, Brave, and Opera.

• Gecko, made by Mozilla, which in turn, powers Firefox and Thunderbird (their email client) alongside other projects such as the Tor browser and Waterfox (worth a look).

These are the main owners and developers of the engines. Of course, in development they are assisted by third-party companies, for example, let’s take Google’s project — Chromium. To create this project, Google was assisted by companies such as Intel, Facebook, IBM, LG, NVIDIA, Yandex. You can find the full list here.

Browsers such as Opera, Yandex and Brave, use this particular browser engine, which makes statements like “oh, we have our own browser” not entirely true.

That being out of the way, comes the question: Which one is better? And is there even a difference? Let’s test!

Long story short, there’s a couple websites online that let you “benchmark” different aspects of your browser. I tested Safari 13.1.1, Firefox 79.0, and Chrome 84.0 on my 2016 MBP (Catalina 10.15.5).. not that it matters that much.. but anyways..

And now, let’s have a more detailed breakdown of each and how they fare when looking at the entire lineup.

⚠️ Note that: there’s always a tiny degree of error to these due to the connection and use of different services but nonetheless should give a more than enough answer to do our research.

HTML5Test

First, let’s have a look at our browser’s HTML5 support range.

HTML5Test results

The tests don’t differ from one run to another, so it’s a definite answer on feature support. If we dive into the list of supported and unsupported features you will observe that Chrome is a little better with form handling than both Firefox and Safari — when it comes to the newer tags, and a couple of other small features, but generally, an even fight.

Also please keep in mind that with future updates this number is very likely to change as we see from the data on the website over the years.

Source: HTML5Test

Test for yourself: HTML5Test

CSS3Test

Because we’ve already come so far with browser technologies, we’re gonna ignore stuff like the CSS Selectors and the Acid3 test, since all of our browsers pass the selectors test without a single problem, and the latter is outdated.

Now, this is the part that really amazed me.. but before we get to the good part, let’s take a look at the results. As it seems that the CSS3Test is the most comprehensive online test available, it would be good to have the ability to compare your results with other browsers, much like on HTML5Test.

CSS3Test Results

The results don't tell you a lot until you know what you're looking for. Its mission is to check what syntax the browser recognises, which doesn't necessarily mean it will work correctly when used. WebKit is especially notorious for cheating in tests like this, recognising stuff it doesn’t understand, like the values “round” and “space” for background-repeat, but the cheating isn’t big enough to seriously compromise the test.

The most interest part of all of this is, that if we look at the results from 2012, we can see how much the browsers have improved over the years. Safari, from version 5 to our current version 13 remained at exactly 60%; Chrome improved by 2-3%, while Firefox really got it together and went from 61% to a whopping 74%!

I would like to see that level of dedication more often to be honest. Kudos Mozilla.

Source: XKCD

Maze Solver

The Maze Solver test we focus on the browser layout engine to exercise the browser’s handling of CSS 2.1 and CSS 3 layout constructs. These constructs are used to style HTML, and the layout engine is an important component of overall web browser performance.

The mazes in this test are constructed from hundreds of HTML elements styled with CSS. Every step through the maze changes the style of a single HTML element. How quickly a browser can process that change determines how quickly the maze is completed.

Because the mazes are different every time, we can’t directly compare the browsers, so I ran different boards (40x40) 10 times in total, on each browser, to get an average value of completion; here are the results.

Maze Solver Results (numi calculator)

This is the part that aMAZEd me, because I was completely shocked to see results so fast from Safari’s Webkit (I knew Safari is fast but not THAT fast). Harder mazes, that took 20something seconds to complete, Safari was just rushing them in 14–16 seconds; and the difference is actually visible, Safari is visually faster than Firefox, and even faster than Chrome!

Inspecting the Activity Monitor

I thought I was gonna get lucky by inspecting how much resources are each browser using when loaded with the same content, and I was left kinda disappointed (but in a good way). All browsers were started in Safe Mode (no addons) except for Safari… since it doesn’t have any anyways… ಠ_ಠ and I found the results to be quite even. Energy consumption was minimal, ranging from 0.5 units to 0.6 in the Activity Monitor, CPU usage was always idling somewhere between 1–3% (that’s with all sub-processes combined), the only difference that really stood out was memory usage:

Safari triumphs again.

I’ve read other articles online that bash a certain browser with really compelling data about CPU and Memory usage, load time, etc, but the difference is quite minimal if you compare Chrome to Firefox — again, at least on my machine — while Safari is different because well… it’s Safari. That being said people’s experiences often land on the fact that Firefox gives the most peasant experience, the interface is nice, plenty of extensions and themes, etc..

Developer Tools — Chrome good, Safari bad. /s

A lot changed in the last couple of years and it isn’t quite right to think that one browser’s DevTools are better than the other’s.

Yes, Chrome has a couple of nice features here and there. Yes, the “Lighthouse” is pretty neat, but then again you can install it on Firefox as an add-on. Remember Firebug? That godsend thing is now by default in Firefox & even more in Firefox Dev. Safari? Also not lagging behind, it looks clean and has cool debugging features for iOS devices and not only. It has mainly the same features as any other dev toolbox now! I haven’t tested but I’m pretty sure Opera and Edge have took it serious too and gave some good options for developers out there.

For the modern web, it’s impossible for you to create a website or a web application by testing it in a single browser, or in a single version. Today, on many websites, the traffic from mobile devices is larger than the traffic from desktops (of course, depending on the content you provide for the user). And this has already been happening for the last 4–5 years. Just go on Google Analytics and see for yourself.

Conclusion?

🤔 What do we REALLY want from a browser? I personally don’t care about Firefox’s code base being the size of our galaxy or that Chrome owns over 80% of the market; I want a browser that just works for me.

Every one has their pros and cons…
Safari is REALLY fast and light on your computer but it only has a couple basic extensions (integrations.. not even extensions) that I really don’t care about. Let’s be fair, you only open Safari to test if that piece of code works as it should then you just shut it down after swearing at it.

Chrome for me is like a love-hate relationship.. It’s good but at one point I just couldn’t handle the bugs anymore, same goes with Safari, again. I like some of the chrome-exclusive addons that I wish they were on Firefox, but that won’t make me switch back (for now at least).

Firefox seems to be the most stable of them all. It has neat features like easy screenshots, not-smashing-all-tabs-together-like-chrome-does if you have more than 20 open, and cool integrations like Firefox Send, Privacy Containers, VPN, Firefox Monitor, etc. It being one of the older browsers, it also grew a large enough fan-base to get people to develop a wide array of add-ons and themes (if you’re into those), but of course it has it’s cons. Gecko is not perfect and sometimes it crashes.. not often at all.. but it does. Still, I’m gonna keep using Firefox for the foreseeable future.

Moral of the story: Chrome shouldn’t be considered the only and the greatest browser, others also deserve their shine, and ideally I think we all wait for the same thing: A browser like Chrome, with the stability of Firefox and the speed of Safari.