30 : How does web browsers work?

blanchloe

Seonyoung Chloe (she/they)

Posted on April 28, 2020

30 : How does web browsers work?

A browser is a software application used to locate, retrieve and display content on the World Wide Web, including Web pages, images, video and other files. As a client/server model, the browser is the client run on a computer that contacts the Web server and requests information. The Web server sends the information back to the Web browser which displays the results on the computer or other Internet-enabled device that supports a browser.


Today’s browsers are fully-functional software suites that can interpret and display HTML Web pages, applications, JavaScript, AJAX, and other content hosted on Web servers.

Many browsers offer plug-ins that extend the capabilities of the software so it can display multimedia information (including sound and video), or the browser can be used to perform tasks such as videoconferencing, to design web pages or add anti-phishing filters and other security features to the browser.


  1. The User Interface: The user interface is the space where the User interacts with the browser. It includes the address bar, back, and next buttons, home button, refresh and stop, bookmark option, etc. Every other part, except the window where the requested web page is displayed, comes under it.

  2. The Browser Engine: The browser engine works as a bridge between the User interface and the rendering engine. According to the inputs from various user interfaces, it queries and manipulates the rendering engine.

  3. The Rendering Engine: The rendering engine, as the name suggests is responsible for rendering the requested web page on the browser screen. The rendering engine interprets the HTML, XML documents, and images that are formatted using CSS and generates the layout that is displayed in the User Interface. However, using plugins or extensions can display other types of data also.


Different browsers use different rendering engines:

  • Internet Explorer: Trident
  • Firefox & other Mozilla browsers: Gecko
  • Chrome & Opera 15+: Blink
  • Chrome (iPhone) & Safari: Webkit
  1. Networking: Component of the browser which retrieves the URLs using the common internet protocols of HTTP or FTP. The networking component handles all aspects of Internet communication and security. The network component may implement a cache of retrieved documents in order to reduce network traffic.

  2. JavaScript Interpreter: It is the component of the browser which interprets and executes the javascript code embedded in a website. The interpreted results are sent to the rendering engine for display. If the script is external then first the resource is fetched from the network. Parser keeps on hold until the script is executed.

  3. UI Backend: UI backend is used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform-specific. It underneath uses operating system user interface methods.

  4. Data Persistence/Storage: This is a persistence layer. Browsers support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem. It is a small database created on the local drive of the computer where the browser is installed. It manages user data such as cache, cookies, bookmarks and preferences.


An important thing to note here is that in web browsers such as Google Chrome each tab runs in a separate process(multiple instances of rendering engine).


RESOURCE FROM

  1. WEB BROWOSER
  2. THE BROWSER SYSTEM
πŸ’– πŸ’ͺ πŸ™… 🚩
blanchloe
Seonyoung Chloe (she/they)

Posted on April 28, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related