Learn Web Browsers

A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems.

— Wikipedia

The most commonly used browsers (on any device) are:

1. Chrome (engine: Blink + V8)
2. Firefox (engine: Gecko + SpiderMonkey)
3. Internet Explorer (engine: Trident + Chakra)
4. Safari (engine: Webkit + SquirrelFish)

Image source: http://gs.statcounter.com/browser-market-share

Evolution of Browsers & Web Technologies (i.e., APIs)

• evolutionoftheweb.com [read]
• Timeline of web browsers [read]

The Most Commonly Used Headless Browser Are:

• Headless Chromium (engine: Blink + V8)
• PhantomJS (engine: Webkit + SquirrelFish)
• SlimerJS (engine: Gecko + SpiderMonkey)
• TrifleJS (engine: Trident + Chakra)

How Browsers Work

• 20 Things I Learned About Browsers and the Web [read]
• Fast CSS: How Browsers Lay Out Web Pages [read]
• How Browsers Work: Behind the scenes of modern web browsers [read]
• Quantum Up Close: What is a browser engine?
• So How Does the Browser Actually Render a Website [watch]
• What forces layout / reflow [read]
• What Every Frontend Developer Should Know About Webpage Rendering [read]

Image source: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Optimizing for Browsers:

• Browser Rendering Optimization [watch]
• Website Performance Optimization [watch]

Comparing Browsers

• Comparison of Web Browsers [read]

Browser Hacks

• browserhacks.com [read]

Developing for Browsers

In the past, front-end developers spent a lot of time making code work in several different browsers. This was once a bigger issue than it is today. Today, abstractions (e.g., jQuery, React, Post-CSS, Babel etc...) combined with modern browsers make browser development fairly easy. The new challenge is not which browser the user will use, but on which device they will run the browser.

Evergreen Browsers

The latest versions of most modern browsers are considered evergreen browsers. That is, in theory they are suppose to automatically update themselves silently without prompting the user. This move towards self updating browsers has been in reaction to the slow process of eliminating older browsers that do not auto-update.

Picking a Browser ¹

As of today, most front-end developers use Chrome and "Chrome Dev Tools" to develop front-end code. However, the most used modern browsers all offer a flavor of developer tools. Picking one to use for development is a subjective choice. The more important issue is knowing which browsers, on which devices, you have to support and then testing appropriately.

ADVICE:

¹ I suggest using Chrome because the developer tools are consistently improving and at this time contain the most robust features.