Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Type URL, Enter, and Then …

920 views

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

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

×