SlideShare uma empresa 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Semelhante 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
 

Semelhante 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

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
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...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
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
 
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
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 

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 do 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