0
Browser’s Workflow
Behind the scenes of web browsers
( Not including script Interpretation )
jghj
if ( Learn the internal browser operation ) {
(Development Best Practices) ++;
}
jghj
Content
● Browser
● Available-Browsers
● Statistics
● Browser-Structure
● Browser’s Components
● Rendering Engine and...
jghj
Browser
● Present web-resources.
● Display content according to HTML and CSS
specification. (W3C Specification)
● Tod...
jghj
HTML(4 or 5 ) specification does not
define UI element. A browser must
have, like file-type input variable.
jghj
Available-Browsers
Desktop :
Chrome, FireFox, Safari , IE, Opera etc
Mobile and Tablet :
Android Browser, iPhone, Ope...
jghj
Statistics
jghj
Statistics
jghj
Statistics
jghj
Statistics
(According to state counter global state)
Desktop Usage :
{Chrome, FireFox, Safari } = 71%
Mobile and Tabl...
jghj
Chrome is a freeware but not open
source. Chrome is derived from
Chromium.
jghj
Browser’s high level structure
jghj
Browser’s Component
1. The user interface:
a. Every part of the browser display, except the window.
b. The address ba...
jghj
Browser’s Component
3. The rendering engine :
a. Parse HTML and CSS.
b. Display parsed content on the screen
4. Netwo...
jghj
Browser’s Component
5. UI backend:
a. Drawing basic widgets like combo boxes and windows.
b. not platform specific bu...
jghj
Browser’s Component
6. JavaScript interpreter
a. Used to parse and execute JavaScript code.
7. Data storage
a. This i...
jghj
Chrome : Each tab runs in a separate
process. (multiple instances of the
rendering engine)
jghj
Rendering Engine
● By default display only HTML, XML and image.
● Beyond above things, we need extension/Add-one/Plug...
jghj
Rendering Engine Main Flow..
Build Dom Tree
# Get data from network Layer.
# Parse HTML.
# Create DOM nodes (Build by...
jghj
HTML
Style
Sheets
HTML
Parser
CSS
Parser
Dom
Tree
Style
Rules
Attachment
Dom
Render
Tree
Painting
Layout
Display
HTML...
jghj
● Execute script immediately when parser reach at
<script> tag.
● If the script is external then first, the resource ...
jghj
Resource
● HTML5 Rocks
● Tali Garsiel's site
Upcoming SlideShare
Loading in...5
×

How browser work

2,195

Published on

Available-Browsers,
Browser-Structure
Browser’s Components
Rendering Engine and flow
Webkit v/s Gecko

Published in: Internet
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,195
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
54
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "How browser work"

  1. 1. Browser’s Workflow Behind the scenes of web browsers ( Not including script Interpretation )
  2. 2. jghj if ( Learn the internal browser operation ) { (Development Best Practices) ++; }
  3. 3. jghj Content ● Browser ● Available-Browsers ● Statistics ● Browser-Structure ● Browser’s Components ● Rendering Engine and flow ● Webkit v/s Gecko
  4. 4. jghj Browser ● Present web-resources. ● Display content according to HTML and CSS specification. (W3C Specification) ● Today, mostly browser do not follow all w3c specification.
  5. 5. jghj HTML(4 or 5 ) specification does not define UI element. A browser must have, like file-type input variable.
  6. 6. jghj Available-Browsers Desktop : Chrome, FireFox, Safari , IE, Opera etc Mobile and Tablet : Android Browser, iPhone, Opera Mini, Opera-Mobile, UC browser, Nokia S40/S60, Chrome, Firefox etc
  7. 7. jghj Statistics
  8. 8. jghj Statistics
  9. 9. jghj Statistics
  10. 10. jghj Statistics (According to state counter global state) Desktop Usage : {Chrome, FireFox, Safari } = 71% Mobile and Tablet Usage : {Android Browser, iPhone, Chrome} = 54 %
  11. 11. jghj Chrome is a freeware but not open source. Chrome is derived from Chromium.
  12. 12. jghj Browser’s high level structure
  13. 13. jghj Browser’s Component 1. The user interface: a. Every part of the browser display, except the window. b. The address bar, back/forward button, bookmarking menu, etc. 2. The browser engine: a. Bridge between the UI and the rendering engine.
  14. 14. jghj Browser’s Component 3. The rendering engine : a. Parse HTML and CSS. b. Display parsed content on the screen 4. Networking a. Network calls such as HTTP requests b. Platform-dependent
  15. 15. jghj Browser’s Component 5. UI backend: a. Drawing basic widgets like combo boxes and windows. b. not platform specific but use operating system user interface methods.
  16. 16. jghj Browser’s Component 6. JavaScript interpreter a. Used to parse and execute JavaScript code. 7. Data storage a. This is a persistence layer. b. Save all sorts of data locally, such as cookies.
  17. 17. jghj Chrome : Each tab runs in a separate process. (multiple instances of the rendering engine)
  18. 18. jghj Rendering Engine ● By default display only HTML, XML and image. ● Beyond above things, we need extension/Add-one/Plug-ins ● Rendering Engine ○ Chrome and Opera : Blink ○ Chrome (iPhone) & Safari : WebKit ○ Firefox : Gecko ○ IE : Trident
  19. 19. jghj Rendering Engine Main Flow.. Build Dom Tree # Get data from network Layer. # Parse HTML. # Create DOM nodes (Build by Elements). # Content Tree/ Dom Tree. # Resource(CSS) loading during parsing Build Render Tree # Parse CSS (Inline +External). # Dom Nodes + Parsed CSS Info. # Build Render Tree. # Display start on Browse-Window. Painting # Each node Painted. # Use UI backend Component. Layout Process # Given coordinate to each node where they will appear. # Always start from root node(0,0). # Recursive process.
  20. 20. jghj HTML Style Sheets HTML Parser CSS Parser Dom Tree Style Rules Attachment Dom Render Tree Painting Layout Display HTML Style Sheets HTML Parser CSS Parser Content Tree Style Rules Frame Construction Dom Frame Tree Painting Reflow Display WebKit-Flow Gecko-Flow Content Sink
  21. 21. jghj ● Execute script immediately when parser reach at <script> tag. ● If the script is external then first, the resource must be fetched from the network. ● In both the above cases, Parser will be on hold until script is executed.
  22. 22. jghj Resource ● HTML5 Rocks ● Tali Garsiel's site
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×