前端面試「http全過程」將全部HTTP相關知識拋出來了...

來一篇串通，一個http全過程的問題，把全部HTTP相關知識點都帶過一遍

http全過程

輸入域名(url)-->DNS映射爲IP-->TCP三次握手-->HTTP請求-->HTTP響應-->(瀏覽器跟蹤重定向地址)-->服務器處理請求-->服務器返回一個html響應-->(視狀況決定釋放TCP鏈接)-->客戶端解析HTML-->獲取嵌入在HTML中的對象從新發起http請求

輸入域名(url)

在域名這裏有不少能夠聊的：
域名級數判別
域名服務器及域名這裏有詳細解釋，即「計算機網絡技術」的第九章Domain Name System
一個點分隔一級（域名由份量組成，一級爲一個份量），通俗易懂以下：

...三級域名.二級域名.頂級域名
WWW.baidu.com  com爲頂級域名(一般依據組織和地理分爲兩類)，baidu爲二級域名，WWW網站
www.pic.baidu.com pic爲三級域名
所謂降域，如pic.baidu.com/a.txt  baidu.com/b.txt中a和b在不一樣的域下面，都降域爲baidu.com..以下詳細解釋

同源策略
同源需知足的條件：

• 協議相同

• 域名相同:a.b.c.com a.b.d.com域名相同嗎

• 端口相同

非同源受限制的行爲：

• cookie localStorage indexDB沒法獲取

• DOM沒法得到

• ajax請求不能發送
  跨域方法：

雙向跨域
1.降域(二級和以上有共同部分)

所謂降域就是尋找到最後面的域名相同的部分留下
a.b.c.com
d.b.c.com
降域後通通改成b.c.com或者c.com

• 存在的問題：

  • 安全性，當一個站點被攻擊，相同域名的站點也會被攻擊

  • 重複性，全部須要跨域的都要修改document.domain=""

  • ajax不受降域影響，仍是須要iframe在一個頁面引入另外一頁面的形式

  • 不可更改性，一旦降域就沒法回去

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

a向b傳送數據
    baidu.com/a.html中的iframe的src="google.com/b.html#paco",b.html監聽到   url發生變化觸發相應操做
b向a傳送數據
    google.com/b.html中隱藏一個iframe,設置src="baidu.com/proxy.html#data" data爲要傳輸的數據,proxy.html是和a.html同域名下的，是a b之間的代理，負責監聽utl變化就修改a的url，a監聽到url變化了就作出相應操做

b.html:

try {  
    parent.location.hash = 'data';  
} catch (e) {  
    // ie、chrome的安全機制沒法修改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:

//由於parent.parent（即baidu.com/a.html）和baidu.com/proxy.html屬於同一個域，因此能夠改變其location.hash的值  
parent.parent.location.hash = self.location.hash.substring(1);

問題：數據暴露在URL中，數據大小格式受限

3.HTML5的postMessage方法

a向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;//消息  
  var origin = event.origin;//消息來源地址  
  var source = event.source;//源Window對象  
  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);  
}

同理能夠b向a postMessage

單向跨域

1.jsonp

先看兩種用法

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

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

問題：只支持get請求

2.服務器代理

服務器沒有同源策略，在數據提供方沒有jsonp,window.name協議的支持下，使用服務器代理。
在baidu.com下配置一個代理proxy即baidu.com/proxy/將ajax綁定到代理下發送http請求，此時http請求是在服務端進行的，無同源限制

3.CORS

var url = 'http://api.alice.com/cors';  
var xhr = createCORSRequest('GET', url);  
xhr.send();
//非簡單請求
var url = 'http://api.alice.com/cors';  
var xhr = createCORSRequest('PUT', url);  
xhr.setRequestHeader(  
    'X-Custom-Header', 'value');
xhr.send();

另外：對於CORS的支持須要服務器和客戶端之間的協調

4.window.name

5.webSocket

須要服務器的支持，源在白名單

6.Access-Controll-Allow-Origin

http和https協議有什麼區別，重點解釋https

http+加密+認證+完整性保護=https

• http:應用層的無狀態，超文本傳輸協議。端口爲80

• HTTPS：只是http通訊接口部分用SSL和TLS協議替代。http直接和TCP通訊，而HTTPS使用SSL因此是先和SSL通訊，再由SSL和TCP通訊。端口爲443

cookie sessionStorage localStorage有什麼不一樣

• cookie存儲在客戶端，能夠發送給服務器，數據大小限制爲4K

• sessionStorage,localStorage存儲在本地，不能夠發送給服務器，數據大小爲5M

• localStorage只能手動清除數據

• sessionStorage關閉會話窗，數據就被清除了

HTML5本地存儲分爲

• webStorage(localStorage,sessionStorage)

• indexDB

DNS解析域名爲IP

• 瀏覽器緩存中找

• 系統緩存中找

• 路由器緩存中找

• ISP DNS緩存中找

TCP三次握手

• client----->server:SYN(發起一個TCP鏈接，同步報文)

• server----->client:SYN+ACK(應答報文，表示已建立鏈接)

• client----->server:ACK(應答報文，表示收到已鏈接)

四次揮手：
    由客戶端發起的關閉鏈接
        * client----->server:FIN(請求關閉鏈接)
        * server----->client:ACK(收到了鏈接，但不會當即關閉，等到報文都發送完再回復一個FIN)
        * server----->client:FIN
        * client----->server:ACK(收到關閉)

    由服務端發起的關閉鏈接
        * 當http設置了keepalive定時關閉，服務端會在結束數據傳送後關閉TCP鏈接

http請求

• 請求行

• 請求頭

• 空行

• 請求包體(只有POST請求有包體)

get/post區別

• 請求參數：get參數附在URL後面?隔開，POST參數放在包體中

• 大小限制：GET限制爲2048字符，post無限制

• 安全問題：GET參數暴露在URL中，不如POST安全

• 瀏覽器歷史記錄：GET能夠記錄，POST無記錄

• 緩存：GET可被緩存，post無

• 書籤：GET可被收藏爲書籤，post不可

• 數據類型：GET只能ASCII碼，post無限制

http響應

• 狀態行

• 響應頭

• 響應包體

http狀態碼
1XX：表示可續發請求
2XX：表示成功

* 202成功
* 204成功 不返回實體主體
* 206成功 執行了一個範圍請求

3XX：表示重定向

* 301永久重定向，增長SEO排名
* 302臨時重定向 禁止POST變爲GET
* 303另一個URI
* 304判斷是否要更新緩存 請求頭部攜帶if-modified-since自從上次更新距此次多久
* 307臨時重定向

4XX：表示客戶端錯誤

* 400客戶端語法錯誤
* 401請求未經受權
* 403服務器拒絕服務
* 404請求資源不存在

5XX：服務端錯誤

* 500不可預期的錯誤
* 503此時不能提供服務 稍後恢復正常

釋放TCP鏈接

• header中的connecton:close

  服務器主動關閉TCP鏈接，客戶端被動關閉鏈接

• header中的connecton:keepalive

  鏈接保持一段時間，能夠連續發送http請求

客戶端解析HTML

onload ready區別：

• ready表示文檔加載完畢，不包括圖片

• onload表示都加載完畢