http 協議_DNS_域名解析 DNS 服務器_內容分發網絡 CDN_緩存機制_HTML5 瀏覽器存儲技術_cookie_sessionStorage_localStorage

TCP/IP 協議族 是按層次去劃分的

應用層    決定了向用戶提供應用服務時通訊的活動。

FTP 協議（文件傳輸協議）
DNS（域名協議）
HTTP（超文本傳輸協議）

傳輸層    提供處於網絡鏈接中兩臺計算機之間的數據傳輸

TCP（傳輸控制協議）
UDP（用戶數據報協議）

網絡層    用來處理在網絡上流動的數據包

IP 協議

數據鏈路層    用來處理鏈接網絡的硬件設備

Http 協議

HTTP/0.9
HTTP/1.0
HTTP/1.1（主流）
HTTP/2.0

 

用於 客戶端 和 服務端 之間的通訊

HTTP 協議是在 TCP/IP 協議族 的基礎上運做起來的

其屬於 TCP/IP 協議族內的 應用層

HTTP 協議是無狀態、無鏈接的協議

 

---

 一次完整的請求，咱們須要注意什麼？

• DNS 是否能夠經過緩存來減小查詢 IP 地址的時間？

DNS 的查找是有開銷的，一般瀏覽器查找一個給定的主機名的 IP 地址須要花費 20 到 120 毫秒

在 DNS 查找完成以前，瀏覽器不能從主機那下載任何東西

DNS 是能夠被緩存起來提升性能的

因爲 服務器的 IP 地址是可變的，緩存也會消耗內存，所以不論是哪一個級別的緩存都應該週期性的清除一下。

• 網絡的請求過程是否走的是最近的網絡？

CDN 內容分發網絡（Content  Delivery Networks）

分佈在多個不一樣地理位置的web服務器，用於更加有效的向用戶發佈內容

• 最簡單的 CDN 網絡  = 一個DNS服務器 + 幾臺緩存服務器

1. 當用戶點擊網站頁面上的內容 URL，通過本地 DNS 系統解析，

DNS 系統會最終將域名的解析權交給 CNAME 指向的 CDN 專用 DNS 服務器。

2. CDN 的 DNS 服務器將 CDN 的全局負載均衡設備 IP 地址返回用戶。

3. 用戶向 CDN 的全局負載均衡設備發起內容 URL 訪問請求。

4. CDN 全局負載均衡設備根據用戶 IP 地址，以及用戶請求的內容 URL，

選擇一臺用戶所屬區域的區域負載均衡設備，告訴用戶向這臺設備發起請求。

5. 區域負載均衡設備會爲用戶選擇一臺合適的緩存服務器提供服務，

選擇的依據包括：根據用戶 IP 地址，判斷哪一臺服務器距用戶最近；
根據用戶所請求的 URL 中攜帶的內容名稱，判斷哪一臺服務器上有用戶所需內容；
查詢各個服務器當前的負載狀況，判斷哪一臺服務器尚有服務能力。
基於以上這些條件的綜合分析以後，
區域負載均衡設備會向全局負載均衡設備返回一臺緩存服務器的 IP 地址。

6. 全局負載均衡設備把服務器的 IP 地址返回給用戶。

7. 用戶向緩存服務器發起請求，緩存服務器響應用戶請求，將用戶所需內容傳送到用戶終端。

若是這臺緩存服務器上並無用戶想要的內容，而區域均衡設備依然將它分配給了用戶，
那麼這臺服務器就要向它的上一級緩存服務器請求內容，直至追溯到網站的源服務器將內容拉到本地。

CDN 不只作內容分發加速，還作安全防禦問題。 

不會一臺服務器的當機，整個請求的癱瘓。 

緩存機制 

客戶端 與 服務器 協商的緩存策略

• 是否能夠少發幾回請求？

資源合併

• 請求體是否能夠儘可能的小？

資源壓縮

• 減小 DNS 查詢？

一個多資源的站點最好使用 2 到 4 個不同的主機來存放服務端資源（在減小DNS查詢和容許高度並行下載之間做出的最好權衡）

使用 Keep-alive 進行持久鏈接

 

---

 DNS 域名解析服務   

DNS 協議 提供經過域名查找IP，或逆向從 IP 地址反查域名的服務

DNS服務是 和 HTTP協議同樣，位於應用層的協議，它提供域名到 IP 地址之間的解析服務。

chrome://dns/ 或 chrome://net-internals/#dns       查看瀏覽器上的DNS緩存

ipconfig/displaydns        查看操做系統中的DNS緩存

在哪裏？

查找瀏覽器緩存

查找 PC 本機系統緩存

查找 路由器 緩存

查找ISP DNS 緩存。(網絡運營商，如 電信/聯通 服務器 )

遞歸搜索 DNS 根服務器（全球只有 13 臺）

 

---

 HTML5 瀏覽器本地存儲技術 Application (有這三種技術：cookie, sessionStorage, localStorage____都是字符串類型的鍵值對)

(另外還有一種存儲模式叫：session;    這種級別的存儲屬於服務端會話級別的存儲)

面試題： 如何實現頁籤之間的通訊？

• cookie ----> http 無狀態解決方案

會話 cookie

人爲 cookie

cookie 是純文本格式，靜態資源是不會攜帶 cookie 的

不包含任何可執行的代碼信息，伴隨着用戶請求在 Web 服務器和瀏覽器之間傳遞

本質上屬於 http 的範疇，由於 http 協議自己是無狀態的，服務端是沒有辦法區分請求來自於哪一個客戶端

即使是來自於同一個客戶端的屢次請求 咱們的服務端也是沒有能力來區分的，因此才須要 cookie 去維持客戶端的狀態

cookie 通常都是後臺用的，不多讓前端來直接寫

cookie 分 :  持久級別、session 級別(cookie 通常用於和 session 通訊)

缺點：

安全性低，易被截獲：因爲 cookie 在HTTP中是明文傳遞的，其中包含的數據均可以被他人訪問，可能會被篡改、盜用

大小限制： cookie 的大小限制在4KB左右，一個網頁最好至多 20 個左右的 cookie。

增長流量，無形中佔用帶寬： cookie 每次請求都會被自動添加到 Request Header 中，無形中增長了流量

cookie 信息越大，對服務器請求的時間也越長。所以要慎用cookie，不要在cookie中存儲重要和敏感的數據

• 客戶端生成:

在 JavaScript 中經過 document.cookie 屬性，你能夠建立、維護和刪除 cookie

設置 document.cookie 屬性的值並不會刪除存儲在頁面中的全部 cookie____它只簡單的建立或修改字符串中指定的 cookie

要使用 JavaScript 提取 cookie 的值，只須要從 document.cookie 中讀取便可

• 服務端生成:

Web 服務器經過發送一個稱爲 Set-Cookie 的 HTTP 消息頭來建立一個 cookie

HttpOnly

爲避免跨域腳本 (XSS) 攻擊，經過 JavaScript的 Document.cookie API 沒法訪問有 HttpOnly 標記的Cookie

WebStorage ----> 瀏覽器本地存儲，且存儲的必須是 字符串（通常是 JSON.stringify(xxx)）____通常容許 5M 甚至更大

瀏覽器端經過 window.sessionStorage 和 window.localStorage 屬性來實現本地存儲機制

例如：KEY='person'; person={"name":"WuKong"};

• sessionStorage 會話存儲(瀏覽器打開 到 關閉)

當瀏覽器退出時，會自動刪除 sessionStorage 中的數據

保存數據 sessionStorage.setItem(KEY, JSON.stringify(person));

讀取數據 sessionStorage.getItem(KEY);

刪除數據 sessionStorage.removeItem(KEY);

 

• localStorage 永久存儲(永久，除非人爲刪除) 

----> 對應 'storage' 事件 e.newValue 進行頁籤間的數據通訊/同步 e.oldValue____HTML5 提供的新功能

e.key        修改或刪除的 key 值，若是調用 clear(),爲 null

e.newValue        新設置的值，若是調用 clear(),爲 null

e.oldValue        調用改變前的 value 值,若是調用 clear(),爲 null

e.url        觸發該腳本變化的文檔的 url

e.storageArea        當前的 storage 對象

保存數據 localStorage.setItem(KEY, JSON.stringify(person));

讀取數據 localStorage.getItem(KEY);

刪除數據 localStorage.removeItem(KEY);

清空數據 localStorage.clear();