1.
Web Browser Architecture and Processes
Think of a web browser as a complex operating system for the web. Its architecture has evolved
significantly to be fast, secure, and stable.
Key Components:
• User Interface (UI): The parts you see and interact with—the address bar, back/forward
buttons, bookmarks bar, etc. This is separate from the webpage itself.
• Browser Engine: The middle manager. It marshals actions between the UI and
the rendering engine.
• Rendering Engine (or Browser Kernel): The heart of the browser. Its job is to display
(render) the requested content.
o It parses HTML and CSS.
o It builds the DOM (Document Object Model) and CSSOM (CSS Object
Model) trees.
o It combines them into a Render Tree.
o It calculates the layout of each element (a process called reflow).
o It paints the pixels to the screen.
o Examples: Blink (Chrome, Edge, Opera), Gecko (Firefox), WebKit (Safari).
The Multi-Process Model (Modern Approach):
Instead of one single process, modern browsers use multiple processes. If one tab crashes, it
doesn't bring down the whole browser.
• Browser Process: The main process. Manages the UI, disk I/O, and network requests. It
coordinates all other processes.
• Renderer Processes (Multiple): Each tab (or sometimes each site/origin) runs in its own
isolated renderer process. This process contains the Rendering Engine and, crucially,
the JavaScript Engine. This isolation is a critical security and stability feature (a malicious
or buggy website can't affect others).
• GPU Process: Handles graphics-intensive tasks, compositing layers for smooth scrolling
and animations, independent of the main UI.
• Plugin Process / Utility Processes: For any remaining plugins or other utilities like
network service, audio, etc.
Solved-by: Syeda-Asma
2. Active Browser Pages: JavaScript, DHTML, AJAX, JSON
This group of technologies is what transformed the web from a collection of static documents
(Web 1.0) into the dynamic, interactive applications we use today (Web 2.0).
• JavaScript: The programming language of the web. It runs in the browser's JavaScript
engine (e.g., V8 in Chrome, SpiderMonkey in Firefox) and allows you to manipulate the
page content, respond to user events (clicks, keypresses), and control the browser.
• DHTML (Dynamic HTML): This is not a single technology but a term from the late
1990s/early 2000s describing the combination of HTML, CSS, and JavaScript to create
web pages that can change and respond after they have loaded, without a full page
refresh.
• AJAX (Asynchronous JavaScript and XML): A revolutionary concept introduced around
2005 (popularized by Google Maps/Gmail). It allows a web page to send and receive
data from a server asynchronously in the background without interfering with the
current page.
o How it works: JavaScript uses the XMLHttpRequest (or the newer fetch() API)
object to make a request to the server. The server sends back data (often
in XML or JSON), and JavaScript uses that data to update the page dynamically.
o Impact: This made web apps feel much faster and more responsive, like desktop
applications.
• JSON (JavaScript Object Notation): A lightweight, human-readable data format. It has
largely replaced XML as the preferred data format for AJAX because it is natively
understood by JavaScript (it's literally a subset of JavaScript's object syntax). It's simple,
less verbose than XML, and easy to parse.
The Relationship: JavaScript is the engine. DHTML was the early concept of using it for
dynamism. AJAX is the technique for fetching data in the background. JSON is the most
common language for that data.
3. Approaches to Web Application Development
There are two primary architectural patterns for building web applications:
• Multi-Page Application (MPA): The traditional model.
Solved-by: Syeda-Asma
o The user clicks a link.
o The browser sends a request to the server.
o The server generates the entire new HTML page and sends it back.
o The browser unloads the old page and loads the new one.
o Pros: Good for SEO, simple to build.
o Cons: Feels slower, full page refreshes, more server load.
o Frameworks: Django, Ruby on Rails, [Link] MVC.
• Single-Page Application (SPA): The modern, AJAX-driven model.
o The browser loads a single HTML page initially.
o Subsequent interactions (clicks) trigger AJAX calls to the server's API.
o The server sends back only data (usually JSON), not HTML.
o JavaScript on the client dynamically updates the page with the new data.
o Pros: Feels very fast and responsive, like a native app.
o Cons: Complex to build, initial load can be slower, SEO challenges (though
solvable).
o Frameworks: React, Angular, [Link].
A modern hybrid approach is becoming popular: Server-Side Rendering (SSR) or Static Site
Generation (SSG) with frameworks like [Link] (for React) or [Link] (for Vue), which combine
the SEO benefits of MPAs with the interactivity of SPAs.
4. Programming in any Scripting Language
While JavaScript is non-negotiable for the client-side (browser), the server-side can be built
with many languages. These are often called "scripting languages" due to their interpreted
nature and rapid development cycle.
• Python (with Django/Flask): Known for clean syntax and vast ecosystem. Excellent for
data-heavy applications and AI.
• PHP: Powers a huge portion of the web (e.g., WordPress). Very mature with great
hosting support.
Solved-by: Syeda-Asma
• Ruby (with Ruby on Rails): Famous for its "convention over configuration" philosophy,
enabling very rapid development.
• [Link] (JavaScript on the server): Allows using the same language (JavaScript) on both
client and server, unifying development.
• Others: Go, Java, C#.
5. Search Technologies & Search Engine Optimization (SEO)
• Search Technologies: This refers to how search engines like Google work.
1. Crawling: Automated bots (spiders) discover and scan web pages by following
links.
2. Indexing: The content and metadata of these pages are processed and stored in
a massive, searchable database (the index).
3. Ranking & Retrieval: When you search, complex algorithms sift through the
index to find the most relevant, authoritative, and useful pages, ranking them in
order.
• Search Engine Optimization (SEO): The practice of optimizing your website to rank
higher in organic (non-paid) search results. It's about speaking the search engine's
language.
o Technical SEO: Ensuring your site is fast, mobile-friendly, and easy for bots to
crawl (e.g., a [Link] file).
o On-Page SEO: Optimizing content on the page itself—using relevant keywords in
titles, headings, and body text; writing good meta descriptions; using descriptive
alt text for images.
o Off-Page SEO: Building your site's reputation, primarily through earning backlinks
(links from other high-quality sites to yours).
6. XML Query Language, Semantic Web, Future Web Application Framework
This final group points towards a more structured and intelligent web.
• XML Query Language (XQuery & XPath):
o XML is a markup language for storing and transporting structured data.
Solved-by: Syeda-Asma
o XPath is a "query language" for selecting specific nodes or values from an XML
document. (e.g., "get me the price of all books").
o XQuery is a more powerful, full-featured query language for XML, similar to what
SQL is for databases. It can be used to extract and manipulate data from XML
databases or documents.
• Semantic Web (Web 3.0): The concept of a "web of data," where information is given
well-defined meaning, making it understandable not just to humans but also to
machines.
o Instead of just displaying a date <div>March 28, 2024</div>, you would tag it
with machine-readable meaning using standards like RDF (Resource Description
Framework) and OWL (Web Ontology Language).
o The goal is to enable computers to automatically find, combine, and act upon
information from different sources, leading to a much more intelligent and
connected web experience.
• Future Web Application Framework:
This is an evolving concept, but it's moving towards:
o Component-Based Architecture: As seen in React, Vue, and Angular, where UIs
are built from reusable, self-contained components.
o Jamstack (JavaScript, APIs, Markup): Pre-rendering sites for speed and security
and using APIs for dynamic functionality.
o WebAssembly (Wasm): A binary instruction format that allows you to run code
written in languages like C++, Rust, and Go in the browser at near-native speed.
This opens the door for high-performance applications (e.g., video editing,
games, CAD) on the web.
o Progressive Web Apps (PWAs): Web apps that use modern web capabilities to
deliver an app-like user experience—they can work offline, be installed on the
home screen, and send push notifications.
Solved-by: Syeda-Asma