The document discusses web browser architecture and processes, active browser pages, and caching support. It describes the evolution of web browsers from Tim Berner Lee's initial browser to popular browsers today. It explains how browsers work using a client-server model and protocols like HTTP. The document outlines the typical architecture of a web browser including components like the user interface, rendering engine, and networking. It defines different types of web pages including static, dynamic, and active pages that are driven by JavaScript. Finally, it covers caching at the site, browser, server, and micro levels to improve page load speeds.

1.  Web Browser Architecture and Processes
 Active Browser Pages
 Caching Support
Web Technologies
Group members:
Babar Hussain
Hamza Shafique
Ali Abbas
Bilal Ahmed

2.  Web Browser Architecture and Processes

3. Evolution of the Web Browsers:
o Tim Berner Lee was the founder of the Web
Browser as a concept developed in 1990.
o The initial name of his browser was World
Wide Web but now it has become Nexus.
Nexus logo
Tim Berner Lee
o Erwise was the first graphical user interface web
browser.
o Robert Cailliau was the man behind this
development.
Robert Cailliau Erwise logo

4. How the World Wide Web Works?
o The clients server format enables the basic
functioning of the web.
o The users request information on the web pages
and the server works on transferring it to them.
o Software to serve these pages to the users is a web
server.
o User’s computer here becomes the client and the
browser on this allows document retrieval.
Web Browser

5. Protocols and Standards:
• A collection of web pages with the same link make up a website.
• Each of these pages has a Uniform Resource Locator (URL).
• The main protocol of the web browser is hypertext transfer protocol (HTTP) to
get on web pages.
• This protocol enables browsers to get info and access the web pages on request
using a URL that always begins with HTTP:/.
• Example:
https://cms.mul.edu.pk/login.php

6. Architecture of Web Browser:
1. The User Interface is the layer between the
user and the Browser Engine.
2. The Browser Engine is an embedded
component that provides a high-level
interface to the Rendering Engine(Next
layer). It loads a given URL and supports
primitive browsing actions such as
forward, back, and reload. It provides
hooks for viewing various aspects of the
browsing session such as current page load
progress and JavaScript alerts.
3. The Rendering Engine produces a visual
representation for a given URL. It is
capable of displaying HTML and XML
documents, optionally styled with CSS, as
well as embedded content such as images.

7. 4. The Networking implements file transfer protocols such as HTTP and FTP.
5. The JavaScript Interpreter evaluates JavaScript code, which may be embedded
in web pages.
6. The XML Parser parses XML documents into a Document Object Model (DOM)
tree. This is one of the most reusable subsystems in the architecture. In fact, almost
all browser implementations leverage an existing XML Parser rather than rewriting
their own from scratch.
7. The Display Back-end provides drawing and windowing primitives, a set of user
interface widgets, and a set of fonts. It may be tied closely with the operating
system.
8. The Data Persistence stores various data associated with the browsing session
on disk. This may be high-level data such as bookmarks or toolbar settings, or it
may be low-level data such as cookies, security certificates, or cache.

8. Popular web browsers:

9. Conclusion:
• The web is a big space and thus has several components like web
browsers, web servers, websites, and web pages.
• These all are equally important and together make up an entire
wireframe of the world wide web.

10. Active Browser Pages

11. Browser page types:
The page in the WWW can be grouped into three broad categories:
• Static
• Dynamic
• Active
o Static : Each request results in exactly the same
response. Pages typically contain text ,hyperlinks
,photos and videos.
o Dynamic: Each web page is controlled by an application
server processing server-side scripts. For each request
the document is created. i.e. Online sales website.

12. Active Browser page:
o An active web page is a page where the browser performs the logic instead of
the server.
o An active web document consists of a computer program (js) that is sent by
the server to run on the browser locally. Once it runs , the active document
program can interact with user and change the display continuously.
o Active documents are sometimes known as client-side dynamic documents.

13. Active Browser page:
For example:
o when you've got a page where you're showing share prices, then you want it to
update e.g. every 5 seconds.
o https://www.tradingview.com/chart/

14. Caching Support

15. Caching support:
o If a web page is recently accessed it
will be stored on Cache otherwise
web browser requests it from the
server.
o Web caching is the activity of storing data for reuse, such as a copy of a web
page served by a web server.

16. Importance:
o When a visitor lands on your website, their browser requests data from your
site’s server. They then have to wait for the server to return the necessary data
before they can view your content.
o A web cache is website data a computer has stored temporarily for fast and easy
future access. Without web caching in place, browsers have to send new
requests every time visitors arrive on your site. If your content has been cached,
your server or visitors’ browsers can send a static copy of your content instead.
o This reduces the number of requests sent to your server, which take longer to
process than cached responses. This is the primary purpose of caching and how it
can increase page speed.

17. 4 types of web cache:
There are various points within your website network where you can cache data.
1-Site cache: Ideal for static content.
2-Browser cache: A popular and effective client-side cache option.
3-Server cache: Best for high-traffic websites that need to reduce server strain.
4-Micro cache: A targeted option for highly dynamic sites.

18. 1. Site cache:
o A site cache or page cache stores website data the first time a webpage is loaded. Each time a user
returns to your website, saved elements are quickly accessed and displayed to visitors.
o This is a type of client-side caching, which means that all the stored elements are controlled by the
end-user. As a website owner, the only say you have is how long content remains in the cache.
o To take advantage of site
caching, consider using a
WordPress plugin.

19. 2. Browser cache:
• Browser caching is a type of site caching built into the end-user’s web browser.
Website elements are stored by the browser on your visitor’s computer and
grouped with other files associated with your content.
• A browser cache can contain HTML pages, CSS stylesheets, images, and other
multimedia content.
• Browser caching overlaps with site caching because they are both client-side
systems. The primary difference is that the browser, rather than the end-user,
controls the cache.

20. • To apply browser caching access your website .htaccess file. You’ll need to use
File Transfer Protocol (FTP) and an FTP client such as FileZilla to access your
server.
• Then, right-click on .htaccess and select View/Edit. This opens the file in a text
editor such as Notepad. Copy and paste the following code into the file:
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

21. 3. Server cache:
• Server cache is an umbrella term covering a number of different types of caching.
This includes Content Delivery Network (CDN) caching, object caching, and
opcode caching. Each stores different content on your website’s server.
• This type of caching is administered by website owners without any input from
end-users.
• Server caching is one of the best methods for reducing server loads. When a
request is made, the server checks its temporary storage for the necessary
content before processing it the request in full.
• The methods used to set up server caching vary depending on the specific type of
cache you want to implement.

22. 4. Micro cache:
• This method stores content for very short periods of time. It generally saves
static versions of dynamic elements for up to 10 seconds.
• As this is a type of site cache, it’s controlled by end-users with limited input from
website owners.
• They’re typically high traffic and feature rapidly changing content, such as the
constantly updating graphs on currency exchange and stock websites.

23. 4. Micro cache:
• To use micro caching, you need to open your server configuration file. You’ll need
root server access to do this, which might not be possible with certain types of
hosting.
• If you do have access to this file, add the following code:
proxy_cache_path /tmp/cache keys_zone=cache:10m levels=1:2 inactive=600s
max_size=100m ; server
{
proxy_cache cache;
proxy_cache_valid 200 1s;
...
}

24. Conclusion:
• Client-side and server-side caching both have their benefits.
• They also have different implementation methods. Choosing the right type of
web cache can boost your page loading speeds and improve your site’s User
Experience (UX).