跨域和http請求學習

跨域

1.什麼是跨域

跨域：指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器施加的安全機制。 所謂同源，指的是協議，域名和端口號相同。

2.解決方法

（1）jsonp的核心思想是：瀏覽器的script,img,iframe標籤不受同源策略的限制，因此能夠經過script標籤引入一個js文件，文件載入成功後會執行咱們在url參數中指定的callback函數，而且把咱們須要的json數據做爲參數傳入；

優勢是兼容性好，缺點是隻支持get請求，且只支持跨域http請求這種狀況；

（2）CORS 在服務器端經過檢查請求頭部的origin,從而決定請求應該成功仍是失敗。具體的方法是在服務端設置Response Header響應頭中的Access-Control-Allow-Origin爲對應的域名，實現了CORS（跨域資源共享）；

（3)  document.domain 必須知足兩個條件：1) 頁面中嵌入iframe框架，2) 當前頁面和iframe中的頁面，主域，協議，端口必須徹底一致；

（4）window.postMessage(message,targetOrigin) 方法是html5新引進的特性，能夠用它來向其它的window對象發送信息，不管這個window對象屬於同源或者不一樣源，

接收消息window.addEventListener('message', function(e){})

http請求

1.在瀏覽器端輸入網站的url地址；

2.瀏覽器查找緩存

瀏覽器會查找瀏覽器緩存，系統緩存，路由緩存，若是沒有的話，繼續下一步，若是有的話，直接顯示

tip：瀏覽器會把訪問過的web網站資源緩存起來，而判斷是否使用緩存的條件有如下幾種：

（1）是否有這個網站的緩存

（2）這個網站的緩存是否過時，具體看Cache-Control中緩存的有效時間；

（3）跟服務器協商是否使用緩存，若是上次緩存的時候有Last-modified 和 Etag字段，本次請求就會加上If-Modified-Since(上次請求資源的時間)和If-None-Match(上次資源的修改時間)；

3.經過DNS獲取url對應的ip地址

先在本機的host文件中查找是否有這個url對應的ip,若是沒有的話，就請求DNS進行ip地址的獲取；

4.創建TCP連接

http在工做以前，須要客戶端和服務端創建連接，這個連接的創建是經過tcp（三次握手）來完成的，

5.瀏覽器向web服務器發送請求

一旦連接已經創建，瀏覽器就能夠給web服務器發送請求命令；

6.瀏覽器給web服務器發送請求頭信息

瀏覽器在發送了請求後，還要給web服務器發送請求頭信息，好比accept-charset(瀏覽器端指定的字符集),最後發送一個空的請求頭表明請求發送完畢,注意:若是是post提交,則會繼續提交請求體

7.web服務器進行應答 

應答的第一部分是http版本號,第二部分是協議的狀態碼

 8.web服務器發送應答頭消息 web服務器給瀏覽器發送應答頭消息,也就是關於web服務器本身的信息,最後發送一個空白行表明應答結束 

 9.web服務器發送數據 以應答頭裏面的content-type所描述的格式發送數據 

 10.web服務器關閉連接 web服務器向瀏覽器發送了應答數據以後,就要關閉tcp連接(tcp四次握手關閉連接),若是添加了connection:keep-alive,那麼就還會保持連接狀態 

學習來自：  https://blog.csdn.net/zhttly/article/details/82832582

瀏覽器渲染過程

1.瀏覽器獲取html文件後，會自上而下進行加載，而且在加載的過程當中進行解析和渲染

2.若是遇到外部css文件和圖片，瀏覽器會另外發送一個請求，去獲取css文件和響應的圖片，這個請求是異步的，不會影響html的加載速度，若是遇到js文件，html文件則會掛起渲染的過程，等待js文件加載完畢，再繼續進行渲染；因此通常把js文件寫在body的末尾；