How Web Browsers Work

Presented By : Ankita Sharma

Understanding the

Anatomy and

Architecture

Architecture & Anatomy

• Web servers and browsers:

Web servers store variety of web compatible

documents and provide access to these on the

Internet or an intranet.

These documents are accessed using Web browsers

like Netscape and IE

• Palm tops, Laptops, PCs, workstations, etc.

• Web sites and URL:

One or more web servers identified with a unique web

site address on the Internet (e.g. www.iisc.ernet.in)

Documents available on a Web site are uniquely

identified using the URL scheme:

access protocol://host.domain [:port]/path/file

name

(Ex.: http://www.ncsi.iisc.ernet.in/ncsi/database.html

Anatomy of a web site:

• Hardware, software (OS, web server, CGI, database,

indexing and search, etc.)

• Dedicated Internet/intranet connectivity

• Information content: Documents stored in variety of

formats (HTML, SGML,PDF, databases, images,

audio, video, etc.)

HTML pages integrate access to this information

• Organized in a hierarchical manner

• Home page (root page) provides links to second level

HTML pages which in turn link to third level HTML pages,

and so on

• These pages may contain images and provide access to

databases through search forms, PDF files, audio and

video, etc. or link to documents on other servers

Operates on Client/ Server Model.

The Technology

Client on our Computer – Web BrowserWeb Browser contacts Web ServerRequests information and resourcesWeb Server locates and sends the info to

the web browser.Web browser displays the result to the

User who requested the info.

Sounds Too Easy ?

Lets learn the process step by step.

User asks for the webpage.

The request is taken by the Web browser.

Web browser requests the DNS server.

HTTP request is generated.

HTTP response is received.

The response is then rendered as display.

Final display is the webpage as requested by the user.

• Parsing URL : protocol, domain

• DNS request

www.mozilla.org -> 63.245.208.161

• Open TCP connection, send HTTP request

New Request

Parsing :

• resolve (a sentence) into its component parts and describe their syntactic roles.

• analyse (a string or text) into logical syntactic components.

Parsing the URL:

Scheme Netloc Path Params Query Fragment

After the HTML file is located.

HTML Parsing CSS Parsing

After the HTML file is located.

DOM Tree CSS Style Tree

Render Tree

Render Layout

Painting the Web Page

Used to be the term for CPU drawing the entire webpage according to the display.

GPU or Graphical Processing Unit takes on this job providing the hardware acceleration.

Painting the Web Page

Painting the Web Page

Any Query ?

Thank You !