網站靜態化處理的方法

有家大型的企業順應時代發展的潮流開始投身於互聯網行業了，它們為此專門設立了一個事業部，不過該企業把這個事業部裡的人事成本，系統運維成本特別是硬件采購的成本都由總公司來承擔，當然互聯網業務上的市場營銷成本這塊還是由該事業部自己承擔，可是網站一年運維下來，該公司發現該事業部裡最大的成本居然不是市場營銷的開銷，而是短信業務和寬帶使用上的開銷，是不是有點讓人感到意外呢?下面我們給大家介紹一下網站靜態化處理吧!

短信這塊是和通訊運營商有關，很難從根本上解決，當然該企業可以考慮使用像微信這樣的工具來分攤下短信的成本，但是寬帶流量消耗這個問題卻很難有第二選擇了，可能有人會感到詫異，一家做互聯網的企業，用戶都是使用自己掏錢的寬帶來上網的，為啥企業會有寬帶流量的成本呢?其實互聯網公司的後台服務都是會放置在IDC即數據中心裡的，除非你的企業是真正的高富帥，或者你本身的核心業務就是互聯網業務，這樣的企業才有可能會自建數據中心，絕大部分企業都會租用第三方的數據中心，而且有些企業為了容災還會在不同地域建立不同的數據中心，不同數據中心之間是通過專線來通訊的，而專線的成本是很高的，我們想讓自己開發的網站讓更多人用，可以通過改造服務端並發處理能力來達到這個目的，但是這裡還有一個制約因素，那就是服務端使用的帶寬，一般而言，企業選擇多大帶寬是可以估算出來，最終采用一個合理的帶寬，但是，如果這家公司是電商類型網站，就很有可能碰到像雙十一啊，或者自身做大促銷的情況，這個時候服務端的負載壓力就會成倍增加，遠遠超出平時的網絡流量，如是企業會提前擴充帶寬，而擴充的帶寬流量是昂貴的，這樣就會無形增加網站運營成本。如果我們不去思考成本問題，當今社會講求環保，例如淘寶就說它們網站沒完成一次交易使用的電量可以煮熟兩個雞蛋，它們網站一天下來消耗的電量相當於中國一個三線城市一天消耗的電量，那麼如果我們能節約每次請求消耗的寬帶流量其實也就是在節約能源，所以不管是從成本角度還是從環保角度提高寬帶的利用率都是有很大的現實意義的。

Web前端優化裡有一個技巧就是壓縮http請求的數據量，這個技巧很多人都是簡單認為http請求的數據越小，那麼http處理速度就更快些，不過我認為這結論其實是一個相對的結論，現在的網速是越來越快，很多人家裡接入的寬帶已經使用上了光纖，50兆，百兆的寬帶已經飛進了尋常百姓家了，那麼這時候其實網絡傳輸100kb數據和傳輸300kb數據的效率差異基本可以忽略不計了，當然並非每個人網絡訪問速度都這麼快，例如我們使用手機的2G網絡上網，那麼100kb和300kb的傳輸效率還是會有很大差異的，所以壓縮http請求大小這個手段在客戶端這塊是一種解決短板的技巧，這個短板就是照顧那些上網速度太慢的人了，而非對人人平等的技術手段，但是這個問題換到服務端就不同了，減少http報文的數據大小可以提升企業對寬帶的利用率，是一種節約網站運營成本的一個重要手段，因此壓縮http傳輸數據的大小是一個很有價值的技術手段。

用來壓縮http請求數據大小的手段很多，例如使用Gzip壓縮http請求，壓縮圖片等等，不過我這裡要特別說明一個手段那就是減少cookie存儲數據的大小，這是一個常常被忽視的壓縮http請求大小的技術手段。不過cookie技術對很多初學者常常會感到差異，cookie是客戶端的數據，為什麼服務端和客戶端都能操作它，難道服務端也會存儲一份cookie的備份嗎?之所以初學者會對cookie使用有疑問，這主要是初學者不太清楚cookie信息除了保存在浏覽器端，它還會包含在http報文頭裡的，每個http請求響應都會帶著cookie信息進行傳遞，所以cookie既可以被客戶端操作也能被服務端操作，如果我們忽視cookie這個特點，再加上我們濫用cookie，最後cookie被撐滿了，這也就意味每次請求響應的數據量會增加，而這些信息可能大部分都不會被使用，純粹多余。而網站在開發和維護時候很容易不自覺的讓cookie變得越來越多，越來越大，如果我們一開始就明確cookie這個特點，提前設計cookie使用規范，那麼就可以一定程度上規避cookie不合理使用導致的http數據量變大的問題。如果網站使用了單獨的靜態資源服務器，並且把靜態資源放置在單獨的域名下面，這個時候我們還要避免給靜態資源域名下使用cookie技術，因為靜態資源基本都不會有狀態信息，使用cookie只會無謂的增加請求的數據大小。

網絡是存儲設備裡效率最差的，如果頁面加載時候還有些請求是一個壞請求，例如頁面訪問的某些靜態資源突然丟了，浏覽器這個時候會有一個容錯的做法，這個做法具體是：浏覽器不能確定有問題的請求到底是因為網速慢了還是找不到，所以浏覽器會多次請求這個url，直到浏覽器認為這個url的確是有問題無法訪問了，浏覽器才不去繼續請求了，如果碰到的資源正好是外部javascript文件，那就很有可能阻塞整個頁面的加載，所以剔除頁面裡的壞請求也是要經常留心的事情。

我們如果再進一步分析下web前端優化的一些手段，就會發現很多優化手段其實都是基於靜態資源來處理的，靜態資源的特點就是在一定時間范圍內不會發生變化的，而且當用戶請求靜態資源時候，服務端不需要任何計算操作即消耗CPU資源就能把結果返回給客戶端，靜態資源這種不參與計算的特點就可以讓靜態資源和業務應用服務器解耦，因此我們可以把靜態資源單獨抽取出來放置在CDN或者是請求效率處理更佳的靜態資源服務器上。和靜態資源相對的動態資源就很難做到這點，我們仔細回味下網站後台整個應用架構，就會發現所有網站都會使用存儲系統即基本都會用數據庫，而且應用服務器和數據庫又是一種緊耦合的關系，因為我們想消除存儲系統的狀態問題基本是不可能完成的任務，這就讓應用服務器沒法做成CDN的形式，因此動態資源處理想使用CDN這種減少距離對網絡通訊影響的手段基本是很麻煩的。我覺得網站靜態化處理其實是根據web前端優化技術產生的技術，它讓網站靜態化資源和動態資源分離做的更好，所以我說網站靜態化技術是充分發揮web前端優化手段的重要保證，這也就是我為什麼會把web前端優化的內容也要放在網站靜態化處理系列裡的原因了。

靜態資源因為在一定時間裡不會發生變化，容易被緩存，而且浏覽器本身也有緩存機制，那麼如果我們把靜態資源緩存在浏覽器端，用戶請求網站就不需要再去請求網絡資源，這個效率不就更高了嗎?現實情況的確是如此，但是我們想讓浏覽器端充分發揮這個緩存作用其實並非那麼簡單，因為我們會碰到如下的問題,具體如下：

問題一：網站對浏覽器的控制是一種被動控制，用戶才是控制浏覽器的主動方，用戶的很多行為都會導致網站對浏覽器的緩存設計策略失效，如果緩存失效，那麼用戶再去訪問網站時候就得重新請求資源，所以為了彌補浏覽器緩存的不可靠性，CDN技術以及靜態資源服務器的使用就派上用場了。

問題二：浏覽器緩存網頁部分資源可以讓網頁加載的更快，但是要做到這一點之前，我們首先要明確何時采用，同時采用何種方式讓客戶端緩存這些可以被緩存的資源?那麼我們在知道某個用戶要訪問網站了，我們提前把需要緩存的資源發送個用戶，讓用戶先緩存下這些資源，這個做法肯定是開國際玩笑了，一般我們都是在用戶第一次訪問網站時候將可以緩存的資源緩存起來，這個時候問題又來了，那就是用戶第一次訪問網站時候因為需要緩存的資源都沒有被緩存，所以全部的資源都要通過網絡請求下載，這個時候就會導致用戶第一次訪問網站頁面的效率很差，有人可能認為網站又不是設計為訪問一次的產品，只要資源被緩存了網頁就會更快的，要是用戶覺得第一次訪問慢了，就先忍忍吧，以後會快的，這個想法又是再開國際玩笑了。就算用戶忍受了第一次訪問慢的情形，但是如果用戶使用這個網站的時間間隔是很長的，例如某些專業性的網站，它的用戶可能會很長一段時間後再訪問該網站，而過了這段時間後，浏覽器緩存的資源很有可能失效了，這個時候用戶再去訪問又等於是第一次訪問了，那麼我們這個緩存設計方案基本就是無效了。

問題二所反映的問題也就表明我們在如何合理使用浏覽器緩存這塊上是需要考慮用戶的使用場景的，需要加入一些業務性的策略了，只有這樣浏覽器緩存方案才能充分發揮其優勢。下面我就來談論下浏覽器端緩存策略設計的問題了。

首先我們來看一個場景，用戶第一次訪問網站，訪問的是網站的首頁，我們按照web前端優化原則設計了網站首頁，特別是使用了一個優化原則就是把css合並成一個外部css文件，把javascript代碼也合並成一個外部文件，首頁都引入了這兩個外部文件，這種情況首頁訪問至少會產生三個http請求，可是網站首頁其實沒有那麼復雜，也就是說首頁使用的css代碼和javascript代碼其實並不太多，如果我們把這些代碼就放置到頁面內部，那麼首頁加載就只有一個請求，雖然這會導致這個請求的數據量變大，不過按照我前面說到壓縮http請求數據大小，其實在提升網絡傳輸速度上這個角度是值得商榷的，但是多個http請求就會導致浏覽器打開更多連接，而每個連接的建立和銷毀卻是十分消耗計算資源的，那麼如果我們能把三個請求合並成一個請求完成就一定會讓請求處理的更快，可是這個做法就會導致css和javascript文件沒法被緩存，那麼以後想復用它們就麻煩了。碰到這樣的問題我們又該如何來抉擇了?最理想的結果就是二者兼顧，但是要兼顧二者，那麼頁面就一定要處理這三個http請求了，我們到底能不能做到二者兼顧了?答案是肯定的，我們可以做到的。我們仔細的分析下這個場景，就會發現，快速加載頁面和緩存靜態資源在頁面首次訪問這個背景下其實是兩個不同的業務操作，用戶第一次訪問首頁用戶只會關心頁面是否快速被加載，至於加載靜態資源的行為以及緩存靜態資源的行為，用戶是不用關心，因此我們就可以拆分這兩個操作，首先是讓頁面快速被加載，等頁面加載完畢後，我們在通過異步手段來加載外部的靜態資源，這樣就可以做到二