Content List
- Introduction
- Browser Internal Parts
- User Interface
- Browser & Render Engine
- Networking Component
- HTML, CSS Parsing
- DOM & CSSOM Together
- Layout,Painting, and Display
- Idea of Parsing
- Summary
- References
Introduction
Browser is a software application it allow user to interact with the servers with user interface. Its job is the take url from the user, make request to server using url. Server return the requested content like html, css, js code files, media and other data files. Broswer execute this code files, media and data files and provide a view to user.
Think like, you are giving a recipe to chef to make it. chef take this recife use kitchen perform complex process and present a finished dish to you.
Overview Browser Main Parts
Browser is not just a single software application do given task in one go. its a complex suite of multiple component those work together to divide complex tasks into sub-tasks each component have its own way to contribute in the task. If one of the component faile it affect te output of the whole task. There are some components those contribute in almost all tasks:
- User Interface: a front face, provide you a controls and fields to enter urls, manage tabs and settings of the working area.
- Browser Engine: this is the top level component work between the component its like a manger who ensure all component work together.
- Render Engine: low level component only handle task related to display and rendering elements on scree.
- Networking: this component responsible for only the networking related jobs like handle data sending and recieving, making TCP handshak and http connection with server.
- Javascript Interpreter: its interpret logic code which enable interaction, api calls, calculation logics.
- Data Storage: this part handling the all task related to storage like caching, local sotrage, and cookies storing and retrieving.
User Interface
User interface are the ui components user interact with them. it allow user to control and provide inputs to browser to perform task. components that are not a part of the websites like search bar, tabs, back-forword buttons, right-click menus are the browser ui components.
- Tab: most modern browser use tabs, each tab has a separate process to perform task, if any tab crash which not affact the other tabs make the robust user expearience.
- Search bar (Omni-box) allow user to input search query, url, and mathmatical expression directly the field. it provide a security indicators and address of all web pages and apps.
- Back-Forword: this allow to access the tabs history within the tab it use storage to keep saving history.
- Context Menu: its a min menu opened using mouse right click button provide some sortcuts like open new tab, inspect, and history buttons.
Browser Engine & Render Engine
Browser engine is the top level component its central cordinator managing data flow between user interface, network and rendering engine. it manange interaction between user interface and rendering engine, handle communication with networking component request and recieve data from server. It manage rendering process within tab and local storage like cookies and browser specific sotrages.
Render engine is the low level component handle specific tasks related to rendering. it handle following tasks like parsing html and css code to build dom and cssom models, constructing of render tree, handle reflow, painting and javascript execution. edge,crome, and blick rendering engin, firefox use Gecko and safari use Webkit rendering engines.
Networking component
Networking component in the browser handle all network communication, handle sending and retriving resources using http,https,ftp protocols, manage dns lookup to resolve url into ip address, handle ssl/tls for secure communicaiton and often use cache to reduce network traffic.
- Request Handling: making http/https connection for the html,css,js and media files.
- Protocols Support: manage network protocols like TCP,HTTP and websokets.
- Caching & Security: often using local caching to reduce loading, bandwidth use and implement crypto graphic protocols like ssl/tls for secure communicaiton.
- Dev Tools: provide inspection and debugging tool to developers to debug networking related bugs and errors.
Parsing HTML & CSS to DOM & CSSOM
Browser not understand html and css code like humans. Broswer use parsers which parse code into machine readable formate which can use to create a object model allow programs to work them.
Parser is the main part of the rendering engine its job is to reade raw code byts and convert it into characters, tokens and nodes. Html and Css parsing are done in two steps:
HTML Parsing: Parser read html raw bytes and convert it into tokens, which used to build a nodes obejct this are the logical structre of the html elemetns. it can link together to build a tree like structure called document object model this model is represent the document structre.
CSS Parsing: css code also read by the parser as raw bytes and break it into tokens and nodes represent easy style. These css nodes link together to build a css object model.
DOM & CSSOM Together
The document object model is the tree representation of the html document content and strcutre. css object model also a tree containing of css styles information and casceding rules and inheritance.
The process combining DOM and CSSOM together called Render Tree construction and the final tree is called render tree which contain both in single tree structre. Broser travers DOM nodes and finding its corresponding styles on the CSSOM Tree and merg tham together to build new renderer node which used to build render tree.
In the render tree construction browser only include the elements which are the only visible or will taking place in the broswer screen all nodes ignored.
Reflow, Painting, and Display
Those are the crucial steps in the process of displaying website on the screen. The render engine used in those process, this process follow in to step by step:
- Reflow (Layout): this is the first process after the the render tree conversion. in that process the calculation of the all html nodes geomatery happens which decide height, width and cordinates of the elements.
- Painting (Restraigation): in this process the pixles filled into html elements geomatry like colors, text, border, shadow, images.
- Displaying: this process is the final one which display actual visual of the elemnts nodes on the screen. Its utilize the system GPUs for that.
The Idea of Parsing
Parsing is just taking string of characters and transforming it into a structure that can broswer use for logic.
consider expression 3+4x5. The parser does not process all thing step by step (which gives you 35). Parser prepare a tokens called tokenizing based on the pre-determined rules (operations).
Than parser recognise 4x5 is compute first than move into next 3+20. just like in html parsing parser recoginzed which element computed first and which is next. Parser prepare the tree for efficient calculation.
Top comments (0)