Web browsers: how do they work?
Considering how much technology and internet access is integrated across all of our devices nowadays, web browsers are basically a daily part of our lives. Heck, I know of some refrigerators that can even connect to the internet now...
Whether that's good or bad is a debate for another day but what we're going to discuss now, is how web browsers work under the hood and what you need to know as a soon-to-be web developer and how to use them to help you develop applications.
At the core level, Web browsers are just User Interfaces (UI) for navigating the internet. You can certainly view web pages and web resources in ways other than a web browser, but it won't be as pleasant nor as easy.
Web browsers are software ran on the client's computer. Typically, a user types in some web address such as http://google.com, and then hits enter in the URL navigation bar. When this happens, a request is sent to the desired website (web server) which then tells the server (Google in this case), “Hey! I want some information!” Google then makes sure you are allowed to access the information you are requesting, and if all looks good, sends the information back to the web browser which then displays the results on your computer.
The main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window. (html5rocks.com)
Typically the resources come in the form of HTML, CSS, JavaScript and/or other resources such as images, PDFs, files, etc. The web browser then interprets these files according to W3C standards (World Wide Web Consortium, the int'l org that determines specifications for web languages such as the three we just mentioned) and displays them in the window after parsing and interpreting the code.
While this standard exists, historically web browsers haven't always been uniform. While they are pretty darn close in today's world, they can each still choose to implement or restrict certain features or specifications for various reasons, so it's always good to check that if the code or language feature you are using is currently supported in a certain browser (there are ways around this we will discuss later).
The 5 most popular web browsers out today in 2020 are: * Google Chrome * Firefox * Safari * Microsoft Edge * Internet Explorer
While there are several different options when it comes to choosing a web browser, under the hood, they are functionally very similar and can be divided into several core categories of functionality.
The Browser Interface: this is the interface and functionality used to interact with the browser as well as tools that help you navigate websites and web resources. These include the address bar (where you type the web address), bookmark tabs, search history, password storage, plugins, preferences etc. These are features that are going to be the most different between browsers as they are completely left up to the company developing the browser, but for users' sake, they are all similar from a high level. Can you imagine if each browser searched the web in a completely different way? It would be a disaster.
The Rendering Engine: The rendering engine interpolates code sent from the web server. This is what does the heavy lifting in order to display a website to you, the user. The rendering engine interprets HTML, XML, images etc.
Each browser has its own rendering engine: * Internet Explorer: Trident * Firefox & other Mozilla browsers: Gecko * Chrome & Opera 15+: Blink * Chrome (iPhone) & Safari: Webkit
Networking: Browsers retrieve resources using internet protocols such as HTTPS, HTTP, or FTP (https://www.izooto.com/blog/understanding-http-https-protocols#:~:text=Hyper%20Text%20Transfer%20Protocol%20Secure,and%20the%20website%20are%20encrypted.).
JavaScript Parser/Interpreter: The JavaScript Parser/Interpreter reads and executes JavaScript code embedded in a website. The code is ran and then sent off to the rendering engine where everything is glued together.
Data Persistence & Storage: Browsers support storage mechanisms such as localStorage, sessionStorage, IndexedDB, WebSQL and FileSystem. You can think of them as small, temporary databases created on the local drive of the client's computer where the browser is installed. Each of these tools can manage user data such as cookies, bookmarks, preferences and also allows web developers to persist data and other important information (that doesn't necessarily need to be secure) across web requests and browser actions.
Hopefully all of these points help you understand at least a little bit more on how web browsers work. Check out these resources below for more exhaustive reading if you are still curious!
https://hackernoon.com/how-do-web-browsers-work-40cefd2cb1e1
https://www.godigi.org.au/digihouse/learning-guides/what-web-browser
https://www.webopedia.com/quick_ref/internet_browsers.asp
Best, CFM