如何對WEB前後端進行效能優化?

阿新 • • 發佈：2019-01-20

網站效能優化是一個很綜合的話題，涉及到伺服器的配置和網站前後端程式等各個方面，我只是從實際經歷出發，分享一下自己所嘗試過的網站效能優化方法。之所以在標題上掛一個web2.0，是因為本文更偏重於中小網站的效能優化，我所使用的系統也是典型web2.0的LAMP架構。

首先講講前端的優化，使用者訪問網頁的等待時間，有80%是發生在瀏覽器前端，特別是頁面和頁面中各種元素（圖片、CSS、Javascript、 flash…）的下載之上。因此在很多情況下，相對於把大量的時間花在艱苦而繁雜的程式改進上，前端的優化往往能起到事半功倍的作用。雅虎最近將內部使用的效能測試工具yslow向第三方公開，併發布了著名的網站效能優化的十三條規則，建議你下載並安裝yslow，並作為測評網站優化效果的工具。下面我挑其中特別有價值的具體說明一下優化的方法：

對於第一次訪問您網站，尚未在瀏覽器cache中快取您網站內容的使用者，我們可以做的事情包括：

1）減少一個頁面訪問所產生的http連線次數
對於第一次訪問你網站的使用者，頁面所產生的http連線次數是影響效能的一個關鍵瓶頸。

對策：
- 儘量簡潔的頁面設計，最大程度減少圖片的使用，通過放棄一些不必要的頁面特效來減少javascript的使用。
- 使用一些優化技巧，比如利用圖片的背景位移減少圖片的個數；image map技術；使用Inline images將css圖片捆綁到網頁中。
- 儘量合併js和css檔案，減少獨立檔案個數。

2) 使用gzip壓縮網頁內容
使用gzip來壓縮網頁中的靜態內容，能夠顯著減少使用者訪問網頁時的等待時間（據說可達到60%）。主流的web伺服器都支援或提供gzip壓縮，如果使用apache伺服器，只需要在配置檔案中開啟 mod_gzip（apache1.x）或mod_deflate(apache2.x)即可。凡是靜態的頁面，使用gzip壓縮都能夠顯著提高伺服器效率並減少頻寬支出，注意圖片內容本身已經是壓縮格式了，務必不要再進行壓縮。

3）將CSS放在頁面頂端，JS檔案放在頁面底端
CSS的引用要放在html的頭部header中，JS檔案引用盡量放在頁面底端標籤的後面，主要的思路是讓核心的頁面內容儘早顯示出來。不過要注意，一些大量使用js的頁面，可能有一些js檔案放在底端會引起一些難以預料的問題，根據實際情況適當運用即可。

4）使JS檔案內容最小化
具體來說就是使用一些javascript壓縮工具對js指令碼進行壓縮，去除其中的空白字元、註釋，最小化變數名等。在使用gzip壓縮的基礎上，對js內容的壓縮能夠將效能再提高5%。

5）儘量減少外部指令碼的使用，減少DNS查詢時間
不要在網頁中引用太多的外部指令碼，首先，一次dns的解析過程會消耗20-120毫秒的時間；其次，如果在頁面中引用太多的外部檔案（如各種廣告、聯盟等程式碼），可能會因為外部檔案的響應速度而將你的網站拖得很慢。如果不得不用，那麼就儘量將這些指令碼放在頁尾吧。不過有一點需要提及，就是

瀏覽器一般只能並行處理同一域名下的兩個請求，而對於不同子的域名則不受此限制，因此適當將本站靜態內容（css,js）放在其他的子域名下（如 static.xxx.com）會有利於提高瀏覽器並行下載網頁內容的能力。

對於您網站的經常性訪問使用者，主要的優化思路就是最大限度利用使用者瀏覽器的cache來減少伺服器的開銷。
1）在header中新增過期時間(Expires Header)
在header中給靜態內容新增一個較長的過期時間，這樣可以使使用者今後訪問只讀取快取中的檔案，而不會與伺服器產生任何的互動。不過這樣做也存在一些問題，當圖片、CSS和js檔案更新時，使用者如果不重新整理瀏覽器，就無法獲得此更新。這樣，我們在對圖片、css和js檔案修改時，必須要進行重新命名，才能保證使用者訪問到最新的內容。這可能會給開發造成不小的麻煩，因為這些檔案可能被站點中的許多檔案所引用。flickr提出的解決辦法是通過url rewrite使不同版本號的URL事實上指向同一個檔案，這是一個聰明的辦法，因為url級別的操作效率是很高的，可以給開發過程提供不少便利。

要理解為什麼這樣做，必須要了解瀏覽器訪問url時的工作機制：
a. 第一次訪問url時，使用者從伺服器段獲取頁面內容，並把相關的檔案（images,css,js…）放在快取記憶體中，也會把檔案頭中的expired time,last modified, ETags等相關資訊也一同保留下來。
b. 使用者重複訪問url時，瀏覽器首先看快取記憶體中是否有本站同名的檔案，如果有，則檢查檔案的過期時間；如果尚未過期，則直接從快取中讀取檔案，不再訪問伺服器。
c. 如果快取中檔案的過期時間不存在或已超出，則瀏覽器會訪問伺服器獲取檔案的頭資訊，檢查last modifed和ETags等資訊，如果發現本地快取中的檔案在上次訪問後沒被修改，則使用本地快取中的檔案；如果修改過，則從伺服器上獲取最新版本。

我的經驗，如果可能，儘量遵循此原則給靜態檔案新增過期時間，這樣可以大幅度減少使用者對伺服器資源的重複訪問。
2）將css和js檔案放在獨立外部檔案中引用
將css和js檔案放在獨立檔案中，這樣它們會被單獨快取起來，在訪問其他頁面時可以從瀏覽器的快取記憶體中直接讀取。一些網站的首頁可能是例外的，這些首頁的自身瀏覽可能並不大，但卻是使用者訪問網站的第一印象以及導向到其他頁面的起點，也可能這些頁面本身使用了大量的ajax區域性重新整理及技術，這時可以將 css和js檔案直接寫在頁面中。
3）去掉重複的指令碼
在IE中，包含重複的js指令碼會導致瀏覽器的快取不被使用，仔細檢查一下你的程式，去掉重複引用的指令碼應該不是一件很難的事情。
4）避免重定向的發生
除了在header中人為的重定向之外，網頁重定向常在不經意間發生，被重定向的內容將不會使用瀏覽器的快取。比如使用者在訪問www.xxx.com，伺服器會通過301轉向到www.xxx.com/，在後面加了一個“/”。如果伺服器的配置不好，這也會給伺服器帶來額外的負擔。通過配置apache的 alias或使用mod_rewrite模組等方法，可以避免不必要的重定向。

還有一些，比如使用CDN分發機制、避免CSS表示式等、避免使用ETags等，因為不太常用，這裡就不再贅述了。

做完了上述的優化，可以試著用yslow測試一下網頁的效能評分，一般都可以達到70分以上了。

當然，除了瀏覽器前端和靜態內容的優化之外，還有針對程式指令碼、伺服器、資料庫、負載的優化，這些更深層次的優化方法對技術有更高的要求。本文的後半部分將重點探討後端的優化。

二、後端優化

上次寫完web2.0網站前端優化篇之後，一直想寫寫後端優化的方法，今天終於有時間將思路整理了出來。

前端優化可以避免我們造成無謂的伺服器和頻寬資源浪費，但隨著網站訪問量的增加，僅靠前端優化已經不能解決所有問題了，後端軟體處理並行請求的能力、程式執行的效率、硬體效能以及系統的可擴充套件性，將成為影響網站效能和穩定的關鍵瓶頸所在。優化系統和程式的效能可以從以下的方面來入手：

1）apache、mysql等軟體的配置的優化
儘管apache和mysql等軟體在安裝後使用的預設設定足以使你的網站執行起來，但是通過調整mysql和apache的一些系統引數，還是可以追求更高的效率和穩定性。這個領域中有很多專業的文章和論壇（比如： http://www.mysqlperformanceblog.com/），要想掌握也需要進行深入的研究和實踐，這裡就不重點討論了。

2）應用程式環境加速
這裡僅以我最常應用的php開發環境為例，有一些工具軟體可以通過優化PHP執行環境來達到提速的目的，其基本原理大致是將PHP程式碼預編譯並快取起來，而不需要改變任何程式碼，所以比較簡單，可以將php的執行效率提升50%以上。比較常用的免費php加速工具有：APC( http: //pecl.php.net/package-info.php?package=APC)、Turck MMCache（ http://turck-mmcache.sourceforge.net）、php accelebrator(www.php-accelerator.co.uk)，還有收費的Zend Performance Suite

3）將靜態內容和動態內容分開處理
apache是一個功能完善但比較龐大的web server，它的資源佔用基本上和同時執行的程序數呈正比，對伺服器記憶體的消耗比較大，處理並行任務的效率也一般。在一些情況下，我們可以用比較輕量級的web server來host靜態的圖片、樣式表和javascript檔案，這樣可以大大提升靜態檔案的處理速度，還可以減少對記憶體佔用。我使用的web server是來自俄羅斯的nginx，其他選擇方案還包括lighttpd和thttpd等。

4）基於反向代理的前端訪問負載均衡
當一臺前端伺服器不足以應付使用者訪問時，通過前端機實現web訪問的負載均衡是最快速可行的方案。通過apache的mod_proxy可以實現基於反向代理的負載均衡，這裡推薦使用nginx做代理伺服器，處理速度較apache更快一些。

5）應用快取技術提高資料庫效能，檔案快取和分散式快取
資料庫訪問處理併發訪問的能力是很多網站應用的關鍵瓶頸，在想到使用主從結構和多farm的方式構建伺服器叢集之前，首先應該確保充分使用了資料庫查詢的快取。一些資料庫型別（如mysql的innoDB）自身內建對快取的支援，此外，還可以利用程式方法將常用的查詢通過檔案或記憶體快取起來。比如通過 php中的ob_start和檔案讀寫函式可以很方便的實現檔案形式的快取，而如果你擁有多臺伺服器，可以通過memcache技術通過分散式共享記憶體來對資料庫查詢進行快取，不僅效率高而且擴充套件性好，memcache技術在livejournal和Craigslist.org等知名網站應用中都得到了檢驗。

6）伺服器執行狀態的檢測，找到影響效能的瓶頸所在
系統優化沒有一勞永逸的方法，需要通過檢測伺服器的執行狀態來及時發現影響效能的瓶頸，以及可能存在的潛在問題，因為網站的效能，永遠取決於木桶中的短板。可以編寫一些指令碼來檢測web服務的執行，也有一些開源的軟體也提供了很好的功能

7）良好的擴充套件架構是穩定和效能的基礎
一些技巧和竅門可以幫你度過眼前的難關，但要想使網站具備應付大規模訪問的能力，則需要從系統架構上進行徹底的規劃，好在很多前人無私的把他們架構
網站的經驗分享給我們，使我們可以少走甚多彎路。我最近讀到的兩篇有啟發的文章：
- 從LiveJournal後臺發展看大規模網站效能優化方法
- Myspace的六次重構

最後不得不提到程式編碼和資料庫結構對效能的影響，一系列糟糕的迴圈語句，一個不合理的查詢語句、一張設計不佳的資料表或索引表，都足以會使應用程式執行的速度成倍的降低。培養全域性思考的能力，養成良好的程式設計習慣，並對資料庫執行機制有所瞭解，是提高程式設計質量的基礎。

如何對WEB前後端進行效能優化?

如何對WEB前後端進行效能優化?

web移動端頁面效能優化技術學習筆記

對 Web 應用程式進行效能調優

基於live555實現的RTSPServer對底層進行效能優化的方法

細說 Django—web 前後端分離

寫在開始前---web前後端對接

對java前後端分離的理解

轉：使用Mosquitto-Auth-Plugin對mqtt客戶端進行驗證

支付寶客戶端架構解析：iOS 客戶端啟動效能優化初探

巧用css的border屬性完成對圖片編輯功能的效能優化

騰訊大牛親授 Web 前後端漏洞分析與防禦技巧

SQL Server 效能優化實戰系列(一) SQL Server擴充套件函式的基本概念使用SQL Server 擴充套件函式進行效能優化 SQL Server Url正則表示式記憶體常駐完美解決方案

linux中對samba客戶端進行安全部署

使用beego與mysql開發web前後端分離的後臺API介面

web前後端分離

Java web前後端分離

從x86流水線層面，談談如何進行效能優化

介紹一個對陌生程式快速進行效能瓶頸分析的技巧

WEB前後端分離開發中的驗證與安全問題

使用Mosquitto-Auth-Plugin對mqtt客戶端進行驗證

如何對WEB前後端進行效能優化?

相關推薦