What happened from the input URL to the display page?

As a software developer, you will certainly have a complete hierarchical understanding of how Web applications work, as well as the technologies used in these applications: browsers, http,html, Web servers, requirements processing, and so On.

This article will be more in-depth study when you enter a url, the background exactly what happened to the thing ~

1. First of all, you need to enter the URL in the Browser:

2. The browser finds the IP address of the domain name

The first step in navigation is to find its IP address by the domain name that is Accessed. The DNS lookup process is as Follows:

• Browser Cache – The browser caches DNS records for a period of Time. interestingly, the operating system does not tell the browser when to store DNS records, so that different browsers store a self-fixed time (ranging from 2 minutes to 30 minutes).
• System Cache – If the required records are not found in the browser cache, the browser makes a system call (gethostbyname in windows). This will get the records in the system Cache.
• Router Caching – next, the previous query request is sent to the router, which generally has its own DNS Cache.
• ISP DNS Cache – The next check is the ISP cache DNS Server. The corresponding cache record can be found in this general.
• Recursive Search – your ISP's DNS server starts with a recursive search with a domain name server, from a. com top-level domain name server to a Facebook domain name Server. In the general DNS server cache there will be domain names in the. com domain name server, so the match process to the top level server is not so necessary.

DNS recursive lookups are as Follows:

DNS is a bit worrying, which is that the entire domain name, such as wikipedia.org or facebook.com, appears to correspond to a single IP address. fortunately, There are several ways to eliminate this bottleneck:

• Circular DNS is a solution when DNS lookups return multiple ips. For example, facebook.com actually corresponds to four IP addresses.
• a Load Balancer is a hardware device that listens on a specific IP address and forwards network requests to a clustered Server. Some large sites typically use this expensive, high-performance load balancer.
• geographic DNS improves scalability by mapping domain names to multiple different IP addresses, depending on the geographic location of the User. Such a different server is not able to update the synchronization state, but it is good to map the static Content.
• Anycast is a routing technology that maps multiple physical hosts to an IP address. In the ointment, anycast and TCP protocols are not well adapted, so they are rarely used in those scenarios.

Most DNS servers use anycast to obtain efficient, low-latency DNS Lookups.

3. The browser sends an HTTP request to the Web server

Because dynamic pages such as the Facebook page, which are opened and soon expire in the browser cache, are no doubt they cannot be read from.

so, the browser will send a request to the server on which Facebook is located:

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 This request defines the URLto Read: "http://facebook.com/". The browser itself defines (user-agent header), and what type of corresponding (accept and accept-encoding headers) it wants to accept. the Connection header requires the server not to close the TCP connection in order to request it behind.

The request also contains cookiesstored by the browser for that domain Name. As you may already know, in different page requests, cookies are key values that match the status of a Website. This allows cookies to store login usernames, server-assigned passwords, and some user settings. Cookies are stored in the client computer as text documents and sent to the server each time it is Requested.

The original HTTP request and its corresponding tools are used in many ways. The author prefers to use fiddler, and of course there are other tools like Firebug. These software can be very helpful when it comes to website Optimization.

In addition to getting the request, there is another way to send the request, which is often used in the submission form Alone. The sending request passes its parameters via a URL (e.g.: http://robozzle.com/puzzle.aspx?id=85). The send request sends its arguments after the request body Header.
Slashes like "http://facebook.com/" are critical. In this case, the browser can safely add Slashes. And like "http://example.com/folderorfile" such an address, because the browser is not clear whether Folderorfile is a folder or file, so cannot automatically add Slashes. At this point, the browser does not have a slash directly access to the address, the server responds to a redirect, resulting in an unnecessary handshake.

4. Permanent REDIRECT response for Facebook services

The figure shows the response that the Facebook server sends back to the Browser:

http/1.1 301 Moved Permanently
cache-control:private, no-store, no-cache, must-revalidate, post-check=0,
Pre-check=0
expires:sat, 00:00:00 GMT
location:http://www.facebook.com/
p3p:cp= "DSP law"
Pragma:no-cache
set-cookie:made_write_conn=deleted; expires=thu, 12-feb-2009 05:09:50 GMT;
path=/; domain=.facebook.com; HttpOnly
content-type:text/html; Charset=utf-8
X-cnection:close
date:fri, 05:09:51 GMT
content-length:0

The server responds with a 301 permanent redirect response to the browser so that the browser accesses "http://www.facebook.com/" rather than "http://facebook.com/".

Why does the server have to redirect rather than directly send the Web content that the user wants to see? There are many interesting answers to this Question.

One of the reasons is related to search engine rankings . You see, if a page has two addresses, like Http://www.igoro.com/and http://igoro.com/, the search engine will think of them as two sites, resulting in fewer search links and less rankings. and search engine know 301 Permanent redirect is what meaning, so will visit with www and without WWW address to the same site Ranking.

Another is that using a different address will result in a poor cache-friendliness . When a page has several names, it may appear several times in the Cache.

5. Browser Tracing REDIRECT Address

now, The browser knows that "http://www.facebook.com/" is the correct address to access, so it sends another fetch request:

GET http://www.facebook.com/HTTP/1.1
accept:application/x-ms-application, image/jpeg, application/xaml+xml, [...]
Accept-language:en-us
user-agent:mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
accept-encoding:gzip, deflate
Connection:keep-alive
cookie:lsd=xw[...]; c_user=21[...]; x-referer=[...]
Host:www.facebook.com

The header information is in the same meaning as in the previous Request.

6. Server "processing" Requests

The server receives the fetch request, and then processes and returns a Response.

This appears to be a forward-looking task, but there are a lot of interesting things going on in the middle-just like the simple website of the Author's blog, not to mention the large-scale website like Facebook.

• Web Server Software
  Web server Software (like IIS and Apache) receives an HTTP request and then determines what request processing is performed to handle it. Request processing is a program that can read requests and generate HTML to respond (like Asp.net,php,ruby ... ）。

  For the simplest example, the requirement processing can be stored in a file hierarchy that maps the address structure of a web Site. Like http://example.com/folder1/page1.aspx this address will map/httpdocs/folder1/page1.aspx this file. The Web server software can be set as the address manual for the corresponding request processing, so that the Page1.aspx publishing address can be http://example.com/folder1/page1.

• Request Processing
  Request processing of Read requests and its parameters and Cookies. It will read and possibly update some data, and say that the data is stored on the Server. then, The requirement processing generates an HTML Response.

All dynamic sites face an interesting challenge-how to store Data. Half of a small site has a SQL database to store data, and a website that stores a large amount of data and/or visits has to find some way to allocate the database to multiple Machines. The solution is: sharding (based on the primary key value of the data table scattered across multiple databases), replication, the use of weak semantic consistency of the simplified database.

Delegating work to batch processing is a cheap technology to keep data updated. For example, Fackbook has to update the news feed in a timely fashion, but the "people you might know" feature in the data support only needs to be updated every night (as the author guesses, It's unclear how the changes will be perfected). batch job updates can cause some of the less important data to be stale, but it makes it faster and cleaner to keep data updated.

7. The server sends back an HTML response

The response generated and returned by the server in the Figure:

http/1.1 OK
cache-control:private, no-store, no-cache, must-revalidate, post-check=0,
Pre-check=0
expires:sat, 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, 09:05:55 GMT

[email protected] [...]

The entire response size is 35kB, most of which is transferred as BLOB type after finishing.

the content Encoding header tells the browser that the entire response body is compressed with the gzip algorithm. After extracting the BLOB block, you can see the following HTML as Expected:

<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 strict//en"    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
lang= "en" id= "facebook" class= "no_js" >
<meta http-equiv= "content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "content-language" content= "en"/>
...

With regard to compression, the header information indicates whether the page is cached or not, and if so, what cookies are to be set (not in the previous Response) and private Information.

Note that the Content-type is set to "text/html" in the Header. The header lets the browser render the response content in HTML instead of downloading it as a file. The browser determines how the response is interpreted based on the header information, but it also considers other factors such as URL extension content.

8. The browser starts to display HTML

When the browser does not fully accept the entire HTML document, it has already started to display this page:

9. The browser sends the object embedded in the HTML

When the browser displays html, it will notice the need to get a label for other address Content. At this point, the browser sends a FETCH request to retrieve the Files.

Here are a few URLs we need to get back when we visit facebook.com:

• Image
  Http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
  Http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
  ...
• CSS style Sheets
  Http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
  Http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
  ...
• JavaScript Files
  Http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
  Http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js
  ...

These addresses are going through a process similar to HTML reading. So the browser will find these domain names in dns, send requests, redirect, etc...

however, Unlike dynamic pages, static files allow the browser to cache Them. Some files may not need to be communicated to the server and read directly from the Cache. The Server's response contains the term information for static file retention, so the browser knows how long to cache Them. also, Each response may contain an ETag header that works like a version number (the entity value of the requested variable), and if the browser observes that the version ETag information for the file already exists, stop the file transfer immediately.

Try to guess what "fbcdn.net" means in the Address. The smart answer is "facebook content distribution network". Facebook uses content distribution networks (CDNS) to distribute static files like images, css tables, and JavaScript files. As a result, these files will be backed up in many CDN data centers around the WORLD.

Static content often represents the bandwidth size of the site and can be easily replicated through a cdn. A third-party CDN is usually used by the Website. For example, Facebook's static files are hosted by akamai, the largest CDN provider.

For example, you might get a response from a akamai.net server when you try to ping static.ak.fbcdn.net. interestingly, When you ping again, the server may be different, which means that the load balance behind the scenes is starting to Work.

10. The browser sends an asynchronous (AJAX) request

Under the guidance of the Great Spirit of Web 2.0, the client remains in contact with the server after the page is Displayed.

Take the Facebook chat feature as an example, and it will keep in touch with the server to update your shiny gray friend status in a timely Fashion. In order to update the status of these avatar-lit friends, the JavaScript code executed in the browser sends an asynchronous request to the Server. This asynchronous request is sent to a specific address, which is a fetch or send request constructed by the Program. Or in the case of facebook, the client sends http://www.facebook.com/ajax/chat/buddy_list.php a publish request to get the status information about which online in your friend.

When you bring up this pattern, you have to talk about "AJAX"-"asynchronous JavaScript and XML," Although the reason why the server responds in XML format is casualgirlfriend. For example, for an asynchronous request, Facebook will return some JavaScript code snippets.

Among other fiddler, This tool allows you to see the asynchronous requests sent by the Browser. In fact, you can not only passively as a spectator of these requests, but also proactively make changes and resend Them. Ajax requests are so easy to be blindfolded that it's really frustrating for those scoring online game Developers. (of course, don't lie to others like That)

The Facebook Chat feature provides an interesting case for ajax: pushing data from the server side to the Client. Because HTTP is a request-response protocol, the chat server cannot send new messages to Customers. instead, the client has to poll the server every few seconds to see if he has any new messages.

These situations occur when long polling is a very interesting technique for mitigating server Load. If the server does not have new messages when polled, it will ignore the Client. When a new message is received from the customer without a time-out, the server finds an outstanding request and returns the new message as a response to the Client.

What happened from the input URL to the display page?