Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Web Browsers.pptx
1.
2. www.What is a web browser.com
What is a web browser
A web browser is a software application for
presenting the web resource you choose, by
requesting it from the server and displaying it in
the browser window. The location of the
resource is specified by the user using a URL.
3. www.History.com
History
1950’s-70’s
Transmission Control Protocol (TCP) enables two hosts to establish a
connection and exchange streams of data.
Email: Electronic mail applications are developed
Telnet: A system for logging in, over a network, to a computer situated in
another location.
File Transfer Protocol (FTP) is a standard network protocol used to
transfer computer files from one host to another host over a TCP-based
network, such as the Internet .
ARPANET become the first network to use the Internet Protocol.
Usenet: A distributed threaded discussion and file sharing system
4. www.History.com
History
1980’s
First standardization of the Simple Mail Transfer Protocol, a network
transmission standard for the transport of email.
Internet: A global computer network which was created by interconnecting
various existing networks with the TCP/IP protocol suite.
Internet Relay Chat (IRC): A form of real-time Internet text messaging (chat)
or synchronous conferencing.
6. www.History.com
History
1990’s
In 1992, Tony Johnson released the MidasWWW browser.
ARPANET was retired and merged into the NSFNET.
HTML was developed by a British engineer, Tim Berners-Lee while working
in CERN
Samba Robert started development of the first web browser for the Macintosh, called
Samba.
Thomas R. Bruce on 8 June 1993 released Cello, one of the first graphical
web browsers
8. www.History.com
History
1990’s
IBM presented its own Web Explorer with OS/2 Warp in 1994.
Later popular web browsers like opera, Mozilla and Internet Explorer were
released
Popular internet services like blog, Amazon, Yahoo, wiki, ebay, Hotmail, go
daddy, google, PayPal etc were also launched.
9. www.The browser's high level structure.com
high level structure
The browser’s main components:-
10. www.The browser's high level structure.com
high level structure
The rendering engine:-
• The responsibility of the rendering engine is ,Rendering, that is display of the
requested contents on the browser screen.
• Different browsers use different rendering engines: Internet Explorer uses Trident,
Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a
fork of WebKit.
The rendering engine's threads
• The rendering engine is single threaded. In Firefox and Safari this is the main
thread of the browser.
• Network operations can be performed by several parallel threads.
11. www.The browser's high level structure.com
high level structure
The Main flow
Rendering engine basic flow
12. www.The browser's high level structure.com
high level structure
Parsing–general
Parsing a document means translating it to a structure the code can use. The result of
parsing is usually a tree of nodes is known a parse tree or a syntax tree.
DOM (Document Object Model)
The output tree ( parse tree) is a tree of DOM element and attribute nodes. It is the
object presentation of the HTML document and the interface of HTML elements to
the outside world like JavaScript.
13. www.The browser's high level structure.com
high level structure
Actions when the parsing is finished
At this stage the browser will mark the document as interactive and
start parsing scripts that are in "deferred" mode those that should be
executed after the document is parsed. The document state will be
then set to "complete" and a "load" event will be fired.
14. www.The browser's high level structure.com
high level structure
Render tree construction
While the DOM tree is being constructed, the browser constructs
another tree, the render tree. This tree is of visual elements in the
order in which they will be displayed. It is the visual representation of
the document. The purpose of this tree is to enable painting the
contents in their correct order.
Style Computation
Building the render tree requires calculating the visual properties of
each render object. This is done by calculating the style properties of
each element.
15. www.The browser's high level structure.com
high level structure
Layout
When the renderer is created and added to the tree, it does not have a
position and size than “layout()“ method is called to adjust the
position and size of the content.
Painting
In the painting stage, the render tree is traversed and the renderer's
"paint()" method is called to display content on the screen.
16. www.Some Important terms.com
Some Important terms
• Scripting language:- A high-level programming language that is interpreted by
another program at runtime rather than compiled by the computer's processor.
• Cookies:-Cookies are encrypted text files, located in browser directories. They are
used by web developers to help users navigate their websites efficiently and
perform certain functions.
• Internet vs WWW:-The Internet is a massive network of networks, a networking
infrastructure.
The World Wide Web is a system of Internet servers that support specially formatted
documents. The documents are formatted in a markup language called HTML.
17. www.Some Important terms.com
Some Important terms
• Local I.P. vs foreign I.P.:-Local IP addresses are the ones located on your home
network, or simply put, the ones that your ISP (Internet Service Provider) assigned
to you,
foreign IP addresses are the ones that are using your network, hence they are
outside of the network.
• Static Vs Dynamic webpages:-Static Web pages display the exact same
information whenever anyone visits it.
Dynamic Web pages are capable of producing different content for different visitors
from the same source code file.
• DNS:-Short for Domain Name System (or Service or Server), an Internet service
that translates domain names into IP addresses. The Internet however, is really based
on IP addresses. Every time you use a domain name, therefore, a DNS service must
translate the name into the corresponding IP address.
18. www.Some Important terms.com
Some Important terms
• HTML vs XML vs PHP vs CSS vs JavaScript:-
HTML provides the basic building blocks for the web ,the web programming language that
tells web browsers how to structure and present content on a web page.
XML is not related to web pages at all. It's just a way of storing data wrapped in XML files.
The text data wrapping is used so that we don't have to use databases.
PHP is a programming language, but it doesn't run on your browser. It runs on the
webserver. PHP is generally used for getting and putting data to/from the database (mostly
MySQL). It runs on Linux based servers.
CSS is used to make websites beautiful and modern looking. It's just for all the visual effects
and with new version simple animation too.
JavaScript is a scripting language, that is, a lightweight programming language that
is interpreted by the browser engine when the web page is loaded.
JavaScript can interact with HTML source code
19. www.Some Important terms.com
Some Important terms
• HTTP vs HTTPS
HTTP defines how messages are
formatted and transferred, and
what action web servers and
browsers should take in response
to various commands.
21. www.Some Important terms.com
Some Important terms
Identify the parts of a URL
Add-ons
They are installable enhancements that allow the user to add or
augment application features, use themes to his or her liking, and
handle new types of content.
22. www.Some Important terms.com
Some Important terms
• Incognito
Privacy mode or "private browsing" or
"incognito mode“ is a privacy feature in some
web browsers to disable browsing history and
the web cache. Privacy mode will also disable
the storage of data in cookies. This privacy
protection is only on the local computing
device as it is still possible to identify
frequented websites by associating the IP
address at the web server.
23. www. What happens when you type a URL in browser.com
URL in browser
Step 1. URL is typed in the
browser
24. www. What happens when you type a URL in browser.com
URL in browser
Step 2. The browser looks up the IP
address for the domain name
The first step in the navigation is to figure out the IP address for the visited domain. The
DNS lookup proceeds as follows:
1. Browser cache
2. OS cache
3. Router cache
4. ISP DNS cache
5. Recursive search
25. www. What happens when you type a URL in browser.com
URL in browser
Step 3. The browser sends a HTTP
request to the web server
Client
Browser
Web
Server
HTTP
request
The browser identifies
itself and states what
types of responses it will
accept.
The Connection header
asks the server to keep
the TCP connection open
for further requests.
26. www. What happens when you type a URL in browser.com
URL in browser
Step 4. HTTP request made from
browsers are handled
These requests are handled by a
special software running on server
- commonly known
as webservers e.g. Apache, IIS etc.
Web server passes on the request to
the proper request handler - a
program written to handle web
services e.g. PHP, ASP.NET, Ruby,
Servlets etc.
27. www. What happens when you type a URL in browser.com
URL in browser
Step 5. The browser follows the
redirect
The browser now knows that
“http://www.facebook.com/” is the correct URL to
go to, and so it sends out another GET request:
28. www. What happens when you type a URL in browser.com
URL in browser
Step 6. The server ‘handles’ the
request
The server will receive the GET request, process
it, and send back a response.
29. www. What happens when you type a URL in browser.com
URL in browser
Step 7. Browser receives the
HTTP response
Here is the response that the server generated and sent back:
HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-
check=0, pre-check=0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Connection: Keep-Alive
Content-length: 1215
Date: Fri, 30 May 2014 08:10:15 GMT
Content-Type tells the type of the content the browser has to show,
Content-length tells the number of bytes of the response.
Content-Encoding header tells the browser that the response body is compressed using the gzip
algorithm.
31. www. What happens when you type a URL in browser.com
URL in browser
Step 8. Browser displays the
html content
Rendering of html content is also done in phases. The browser first
renders the bare bone html structure, and then it sends multiple GET
requests to fetch other hyper linked stuff.
32. www. What happens when you type a URL in browser.com
URL in browser
Step 9. Client interaction
with server
Once a html page is loaded, there are several ways a
user can interact with the server.
33. www.Comparison of Browsers.com Comparison of Browsers
Internet Explorer
Internet explorer project started in August 16, 1995. It attains about
95% usage share during 2002 and 2003. It uses Trident as layout
engine. It supports to Windows. Internet Explorer 11 and Microsoft
Edge are latest versions.
Advantages:-
• Universal
• Faster with Windows computers because it is integrated
• Some websites can only be used with Internet Explorer
• Simple, elegant and attractive
Disadvantages:-
• Its speed, no customization and no track filtering.
• Becomes buggy easily
• Its HTML 5 support test is also the least 336/555.
34. Opera
Opera project started in 1995 but its first stable version was released in
1996 . It uses the WebKit (Blink) layout engine. It support to Windows,
Macintosh or Linux. Opera 31 was released in August 2015.
Advantages:-
• It has the sleekest interface and is fast
• Secure and very easy to use.
• Its memory consumption is less compared to other browsers.
• Its HTML 5 support test is 525/555.
Disadvantage:-
• It is usually a little slow in reading scripts.
• Is not compatible with all WebPages
www.Comparison of Browsers.com
Comparison of Browser
35. www.Comparison of Browsers.com
Comparison of Browsers
Safari
Its first stable version was released in January 7, 2003. It uses WebKit
layout engine. It support to Windows and Macintosh . Latest version 8.
Advantages:-
• It has Clean and simple layout .
• It removes advertisements and pop-ups and leaves just the text.
• Fast web browser to Apple products.
Disadvantages :-
• Tendency to crash
• Bugs
• Vulnerability to malware
• Slow moments
• Its HTML 5 support test is also very less 395/555.
36. www.Comparison of Browsers.com
Comparison of Brows
Mozilla Firefox
Its first stable version was released in November 9, 2004.It uses Gecko layout
engine. It support to Windows, Macintosh or Linux. Latest version 40.
Advantages:-
• Cross-platform browser with a better rendering of the web pages
• It ensures better privacy than any other browser i.e. is why TOR uses it
• Its HTML 5 support test is 467/555.
Disadvantage:-
• Sometimes loading Mozilla Firefox is quite time consuming when starting
from the initial start. Especially if a lot of adds on are installed.
• Known for high CPU memory usage
37. www. Comparison of Browsers.com
Comparison of Browsers
Google Chrome
Launched in September 2, 2008, Google Chrome is a free web
browser created by Google that uses the Webkit (Blink) layout
engine. It support to Windows, Macintosh or Linux. Latest version
45.
Advantages:-
• It has a very basic, simple design, making it easy to use.
• Fastest browser.
• Its HTML 5 support test is 526/555 i.e. highest for any browser
• It is SANDBOXED
Disadvantage:-
• Uses lot of RAM.
38. www.Comparison of Browsers.com
Comparison of Browsers
Mobile browsers
A mobile browser is a web browser designed for use on a mobile device such as
a mobile phone or tablets. Mobile browsers are optimized so as to display Web
content most effectively for small screens on portable devices. Mobile browser
software must be small and efficient to accommodate the low memory capacity and
low-bandwidth of wireless handheld devices.
40. www.EDGE.com
EDGE
Officially released on July 29, 2015, it replaced Internet Explorer as the default browser
on Windows 10. Edge uses a new layout engine also known as EdgeHTML, which is
forked from Trident. Early benchmarks of the EdgeHTML engine—included in the first
beta release of Edge in Windows 10 demonstrated drastically improved JavaScript
performance .Microsoft's new browser had similar performance to Google Chrome 41
and Mozilla Firefox 37.
In July 2015, Edge scored 402 out of 555 points on the HTML5test.