Type URL, Enter, and Then …

Preview:

DESCRIPTION

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

Citation preview

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. 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, deflateConnection: Keep-AliveHost: facebook.comCookie: 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=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

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…

A brief glance

1. 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.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);

Hypertext Transfer Protocol (HTTP)

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

How does a browser work?

Browser's main subjects

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

Behavior

Presentation

Content

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

Recommended