瀏覽器輸入一個URL會發生什麼？

weixin_34146805發表於2017-09-02
瀏覽器

宣告：下圖的情景不考慮cookie，代理和快取等。

2976869-71dcbdf33a3022fd.png
瀏覽器輸入一個URL會發生什麼.png

例項分析：
訪問一個不存在的域名:http://www.1231231232112312312312312321.com/
2976869-00bfceb18f994ca8.png
image.png

訪問一個存在的域名：https://www.google .com
會重定向到https://www.google.co.jp/?gfe_rd=cr&dcr=0&ei=kYyqWaDmLtLW4gKI1bXgDg

2976869-2b82b69a2af5cc52.png
image.png

1.如何檢視request資訊以及response資訊？

開啟Chrome控制檯，到NetWork視窗進行分析。
例如：
檢視我的google賬號頭像的資源資訊。

黃色的General部分包含關鍵request和response資訊。
綠色的Response Headers包含完整的響應相關資訊，包括通用首部，響應首部，實體首部。
紅色的Resquest Headers包含完整的請求相關資訊，包括通用首部，請求首部。

聰明的你一定發現了，為什麼Response Headers多了一項實體首部？
因為對於前端工程師而言，如何處理response中包含的資訊可以說是我們工作的關鍵！、

那麼response的資訊存在哪裡呢？
答案就是它的content中，也就是在Chrome控制檯的Network Response中去檢視。
若是有，它會清晰得為你展示完整的Response資訊。
若沒有，它會告訴你：This request has no response data available.

2976869-197c46ce87f1832c.png
image.png

2.當前頁面返回的資源型別分析？

通過content-type檢視。
大多數為2種資源
①無response data的靜態資源，例如html，css，js等。


2976869-9e166369f88f28da.png
image.png

②主要為response data的資料資源，大多數情況為json格式資料。

2976869-efdf72861230d51f.png
image.png

3.如何構建自己的http請求並且獲取或者提交資料？

這是一個很有趣的話題。
資源主要分為靜態資源和資料資源，方式主要分為同步請求和非同步請求。

①靜態資源
當你請求伺服器上靜態資源時，假設我們在css檔案中定義了一個圖片的背景色為伺服器上的一張圖片，url(http://www.xxx.com/hello.png)，瀏覽器會自己為我們去做這件事情。
不需要我們去操心，現在有很多方便的雲端儲存，例如七牛雲用來存放圖片就不錯。
②資料資源
大多數是json資料。
1）獲取資料

Axios({
        method: 'get',
        url: 'http://localhost:3000/hello.json',
        })
})

2）提交資料

 Axios({
      method: 'post',
      url: 'http://localhost:3000/about',
      data: {user:{username:"dog"}}
    })

例如我用Axios這個庫非同步請求和提交資料，一般情況指明方法和url就好，有時會有跨域問題，這個就是後話了。
大多數情況對一下2個響應頭部屬性做設定就好，一般來說是在後端進行設定。

Access-Control-Allow-Methods:...
Access-Control-Allow-Origin:...

關於同步和非同步：

例如同步資料資源指的就是和當前資源一併下載下來.
而非同步json則是當你在瀏覽器進行了一些操作後，例如github關注了一個大牛，此時你只點選了關注按鈕，但是整個頁面沒有重新整理，只是關注按鈕部分的狀態發生了區域性更新。
所以說同步和非同步，一般情況是和整體渲染和區域性渲染相關聯的。

其實輸入一個url還有很多地方，比如文章開頭提到的cookie，快取和代理等。

目前對於這些知識點，我僅僅停留在概念的理解上，並沒有真正實操過，等後面我對這一部分有深入瞭解後，再來完善這篇部落格...

努力成為優秀的大前端工程師！

相關文章