Type URL, Enter, and Then …
Upcoming SlideShare
Loading in...5

Type URL, Enter, and Then …



1. Brief introduction about HTTP request life cycle

1. Brief introduction about HTTP request life cycle
2. Main workflow
3. Some basic and classic solutions



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • No IENo bingOccasionally Facebook
  • More complicated example.
  • Socket
  • 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
  • Example on Browser
  • Basic functionality:DownloadRenderCacheUser interface (bookmark …)…
  • 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
  • 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 'web database' 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.
  • WebKit: SafariGecko: FirefoxTrident: IE
  • 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
  • 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”
  • 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
  • Useage:Load balanceReverse proxyAdvantages:StableSeparate IO process and logic processMulti languages
  • 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.
  • Php & SmartyMapleSymphony
  • Cgi/fastcgi/mod_php

Type URL, Enter, and Then … Type URL, Enter, and Then … Presentation Transcript

  • 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 glance1. DNS2. Send Request3. Get Response4. 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 glance1. DNS2. Send Request3. Get Response4. 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 Headersend(socket_conn, request_header.c_str(), requestion.size(), 0);// Response:string reply = “”;reply += "HTTP/1.1 200 OKrn“; // Status-Linereply +=" Content-Encoding : gzip rn“; …reply += "Connection: closernrn“; // End of HTTP Response Headerreply += “<html> … </html>rn"; // HTTP Response Bodysend(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?
  • Browsers main subjects Behavior Presentation Content• http://jsfiddle.net/lijinglun/px2hF/6/
  • Browsers High Level Structure
  • Rendering Engines
  • Render Tree Relation to DOM Tree
  • Webkit Main Flow
  • Mozillas 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