35
Type URL, Enter, and Then … By Jinglun Li

Type URL, Enter, and Then …

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Type URL, Enter, and Then …

Type URL, Enter, and Then …

By Jinglun Li

Page 2: Type URL, Enter, and Then …

Goal

• Brief introduction about HTTP request life cycle

• Main workflow• Some basic and classic solutions

Page 3: Type URL, Enter, and Then …

Agenda

• A Brief Glance• HTTP• Browser• Sever

Page 4: Type URL, Enter, and Then …

Topic

• Type URL in browser. Enter. Then what happens in your browser?

Page 5: Type URL, Enter, and Then …

A brief glance

1. DNS2. Send Request3. Get Response4. Render Page

Page 6: Type URL, Enter, and Then …

Domain Name System (DNS)

Page 7: Type URL, Enter, and Then …

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, deflateConnection: Keep-AliveHost: facebook.comCookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

Page 8: Type URL, Enter, and Then …

Get Response• HTTP/1.1 200 OK

Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,pre-check=0Expires: Sat, 01 Jan 2000 00:00:00 GMTP3P: CP="DSP LAW"Pragma: no-cacheContent-Encoding: gzipContent-Type: text/html; charset=utf-8X-Cnection: closeTransfer-Encoding: chunkedDate: Fri, 12 Feb 2010 09:05:55 GMT

Page 9: Type URL, Enter, and Then …

Render• Image

http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gifhttp://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif…

• CSShttp://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.csshttp://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css…

• JavaScripthttp://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.jshttp://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js…

Page 10: Type URL, Enter, and Then …

A brief glance

1. DNS2. Send Request3. Get Response4. Render Page

Page 11: Type URL, Enter, and Then …

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.

Page 12: Type URL, Enter, and Then …

HTTP Request & Response// Example of http://www.somehost.com/path/file.html// Request:string request_header = “”;request_header += “GET /path/file.html HTTP/1.0\r\n”;request_header += “Accept: application/x-ms-application, image/jpeg, [...]\r\n”; request_header += “Host: somehost.com\r\n\r\n”; // End of HTTP Headersend(socket_conn, request_header.c_str(), requestion.size(), 0);

// Response:string reply = “”;reply += "HTTP/1.1 200 OK\r\n“; // Status-Linereply +=" Content-Encoding : gzip \r\n“;

…reply += "Connection: close\r\n\r\n“; // End of HTTP Response Headerreply += “<html> … </html>\r\n"; // HTTP Response Bodysend(socket_conn, reply.c_str(), reply.size(), 0);

Page 13: Type URL, Enter, and Then …

Hypertext Transfer Protocol (HTTP)

• Application Layer• Request/Response• Stateless• Full Duplex• Cache• …

Page 14: Type URL, Enter, and Then …

How does a browser work?

Page 15: Type URL, Enter, and Then …

Browser's main subjects

• http://jsfiddle.net/lijinglun/px2hF/6/

Behavior

Presentation

Content

Page 16: Type URL, Enter, and Then …

Browser's High Level Structure

Page 17: Type URL, Enter, and Then …

Rendering Engines

Page 18: Type URL, Enter, and Then …

Render Tree Relation to DOM Tree

Page 19: Type URL, Enter, and Then …

Webkit Main Flow

Page 20: Type URL, Enter, and Then …

Mozilla's Gecko Main Flow

Page 21: Type URL, Enter, and Then …

Render Tree Relation to DOM Tree

Page 22: Type URL, Enter, and Then …

HTTP Servers

Page 23: Type URL, Enter, and Then …

Server Modes

• Single Process• Fork• Prefork

Page 24: Type URL, Enter, and Then …

IO Model

Page 25: Type URL, Enter, and Then …

Common Gateway Interface (CGI)

Page 26: Type URL, Enter, and Then …

FastCGI

Page 27: Type URL, Enter, and Then …

PHP

Page 28: Type URL, Enter, and Then …

MVC with PHP

Page 29: Type URL, Enter, and Then …

HTTP Servers

Page 30: Type URL, Enter, and Then …

Thanks!

Page 31: Type URL, Enter, and Then …

Back up

Page 32: Type URL, Enter, and Then …

HTTP

Page 33: Type URL, Enter, and Then …

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• …

Page 34: Type URL, Enter, and Then …

HTML/CSS/JavaScript

• http://jsfiddle.net/lijinglun/px2hF/5/

Page 35: Type URL, Enter, and Then …

Cgi, Fastcgi, mod_php