SlideShare una empresa de Scribd logo
1 de 35
Type URL, Enter, and Then …

         By Jinglun Li
Goal
• Brief introduction about HTTP request life
  cycle
• Main workflow
• Some basic and classic solutions
Agenda
•   A Brief Glance
•   HTTP
•   Browser
•   Sever
Topic
• Type URL in browser. Enter. Then what
  happens in your browser?
A brief glance
1.   DNS
2.   Send Request
3.   Get Response
4.   Render Page
Domain Name System (DNS)
Send Request
•   GET http://facebook.com/ HTTP/1.1
    Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
    User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
    Accept-Encoding: gzip, deflate
    Connection: Keep-Alive
    Host: facebook.com
    Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
Get Response
•   HTTP/1.1 200 OK
    Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
    pre-check=0
    Expires: Sat, 01 Jan 2000 00:00:00 GMT
    P3P: CP="DSP LAW"
    Pragma: no-cache
    Content-Encoding: gzip
    Content-Type: text/html; charset=utf-8
    X-Cnection: close
    Transfer-Encoding: chunked
    Date: Fri, 12 Feb 2010 09:05:55 GMT
Render
•   Image
    http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
    http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
    …
•   CSS
    http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
    http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
    …
•   JavaScript
    http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
    http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js
    …
A brief glance
1.   DNS
2.   Send Request
3.   Get Response
4.   Render Page
Hypertext Transfer Protocol (HTTP)

 The Hypertext Transfer
 Protocol (HTTP) is a
 networking protocol for
 distributed, collaborative,
 hypermedia information
 systems.[1] HTTP is the
 foundation of data
 communication for the World
 Wide Web.
HTTP Request & Response
// Example of http://www.somehost.com/path/file.html
// Request:
string request_header = “”;
request_header += “GET /path/file.html HTTP/1.0rn”;
request_header += “Accept: application/x-ms-application, image/jpeg, [...]rn”;
request_header += “Host: somehost.comrnrn”; // End of HTTP Header
send(socket_conn, request_header.c_str(), requestion.size(), 0);

// Response:
string reply = “”;
reply += "HTTP/1.1 200 OKrn“;                 // Status-Line
reply +=" Content-Encoding : gzip rn“;
           …
reply += "Connection: closernrn“;          // End of HTTP Response Header
reply += “<html> … </html>rn";               // HTTP Response Body
send(socket_conn, reply.c_str(), reply.size(), 0);
Hypertext Transfer Protocol (HTTP)
                 •   Application Layer
                 •   Request/Response
                 •   Stateless
                 •   Full Duplex
                 •   Cache
                 •   …
How does a browser work?
Browser's main subjects
                                           Behavior


                                      Presentation


                                           Content
• http://jsfiddle.net/lijinglun/px2hF/6/
Browser's High Level Structure
Rendering Engines
Render Tree Relation to DOM Tree
Webkit Main Flow
Mozilla's Gecko Main Flow
Render Tree Relation to DOM Tree
HTTP Servers
Server Modes
• Single Process
• Fork
• Prefork
IO Model
Common Gateway Interface (CGI)
FastCGI
PHP
MVC with PHP
HTTP Servers
Thanks!
Back up
HTTP
HTTP
•   Request message
     – Request line, such as GET /images/logo.png HTTP/1.1, which requests a resource called
       /images/logo.png from server
     – Headers, such as Accept-Language: en
     – An empty line
     – An optional message body
•   Request methods
     –   HEAD
     –   GET
     –   POST
     –   PUT
     –   DELETE
     –   TRACE
     –   OPTIONS
     –   CONNECT
•   Status codes
•   Cache
•   …
HTML/CSS/JavaScript
• http://jsfiddle.net/lijinglun/px2hF/5/
Cgi, Fastcgi, mod_php

Más contenido relacionado

La actualidad más candente

Krug Fat Client
Krug Fat ClientKrug Fat Client
Krug Fat Client
Paul Klipp
 
Php & web server performace
Php & web server performacePhp & web server performace
Php & web server performace
Tuyển Đoàn
 
Zingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHPZingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHP
Chau Thanh
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
Chamnap Chhorn
 
Linux Apache Php Mysql Lamp1273
Linux Apache Php Mysql Lamp1273Linux Apache Php Mysql Lamp1273
Linux Apache Php Mysql Lamp1273
hussulinux
 

La actualidad más candente (19)

Web fundamentals - part 1
Web fundamentals - part 1Web fundamentals - part 1
Web fundamentals - part 1
 
Using memcache to improve php performance
Using memcache to improve php performanceUsing memcache to improve php performance
Using memcache to improve php performance
 
Posting Images using Android
Posting Images using AndroidPosting Images using Android
Posting Images using Android
 
Session and cookies,get and post methods
Session and cookies,get and post methodsSession and cookies,get and post methods
Session and cookies,get and post methods
 
Krug Fat Client
Krug Fat ClientKrug Fat Client
Krug Fat Client
 
Php & web server performace
Php & web server performacePhp & web server performace
Php & web server performace
 
Cache is king
Cache is kingCache is king
Cache is king
 
Cache is the king
Cache is the kingCache is the king
Cache is the king
 
HTML 5
HTML 5HTML 5
HTML 5
 
Zingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHPZingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHP
 
Website Performance Basics
Website Performance BasicsWebsite Performance Basics
Website Performance Basics
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
Http methods
Http methodsHttp methods
Http methods
 
Linux Apache Php Mysql Lamp1273
Linux Apache Php Mysql Lamp1273Linux Apache Php Mysql Lamp1273
Linux Apache Php Mysql Lamp1273
 
PHP MySQL Training : Module 3
PHP MySQL Training : Module 3PHP MySQL Training : Module 3
PHP MySQL Training : Module 3
 
Misconfigured CORS, Why being secure isn't getting easier. AppSec USA 2016
Misconfigured CORS, Why being secure isn't getting easier. AppSec USA 2016Misconfigured CORS, Why being secure isn't getting easier. AppSec USA 2016
Misconfigured CORS, Why being secure isn't getting easier. AppSec USA 2016
 
4 Basic PHP
4 Basic PHP4 Basic PHP
4 Basic PHP
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Hosting Client Websites on a WordPress Multisite Network
Hosting Client Websites on a WordPress Multisite NetworkHosting Client Websites on a WordPress Multisite Network
Hosting Client Websites on a WordPress Multisite Network
 

Similar a Type URL, Enter, and Then …

Presentation (PowerPoint File)
Presentation (PowerPoint File)Presentation (PowerPoint File)
Presentation (PowerPoint File)
webhostingguy
 
Presentation (PowerPoint File)
Presentation (PowerPoint File)Presentation (PowerPoint File)
Presentation (PowerPoint File)
webhostingguy
 
web optimization
web optimizationweb optimization
web optimization
hazzaz
 
04. Web optimization
04. Web optimization04. Web optimization
04. Web optimization
Quang Anh Le
 
Interactive web. O rly?
Interactive web. O rly?Interactive web. O rly?
Interactive web. O rly?
timbc
 

Similar a Type URL, Enter, and Then … (20)

Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)Building Lightning Fast Websites (for Twin Cities .NET User Group)
Building Lightning Fast Websites (for Twin Cities .NET User Group)
 
Presentation (PowerPoint File)
Presentation (PowerPoint File)Presentation (PowerPoint File)
Presentation (PowerPoint File)
 
Presentation (PowerPoint File)
Presentation (PowerPoint File)Presentation (PowerPoint File)
Presentation (PowerPoint File)
 
Optimization of modern web applications
Optimization of modern web applicationsOptimization of modern web applications
Optimization of modern web applications
 
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
 
12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat12 core technologies you should learn, love, and hate to be a 'real' technocrat
12 core technologies you should learn, love, and hate to be a 'real' technocrat
 
spdy
spdyspdy
spdy
 
web optimization
web optimizationweb optimization
web optimization
 
04. Web optimization
04. Web optimization04. Web optimization
04. Web optimization
 
Web optimization
Web optimizationWeb optimization
Web optimization
 
20190516 web security-basic
20190516 web security-basic20190516 web security-basic
20190516 web security-basic
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelal
 
Interactive web. O rly?
Interactive web. O rly?Interactive web. O rly?
Interactive web. O rly?
 
REST and JAX-RS
REST and JAX-RSREST and JAX-RS
REST and JAX-RS
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Speed = $$$
Speed = $$$Speed = $$$
Speed = $$$
 
SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012SPDY - http reloaded - WebTechConference 2012
SPDY - http reloaded - WebTechConference 2012
 
SPDY Talk
SPDY TalkSPDY Talk
SPDY Talk
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
Http2 in practice
Http2 in practiceHttp2 in practice
Http2 in practice
 

Último

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 

Type URL, Enter, and Then …

  • 1. Type URL, Enter, and Then … By Jinglun Li
  • 2. Goal • Brief introduction about HTTP request life cycle • Main workflow • Some basic and classic solutions
  • 3. Agenda • A Brief Glance • HTTP • Browser • Sever
  • 4. Topic • Type URL in browser. Enter. Then what happens in your browser?
  • 5. A brief glance 1. DNS 2. Send Request 3. Get Response 4. Render Page
  • 7. Send Request • GET http://facebook.com/ HTTP/1.1 Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...] User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...] Accept-Encoding: gzip, deflate Connection: Keep-Alive Host: facebook.com Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
  • 8. Get Response • HTTP/1.1 200 OK Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Expires: Sat, 01 Jan 2000 00:00:00 GMT P3P: CP="DSP LAW" Pragma: no-cache Content-Encoding: gzip Content-Type: text/html; charset=utf-8 X-Cnection: close Transfer-Encoding: chunked Date: Fri, 12 Feb 2010 09:05:55 GMT
  • 9. Render • Image http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif … • CSS http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css … • JavaScript http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js …
  • 10. A brief glance 1. DNS 2. Send Request 3. Get Response 4. Render Page
  • 11. Hypertext Transfer Protocol (HTTP) The Hypertext Transfer Protocol (HTTP) is a networking protocol for distributed, collaborative, hypermedia information systems.[1] HTTP is the foundation of data communication for the World Wide Web.
  • 12. HTTP Request & Response // Example of http://www.somehost.com/path/file.html // Request: string request_header = “”; request_header += “GET /path/file.html HTTP/1.0rn”; request_header += “Accept: application/x-ms-application, image/jpeg, [...]rn”; request_header += “Host: somehost.comrnrn”; // End of HTTP Header send(socket_conn, request_header.c_str(), requestion.size(), 0); // Response: string reply = “”; reply += "HTTP/1.1 200 OKrn“; // Status-Line reply +=" Content-Encoding : gzip rn“; … reply += "Connection: closernrn“; // End of HTTP Response Header reply += “<html> … </html>rn"; // HTTP Response Body send(socket_conn, reply.c_str(), reply.size(), 0);
  • 13. Hypertext Transfer Protocol (HTTP) • Application Layer • Request/Response • Stateless • Full Duplex • Cache • …
  • 14. How does a browser work?
  • 15. Browser's main subjects Behavior Presentation Content • http://jsfiddle.net/lijinglun/px2hF/6/
  • 16. Browser's High Level Structure
  • 18. Render Tree Relation to DOM Tree
  • 21. Render Tree Relation to DOM Tree
  • 23. Server Modes • Single Process • Fork • Prefork
  • 27. PHP
  • 32. HTTP
  • 33. HTTP • Request message – Request line, such as GET /images/logo.png HTTP/1.1, which requests a resource called /images/logo.png from server – Headers, such as Accept-Language: en – An empty line – An optional message body • Request methods – HEAD – GET – POST – PUT – DELETE – TRACE – OPTIONS – CONNECT • Status codes • Cache • …

Notas del editor

  1. No IENo bingOccasionally Facebook
  2. More complicated example.
  3. Socket
  4. Download tools: curl, wget …Server side: apache/ngix/lighhtpdReference:http://www.w3.org/Protocols/HTTP/1.0/spec.htmlhttp://www.w3.org/Protocols/rfc2616/rfc2616.html
  5. Example on Browser
  6. Basic functionality:DownloadRenderCacheUser interface (bookmark …)…
  7. The browser main functionality is to present the web resource you choose, by requesting it from the server and displaying it on the browser window. The resource format is usually HTML but also PDF, image and more. The location of the resource is specified by the user using a URI (Uniform resource Identifier).Basic features for browser:Download pageRender pageGood performanceCross OSUI
  8. The user interface - this includes the address bar, back/forward button, bookmarking menu etc. Every part of the browser display except the main window where you see the requested page.The browser engine - the interface for querying and manipulating the rendering engine.The rendering engine - responsible for displaying the requested content. For example if the requested content is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.Networking - used for network calls, like HTTP requests. It has platform independent interface and underneath implementations for each platform.UI backend - used for drawing basic widgets like combo boxes and windows. It exposes a generic interface that is not platform specific. Underneath it uses the operating system user interface methods.JavaScript interpreter. Used to parse and execute the JavaScript code.Data storage. This is a persistence layer. The browser needs to save all sorts of data on the hard disk, for examples, cookies. The new HTML specification (HTML5) defines &apos;web database&apos; which is a complete (although light) database in the browser.It is important to note that Chrome, unlike most browsers, holds multiple instances of the rendering engine - one for each tab,. Each tab is a separate process.
  9. WebKit: SafariGecko: FirefoxTrident: IE
  10. Notice:new_socket = accept(listen_socket, …) read(new_socket, …)Both parent and child process should close socket which is not use anymore.fork (vfork) vs clonePrefork modes:Master listen, workers accept without mutexMaster listen, workers accept with mutexMaster listen and accept, communicate to workers
  11. Two phrases of read socket:1. Kernel buffer is ready2. Copy kernel buffer to user spaceEvent Demultiplexer:Reactor pattern: When Kernel buffer is ready, Demultiplexer call user’s handler to do read/write operationProactor pattern: When Kernel finish read/write operations, Demultiplexer call user’s handler passing into io result to do other works.Good resource: “ACE network programming”
  12. Concept:A bridge connecting http server and application processor (followedcgi)Popular languages as cgi:C, shell, perl, vbMain flow:Fork and executeDraw back: low performanceExample: bugzilla
  13. Useage:Load balanceReverse proxyAdvantages:StableSeparate IO process and logic processMulti languages
  14. Apache + php work flow:When starts, apache loads all libraries and execute MINIT.When request arrives, PHP call RINIT for all modules to initialize environment for response.After sends reply, PHP call RSHUTDOWN to clear environment.MSHUTDOWN will be called for all modules in each process forked by apache before apache closing.
  15. Php &amp; SmartyMapleSymphony
  16. Cgi/fastcgi/mod_php