Skip to main content

STRUCTURE OF WEB BROWSER

WEB

            Generally web has three Layers Structural Layer, Presentation Layer and Behavioural Layer and they are designed by HTML,CSS and Java Script  respectively .

WEB BROWSER

Web browser can show text, audio, video, animation and more. It is the responsibility of a web browser to interpret text and commands contained in the web page.Earlier the web browsers were text-based while now a days graphical-based or voice-based web browsers are also available.




USER INTERFACE

 User Interface is the top bar in the browser, where control lies. It includes space where we type the URL, have back/forward buttons, space where tabs and setting options are.

 BROWSER ENGINE

      When  HTML document loaded in the browser  the HTML parser will create DOM and CSS parser will create CSSOM . HTML parser and CSS parser are part of Browser Engine.

 RENDERING ENGINE

       Once the browser engine has computed styles, it’s time to put it to use! The DOM and the computed styles are fed into a layout engine that takes into account the size of the window being drawn into. The rendering engine uses various algorithms to take each element and draw a box that will hold its content and take into account all the styles applied to it.

When layout is complete, it’s time to turn the blueprint of the page into the part you see. This process is known as painting, and it is the final combination of all the previous steps. Every box that was defined by layout gets drawn, full of the content from the DOM and with styles from the CSS. The user now sees the page, reconstituted from the code that defines it.

In modern web applications, the structure of the document itself is frequently changed by scripts. This can require the entire rendering process to start more-or-less from scratch, with HTML being parsed into DOM, style calculation, reflow, and paint.


NETWORKING

Networking is fetching resources and handling everything related to the internetand it wi;l do the following jobs

  • The moment when we type the first letter, it will starts looking into bookmarks and history and give you meaningful suggestions.
  • Parse URL and retrieve protocol.
  • Conversion of NON-ASCII happens, using encoding to convert the URL.
  • Browser checks HSTS (HTTP Strict Transport Security) list, append HTTPS if URL found in the list, otherwise send via HTTP.
  • DNS Lookup: whom to lookup, 1. Browser DNS cache 2. OS cache 3. Call DNS server which local router/ ISP router.
  • Get the IP address of DNS(domain name server) server/default gateway using ARP (Address Resolution Protocol).
  • Opens port 53 and raises a UDP( User Datagram Protocol ) to DNS server (TCP/UDP depends on response size), If it is the default gateway it will recursively follow this procedure.
  • If DNS says that it does not know about an address. Browser searches it in the default search engine and shows up top 10 results.
  • Otherwise, once it has the IP address of destination server, it starts HTTP (port 80)/ HTTPS(port 443) request and it will request for TCP socket connection.
  • Request reaches to Network layer for filling TCP header, Transport layer for filling IP header, data link layer for Ethernet frame header.
  • Packet flows in the network in digital or cellular.
  • 3-way handshake between server and client and data is sent to the client on request.
  • Transport layer security handshake happens and finally, the Browser gets the data in chunks.
    UI BACKEND

    UI back end 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.


RENDERING & JS ENGINE OF BROWSERS

Comments

Post a Comment

Popular posts from this blog

NULL VS UNDEFINED

NULL VS UNDEFINED        Undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value. Also, undefined and null both are two different data types: undefined is a type itself (undefined) null is an object. var a;//undefined var b = null; var c=5; var d = a+c // NaN var e = b+c  //5   If  I am trying to do any mathematical  operation with null and number it gives me some  number as output,  instead of null if i am doing it with undefined and number the result is NaN null !== 0;    undefined !==0;
Post a Comment
Read more

AUTH and CORS

   CORS 1. CORS is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own. 2. An example of a cross-origin request: the front-end JavaScript code served from https://domain-a.com uses XMLHttpRequest to make a request for https://domain-b.com/data.json. 3. For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers. 4. The CORS mechanism supports secure cross-origin requests and data transfers between bro...
Post a Comment
Read more

JAVASCRIPT OBJECT & ITS INTERNAL REPRESENTATION

OBJECT Objects are same in all programming languages i.e they represent real-world things that we want to represent inside our programs with characteristics/properties and methods. In JavaScript Objects are kind of String/Number   Index Array represented inside curly brackets Var obj = { 1: “NAME”, "Maths" :100 } KEY VALUE PAIR In the above example obj is an object with 2 properties with key as 1 and Maths and value as Name and 100 .Here the index are called as KEY.KEY :VALUE pair together called as entries Object literals are a comma-separated list of key-value pairs wrapped in curly braces. Object literal property values can be of any data type, including array literals, functions, nested object literals or primitive data type. Obj Values   in the above can be accessed via Dot notation i.e obj.1 ,obj.Maths   or via a square bracket notation i.e obj[1] ,obj[“Maths”] Object.assign() METHOD As we discussed earlier in JavaScript Objects are kind of...
Post a Comment
Read more