Browsers and How They Work

Photo by Brett Jordan on Unsplash

What is a browser for?
A browser is software you use to view websites. Browsers convert the descriptions of programming languages such as HTML, which are difficult to understand without specialized knowledge, into web pages. Each homepage (website) is composed of programming languages such as HTML and CSS, and the main role and function of the browser are to read and interpret the source code composed of these programming languages and display it as a web page that is easy for the general public to view. Reference: DS Magazine

About Browsers

• What you can do with a browser
• Display and input the URL of a web page
• Browse websites (load HTML and display it on the screen)
• Bookmarking your favourite websites
• Zoom in and out on website text
• Share a website (on a smartphone)
• Add websites to the home screen as shortcut icons

Browser type

1. Google Chrome: Google’s genuine web browser

• Can be linked to various Google services (Gmail, Google Calendar, Google Drive, etc.) using a Google account.
• Can be synchronized between smartphone and PC, and starts up quickly.
• Few display bugs.

2. Firefox: A browser developed by the Mozilla Foundation.

• Like Chrome, it can be synchronized with other devices (terminals) such as PCs.
• You can customize it to your liking by extending its functions with add-ons (additional software).
• Fewer display bugs.

3. Internet Explorer (IE): A browser developed by Microsoft.

• Slow to display and operate, uses a lot of old technology, and is not safe.
• Many bugs in the display.

4. Microsoft Edge: The successor to Internet Explorer, which has seen its market share decline.

• Installed from the start on Windows 10 and later computers, not available on Mac.
• The bugs are controversial.

5. Safari: The standard browser for iOS devices such as phones and MacBooks.

• It can draw web pages more accurately than other browsers, and is strong in drawing designs such as CSS, but is incompatible with Windows computers. — Fewer bugs in the display.

6. Opera: Opera for Android, Opera Mini for iPhone

• It has advanced features and runs fast.
• Not as well known.

How does HTTP relate to browsers?
HTTP is the rules (protocol) that a browser follows when retrieving HTML files on a server. By following the protocol, HTTP communication (exchange of HTML files) allows text and images to be displayed on the browser.

About HTTP (HTTPS)

Hypertext
A file used to display a Web page. It is not just a text file (document), but a file in which links to other text files are embedded and the text is linked together.

A link made of this text is called a hyperlink.

HTML (HyperText Markup Language)
A language used to mark up (write) hypertext.

Web Server and Web Client
A Web server is required to publish HTML files on the Web. By placing the HTML file on the webserver, the HTML file can be retrieved through a browser. The web client (browser) makes a request to the web server according to the HTTP rules and receives the data.

HTTP (HyperText Transfer Protocol)
The rules (protocol) followed when sending data between a web server and a web client. HTTPS (HyperText Transfer Protocol Secure): A protocol to make HTTP communication more secure.

After the browser receives the HTML, how does the browser display the HTML as a screen?
When the HTML flies in, the browser reads the HTTP header, and then the body (text) from the top. At this point, the browser sends a request to the server each time an image is specified, etc. When the browser reads HTML, CSS, or JavaScript, it interprets the syntax and performs the rendering process. Order of rendering process: DOM tree construction → render tree construction → render tree layout → render tree drawing

Structure of the browser

1. User Interface (UI) Responsible for the address bar, back/forward buttons, bookmark menu, etc.
2. Browser engine Mediates interaction between UI and rendering engine
3. Rendering engine Engine that interprets HTML and CSS and displays content on the screen
4. Network Responsible for network portions such as HTTP requests
5. UI backend The part that draws basic parts such as drop-down lists and windows As with the network, it absorbs differences between platforms and provides an interface that can be used universally on different platforms.
6. JavaScript engine The engine that interprets and executes the JavaScript syntax
7. Data storage Responsible for storing local data such as cookies

Rendering flow

When a user inputs a URL into a web browser, the browser sends a request based on the TCP/IP protocol to the specified server based on the URL. The server then responds to the client. Rendering is the process of processing the HTML and other data received in the response and displaying it on the screen.

Building an object model

The rendering engine reads the contents of the document, usually 8 KB at a time, from the network layer. It converts, tokenizes, and lexically analyzes the read HTML document to build a DOM tree. CSS is processed in the same way to build the CSSOM tree.

Building the render tree

The rendering engine combines the DOM tree and CSSOM tree to construct another tree called the render tree. The render tree contains all the nodes and style information necessary to render the page.

The browser’s process when building a render tree

1. Starting from the root of the DOM tree, traverse the individual nodes.

• Some nodes that are not directly related to screen rendering, such as script tags, are excluded.
• Nodes specified to be hidden by CSS, such as display none, are also excluded.

2. Find and apply the CSSOM corresponding to each node.

3. Exclude displayable nodes to which CSS has been applied.

Layout (reflow)

After the render tree is constructed, a layout is performed to calculate the position on the screen where each node should be displayed. The output of the layout process is called the box model, which calculates the exact position and size of each element in the viewport and converts the relative values into absolute values of pixels on the screen.

Drawing (painting or rasterization)

Finally, the UI backend layer is used to draw the contents of the render tree along the lines of the painting, which transforms the size and position information of the individual elements obtained in the layout process into final, accurate pixel values.

Rendering
A sequence of HTML, CSS, and Javascript received after a response is processed and displayed on the screen.

Tokenization
The process of attaching information about the type of token to the substring obtained by the scanner, and depending on the type, giving it a semantic value, such as an integer value for an integer.

Token
In programming, a string of characters in a source code is divided into the smallest units that cannot be further divided. In programming, a string of characters in a source code is divided into the smallest units that cannot be divided any further. In addition, when analyzing the contents of a source code, the characters described are divided into the smallest units that have meaning. (Example) Variable names, operators, etc.