Type URL, Enter, and Then …


Published on

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

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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 …

    1. 1. Type URL, Enter, and Then … By Jinglun Li
    2. 2. Goal• Brief introduction about HTTP request life cycle• Main workflow• Some basic and classic solutions
    3. 3. Agenda• A Brief Glance• HTTP• Browser• Sever
    4. 4. Topic• Type URL in browser. Enter. Then what happens in your browser?
    5. 5. A brief glance1. DNS2. Send Request3. Get Response4. Render Page
    6. 6. Domain Name System (DNS)
    7. 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. 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. 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. 10. A brief glance1. DNS2. Send Request3. Get Response4. Render Page
    11. 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. 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 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);
    13. 13. Hypertext Transfer Protocol (HTTP) • Application Layer • Request/Response • Stateless • Full Duplex • Cache • …
    14. 14. How does a browser work?
    15. 15. Browsers main subjects Behavior Presentation Content• http://jsfiddle.net/lijinglun/px2hF/6/
    16. 16. Browsers High Level Structure
    17. 17. Rendering Engines
    18. 18. Render Tree Relation to DOM Tree
    19. 19. Webkit Main Flow
    20. 20. Mozillas Gecko Main Flow
    21. 21. Render Tree Relation to DOM Tree
    22. 22. HTTP Servers
    23. 23. Server Modes• Single Process• Fork• Prefork
    24. 24. IO Model
    25. 25. Common Gateway Interface (CGI)
    26. 26. FastCGI
    27. 27. PHP
    28. 28. MVC with PHP
    29. 29. HTTP Servers
    30. 30. Thanks!
    31. 31. Back up
    32. 32. HTTP
    33. 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• …
    34. 34. HTML/CSS/JavaScript• http://jsfiddle.net/lijinglun/px2hF/5/
    35. 35. Cgi, Fastcgi, mod_php
    1. A particular slide catching your eye?

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