Web browser architecture.pptx

Introduction to the Web browser and web browser architecture. Active browser pages. Cache support and its types.

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: Tim Berner Lee was the founder of the Web Browser as a concept developed in 1990 . The initial name of his browser was World Wide Web but now it has become Nexus . Nexus logo Tim Berner Lee Erwise was the first graphical user interface web browser. Robert Cailliau was the man behind this development. Robert Cailliau Erwise logo

4. How the World Wide Web Works? The clients server format enables the basic functioning of the web. The users request information on the web pages and the server works on transferring it to them. Software to serve these pages to the users is a web server . 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: The User Interface is the layer between the user and the Browser Engine. 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. 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 Static : Each request results in exactly the same response. Pages typically contain text ,hyperlinks ,photos and videos. 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: An active web page is a page where the browser performs the logic instead of the server. 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. Active documents are sometimes known as client-side dynamic documents .

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

14. Caching Support

15. Caching support: If a web page is recently accessed it will be stored on Cache otherwise web browser requests it from the server. 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: 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. 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. 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: 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. 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. 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).