從架構層面談web加載優化（我的整理）

最近聽了阿里一位大牛的講座，講web架構優化對網頁加載的影響，看完以後對他所講的一些優化方法進行一些總結和整理，發現收穫仍是蠻多的，下面多爲我的整理和我的看法，但願有說的不對的，能及時指出

1.DNS解析優化

1.1利用TTL：利用TTL:由於DNS解析時，都是逐層查找DNS緩存，最後去跟服務器查詢，而緩存有是有必定的生命週期，即Time To Live，而若是能快速的拿到緩存A記錄，也就避免了咱們逐層慢慢的查詢了

1.2拆分域名：瀏覽器對於同一域名下文件同步請求是有上限的，好比ie8，同一域名下文件，同一時間只能發起6個請求，這時候拆分域名的重要性不言而喻

1.3DNS prefetch：擁有DNS prefetching屬性的域名在用戶點擊前就已經在後臺解析，而域名解析和內容載入都是串行網絡的操做，故此能減小等待時間，即DNS預解析，在meta元標籤裏先告知瀏覽器要進行DNS預解析，而後經過link標籤進行強制DNS預解析

 

2.TCP建聯優化（即對rwnd，cwnd的處理）

 

2.1流量控制：即對接受窗口（rwnd）的處理，考慮丟包的狀況，對於傳輸數據有必定上限限制，並進行相互的告知，防止接收方處理能力跟不上接受能力

 

2.2慢啓動：即擁塞窗口（cwnd）的慢步啓動，表示接收方確認前的最大容許傳輸的未經確認數據，而cwnd的初始值通常都很小，每每在獲得接收方迴應後，其cwnd值會緩步增長（這和寵物餵食是同樣的道理，開始的時候，咱們會放不多的狗糧，當發現不夠時，咱們在緩步增長他的餵食量），而cwnd的值也不會無止境的增加，當出現網絡過載時，cwnd又會驟降--------------慢啓動對於視頻加載影響可能並非很明顯，可是web訪問時，每每數據量並非很大，可能咱們的cwnd還在初嘗試的增長中，web已經加載完畢了，因此說在應用於web優化時，咱們慢啓動的cwnd初始值能夠適當的高一點，Google給出cwnd的建議值是10MSS

 

3.CDN加速

 

這塊我感受不少人都用過，最多見的就是script src引用一個cdn地址的文件，其原理就是就近原則

 

4.請求合併（減小http請求）

 

這塊可行的方法太多了，舉幾個我的平時碰到的解決方案

 

4.1gulp/grunt合併文件

 

4.2雪碧圖

 

4.3圖片以base64碼形式引入，每個src都是一個http請求，而當img以base64的形式引入時，並非外部載入，解析的事就交給了瀏覽器，從而減小了http請求

 

5.重定向優化

 

這邊談到的重定向確定是臨時重定向，說明白點就是咱們一個form表單post給一個php文件，這時候瀏覽器就會被告知要跳轉到另一個url，這就是一步重定向。而重定向對於用戶體驗的影響就不要我多說了，SPA形式的應用之因此流行，很大一部分緣由就是其數據交互都是採用ajax，即無縫刷新，每個url的重刷新都是對用戶耐心的一個消磨。可是凡事無絕對，重定向對於PC端有無疑是不可或缺的，好比說網易的官網，他須要對用戶流量進行跟蹤，從而知道網站哪些是熱點區域，那些須要改良。因此咱們不能一味的說避免重定向，而是有選擇性的對其優化

固然重定向還有一個很突出的有點，對於有下載需求的客戶，咱們在收到他的下載請求後，獲取他的ip，分配給他一個離他較近的下載地址，對不一樣用戶進行不一樣的http重定向，從而加快用戶體驗

 

6.NS部署，Anycast

 

前者是在看雲棲大會時看到的一個概念，百度以後也沒有太大的效果，但願有大牛能夠告知。後者大概是指一種就近原則的通訊手段=0=只知其一;不知其二

 

7.緩存

 

7.1動態頁面靜態緩存：雖然網頁中部分數據使用動態讀取獲得的，可是直接緩存整個靜態，將動態數據靜態化，而數據庫有變更時，在下次訪問靜態頁面時，更換緩存

 

7.2緩存查詢結果：一樣的道理，這時候不對頁面進行靜態緩存，而是對查詢結果緩存，減小對數據庫的查詢操做，一樣減小了用戶的加載時間

 

8.請求異步

 

這塊就很少說了，大部分人應該在開發中經常使用這種方法了

 

9.http 2.0

 

= o=這塊自行百度，我的看完後只是只知其一;不知其二，還不敢拿上臺面評頭論足

 

10.負載均衡

 

web負載均衡，ip負載均衡，反代，dns等等，應用場景也多彩多樣，經過給服務器集羣分配任務，從而加快進程的處理，又或者根據ip分配較近，空閒服務器進行服務

 

11.除了上述架構系統層面的優化辦法，還有一些小技巧

 

11.1 lazy load針對圖片資源較多，或相似貼吧那種結構的網站

 

11.2 LAMPN系統組合，即linux+apache+mysql+php+nginx的組合，對於靜態加載和php動態請求完美分工，各取所長

 

11.3 代碼優化：css選擇器命名優化，針對瀏覽器從右向左掃描的原則，儘可能單一命名，減小父子選擇器的使用。Js代碼優化，例如針對做用域鏈的代碼優化..等等

 

11.4 代碼壓縮：這塊gulp和grunt均可以勝任