"Reprint" front-end Interview "HTTP whole process" will be all the HTTP related knowledge thrown ...

Original: front-end Interview "HTTP whole process" will be all the HTTP related knowledge thrown ...

To a collusion, an HTTP whole process problem, all the HTTP related knowledge points are carried over

HTTP whole process

Input domain name (URL)-->dns mapped to ip-->tcp three-time handshake-->http Request-->http Response (browser tracking redirect address)-Server processing request-- The server returns an HTML response--(depending on the decision to release the TCP connection)--Client resolution html--> gets the object embedded in the HTML to re-initiate the HTTP request

Enter the domain name (URL)

There are a lot of things to talk about in the domain:

Domain Name Series discrimination

Domain name server and domain name here is explained in detail, namely "Computer network Technology" nineth Chapter domain name System

A point separated by a level (domain name consists of components, one component at a level), easy to understand as follows:

... Level three domain name. class two domain name. Top-level domain name WWW.baidu.com  com is a top-level domain name (usually divided into two categories according to organization and geography), Baidu is a two-level domain name, www site www.pic.baidu.com pic is a three-level domain name, such as Pic.baidu.com/a.txt  baidu.com/b.txt in A and B under different domains, all fall into the domain of baidu.com. Explained in detail below

Homologous policy

Conditions to be satisfied with homology:

• Same protocol

• Same domain name: a.b.c.com a.b.d.com domain name?

• Same port

Non-homologous restricted behavior:

• Cookie Localstorage indexdb Not available

• Dom cannot get

• Ajax requests cannot be sent

  Cross-domain method:

Bidirectional cross-domain

1. Descending domain (with a common part of level two and above)

The so-called descending domain is to find the last side of the domain name of the same part left a.b.c.comd.b.c.com after the domain changed to b.c.com or c.com

• Problems that exist:

  • Security, sites with the same domain name will be attacked when a site is attacked

  • Repeatability, all need to cross the domain to modify document.domain= ""

  • Ajax does not surrender domain impact, or need iframe in one page to introduce another page form

  • Non-change, once you drop the field, you can't go back.

2.location.hash (FIM---fragment itentitier messaging)

A to B transmits the    src= "Google.com/b.html#paco" of the IFRAME in the data baidu.com/a.html, the b.html hears the change of the   URL to trigger the corresponding action B sends the data    to a Google.com/b.html hide an iframe, set the src= "Baidu.com/proxy.html#data" data for the transmission of information, proxy.html is and a.html the same domain name, is a b between the agent, Responsible for monitoring utl changes to modify a url,a to hear the URL changes to make the appropriate action

B.html:

try {      Parent.location.hash = ' data ';  } catch (e) {      //IE, chrome security mechanism cannot modify Parent.location.hash,      var Ifrproxy = document.createelement (' iframe ');      Ifrproxy.style.display = ' None ';      IFRPROXY.SRC = "Http://www.baidu.com/proxy.html#data";      Document.body.appendChild (Ifrproxy);  }

Proxy.html:

Because Parent.parent (that is, baidu.com/a.html) and baidu.com/proxy.html belong to the same domain, they can change the value  of their location.hash Parent.parent.location.hash = self.location.hash.substring (1);

Problem: Data is exposed in URLs, data size is limited in format

The PostMessage method of 3.HTML5

A sends data to B

Baidu.com/a.html

Window.onload = function () {      var IFR = document.getElementById (' IFR ');      var targetorigin = "http://www.google.com";      Ifr.contentWindow.postMessage (' Hello world! ', targetorigin);  };

Google.com/b.html

var onmessage = function (event) {    var data = event.data;//Message    var origin = event.origin;//Message Source Address    var Source = event.source;//Source Window Object    if (origin== "http://www.baidu.com") {  console.log (data);//hello world!    }  };  if (typeof window.addeventlistener! = ' undefined ') {    window.addeventlistener (' message ', OnMessage, false);  } else if (typeof window.attachevent! = ' undefined ') {    //for ie    window.attachevent (' OnMessage ', onmessage);  }

The same can be B to a postMessage

One-way cross-domain

1.jsonp

Look at two usages first

<script>    function foo (data) {        console.log (data);    } </script><script type= "Http://www.google.com/getUsers.js?callback=foo" ></script> callback function

<script src= "http://www.google.com/getUsers.php?flag=do&time=1" ></script> parameters

Problem: Only get requests are supported

2. Server Agent

The server does not have a homologous policy and uses the server proxy with the support of the data provider without the Jsonp,window.name protocol. Under Baidu.com, configure an agent proxy that baidu.com/proxy/the AJAX binding to an agent to send an HTTP request, at which point the HTTP request is made on the server, with no homologous restrictions

3.CORS

var url = ' http://api.alice.com/cors ';  var xhr = createcorsrequest (' GET ', url);  Xhr.send ();//non-simple request var url = ' http://api.alice.com/cors ';  var xhr = createcorsrequest (' PUT ', url);  Xhr.setrequestheader (      ' x-custom-header ', ' value '); Xhr.send ();

Additionally: Support for cors requires coordination between the server and the client

4.window.name

5.webSocket

Requires server support, source in whitelist

6.access-controll-allow-origin

What is the difference between HTTP and HTTPS protocols, with an emphasis on HTTPS

http+ Encryption + authentication + integrity Protection =https

• http: Non-stateful, Hypertext Transfer Protocol for application layer. Port is 80

• HTTPS: Only the HTTP communication interface portion is replaced with the SSL and TLS protocol. HTTP communicates directly with TCP, and HTTPS uses SSL so that it communicates with SSL first, and then by SSL and TCP. Port is 443

What is the difference between a cookie sessionstorage localstorage

• Cookies are stored on the client and can be sent to the server with a data size limit of 4K

• Sessionstorage,localstorage is stored locally and cannot be sent to the server with a data size of 5M

• Localstorage can only purge data manually

• Sessionstorage closes the session window and the data is cleared

HTML5 Local storage is divided into

• WebStorage (Localstorage,sessionstorage)

• Indexdb

DNS resolves domain name to IP

• In the browser cache, look for

• In the system cache, look for

• In the router cache, look for

• In the ISP DNS cache, look for

TCP Three-time handshake

• Client----->server:syn (initiating a TCP connection, synchronizing the message)

• Server----->client:syn+ack (reply message, indicating that the connection was created)

• Client----->server:ack (reply message, indicating receipt connected)

Four waves:    client-initiated shutdown connection * Client        ----->server:fin (Request close connection)        * Server----->client:ack (connection is received but not immediately closed. Wait until the message has been sent and then reply to a FIN)        * Server----->client:fin        * Client----->server:ack (received off) a    shutdown connection initiated by the service side        * When HTTP is set to KeepAlive timed off, the server closes the TCP connection after the data transfer is ended

HTTP request

• Request Line

• Request Header

• Blank Line

• Request inclusion (only POST request has package body)

Get/post differences

• Request parameters: The get parameter is appended to the URL? Separated, the post parameter is placed in the package body

• Size limit: Get is limited to 2048 characters, Post is unlimited

• Security issue: Get parameters are exposed in URLs, not as post security

• Browser history: Get can record, post no record

• Cache: Get can be cached, post none

• Bookmarks: Get can be bookmarked, post is not

• Data type: Get ASCII code only, Post unlimited

HTTP response

• Status line

• Response header

• Response Inclusion

HTTP status Code

1XX: Indicates the request can be renewed

2XX: Indicates success

* 202 Success * 204 success does not return entity body * 206 successfully performed a range request

3XX: Indicates redirection

* 301 Permanent Redirect, increase SEO rank * 302 Temporary redirect prohibit post to get* 303 another uri* 304 determine if you want to update the cache request head carry if-modified-since since last update how long is this time * 307 Temporary redirect

4XX: Indicates client error

* 400 Client syntax error * 401 Request unauthorized * 403 Server denial of service * 404 Request resource does not exist

5XX: Service-side error

* 500 Unexpected error * 503 Service not available at this time back to normal later

Releasing a TCP connection

• Connecton:close in the header

  The server actively shuts down the TCP connection and the client closes the connection passively

• Connecton:keepalive in the header

  The connection remains for a period of time and can be continuously sent HTTP requests

Client parsing HTML

OnLoad Ready difference:

• Ready means the document is loaded, not including the picture

• OnLoad means all loads are complete.

"Reprint" front-end Interview "HTTP whole process" will be all the HTTP related knowledge thrown ...