1- Browser Architecture – Principles

We all know what a browser does: it sends a request to the server and displays the web resource that comes back in response to the request in the browser window.

That classic front end question asks, “What does the browser do in the few seconds it takes to type a URL into the browser’s address bar?”

In my memory, more is how to query the corresponding IP, and then send the request to the server, and then finish rendering, I wonder if you are not like that?

Too often, however, we seem to overlook the subtle interaction points of modern browsers, such as the presentation of the Spinner on the TAB. In order to slowly understand the above question, let’s first take a look at the browser software in the end there is.

The current browsers mainly consist of The user interface, The Browser engine, The rendering engine, Networking and JavasScript JavaScript interpreter, UI Backend, and Data storage.

These components do the following:

  1. User interface – includes address bar, forward/back buttons, bookmark menu, etc. All parts of the display belong to the user interface, except for the page you requested displayed in the browser’s main window.
  2. Browser engine – passes instructions between the user interface and the rendering engine.
  3. Rendering engine – Responsible for displaying the requested content. If the requested content is HTML, it is responsible for parsing the HTML and CSS content and displaying the parsed content on the screen.
  4. Network – Used for network calls, such as HTTP requests. Its interfaces are platform independent and provide an underlying implementation for all platforms.
  5. User interface back end – Used to draw basic widgets, such as combo boxes and Windows. It exposes a common interface that is platform-independent, while underneath it uses the operating system’s user interface approach.
  6. JavaScript interpreter. Used to parse and execute JavaScript code.
  7. Data storage. This is the persistence layer. Browsers need to keep all kinds of data, such as cookies, on their hard drives. The new HTML specification (HTML5) defines a “web database,” which is a complete (but lightweight) in-browser database.

Software can be run by processes in it. So if we want to write a browser, we have two ways to implement it, either in single-process multithreaded mode or in multi-process mode.

So what model do we use for browsers?

Next article

Browser Architecture – Practice