高并發(fā)網(wǎng)站的前端優(yōu)化技術研究*

鄭逸凡

(福州外語外貿(mào)學院,福建 福州 350202)

高并發(fā)網(wǎng)站的前端優(yōu)化技術研究*

鄭逸凡

(福州外語外貿(mào)學院,福建 福州 350202)

隨著web開發(fā)技術的提高，高并發(fā)網(wǎng)站已經(jīng)越來越多了，如何給用戶的客戶端即瀏覽器更好的訪問體驗、更快的訪問速度是一個重要的技術問題.該文從影響高并發(fā)網(wǎng)站訪問速度的因素、前端優(yōu)化的技術原理和手段等方面闡述了高并發(fā)網(wǎng)站的前端優(yōu)化技術特點，以及常用的幾種前端優(yōu)化手段.

高并發(fā)網(wǎng)站；前端優(yōu)化

1 網(wǎng)站優(yōu)化的重要性

網(wǎng)站的訪問速度對于一個高并發(fā)網(wǎng)站來說非常重要，如果網(wǎng)站的頁面加載速度非常快、對于用戶的操作可以及時響應，那么該網(wǎng)站的用戶體驗將會極大地提升.圖1顯示了頁面加載速度對于用戶體驗的影響.

圖1 頁面加載速度對于用戶體驗的影響

高并發(fā)網(wǎng)站因為同一時間內(nèi)有大量用戶進行訪問，為了給用戶更好的訪問體驗，在設計網(wǎng)站的時候不但要做到布局合理、圖片美觀、人性化設計，而且要解決的一個關鍵問題就是：如何使網(wǎng)站的加載速度變快，如果網(wǎng)站加載速度太慢，頁面設計得再漂亮，最終用戶也會流失.

2 影響網(wǎng)站訪問速度的因素

不管網(wǎng)站的大小如何，其最終的載體是計算機，而計算機的本質(zhì)是計算和存儲，計算主要由CPU負責，存儲介質(zhì)主要有內(nèi)存和硬盤.對于網(wǎng)站而言，網(wǎng)絡也是存儲介質(zhì)的一種，網(wǎng)絡傳輸速度的快慢直接影響到整個網(wǎng)站的并發(fā)速度.

網(wǎng)站的業(yè)務邏輯比較簡單，但是隨著網(wǎng)站規(guī)模的擴大，業(yè)務模式越來越豐富，此時網(wǎng)站在某些業(yè)務環(huán)節(jié)不可避免地變得復雜，假如這些復雜的業(yè)務又需要實時地反應給用戶，那么CPU不能快速完成業(yè)務計算就成為影響網(wǎng)站效率問題的根源，例如海量數(shù)據(jù)的計算操作就是這樣的場景之一.

對于海量的數(shù)據(jù)，網(wǎng)站靜態(tài)化技術中的ESI技術是解決存儲效率問題的有效方法，其基本原理是：通過CPU將結(jié)果提前計算出來，然后將結(jié)果存儲在效率更高的存儲設備，例如內(nèi)存，當用戶請求操作這個業(yè)務計算時只需要直接讀取緩存中的計算結(jié)果就行了，這樣就避免了計算，同時計算結(jié)果存儲在效率高效的緩存中，用戶獲得響應的速度也會更快.

相比計算和存儲，高并發(fā)網(wǎng)站的網(wǎng)絡傳輸效率就差多了，圖2顯示了某網(wǎng)站的網(wǎng)絡請求的方法、狀態(tài)、內(nèi)容大小和時間延遲等信息.

圖2 網(wǎng)絡請求信息

因此，前端優(yōu)化技術大部分都是圍繞如何解決網(wǎng)絡傳輸效率來進行的，因為它是高并發(fā)網(wǎng)站訪問速度最大的短板，只有解決了這個短板，再去解決其他因素的效率問題，才能發(fā)揮其作用.

3 前端優(yōu)化的技術原理

網(wǎng)站的傳輸技術是構建在HTTP協(xié)議上，HTTP協(xié)議作為一種REST架構風格的架構實例，基于REST的架構的過程視圖如圖3.

圖3 基于REST的架構的HTTP傳輸過程視圖

HTTP協(xié)議底層通訊手段使用的是TCP/IP協(xié)議，但是TCP傳輸協(xié)議在建立連接和斷開連接這兩個動作上是非常消耗傳輸性能的，這主要是因為TCP/IP協(xié)議在連接建立時的三次握手機制和斷開連接時的四次揮手機制所致.

可以通過使用多個連接進行并行加載，由于早期瀏覽器在HTTP1.0和HTTP1.1連接數(shù)的差異[1]，某些網(wǎng)站例如維基百科這樣的網(wǎng)站，它的靜態(tài)資源特別多，為了充分發(fā)揮并發(fā)的優(yōu)勢，它將存放這些靜態(tài)資源的服務器采用HTTP1.0協(xié)議，這樣就能并行加載更多的靜態(tài)資源，因為這個并行加載的總體效率提升相比TCP/IP握手和揮手的損失要高得多.對主域名下的請求資源類型加以控制，把能遷移到單獨服務器上的靜態(tài)資源進行遷移，盡量讓主域名下處理的請求都是包含業(yè)務邏輯的請求，這樣就可以有效提升系統(tǒng)資源的使用率.

4 前端優(yōu)化的主要手段

4.1 減少HTTP請求數(shù)

減少HTTP報文的數(shù)據(jù)大小可以提升網(wǎng)站對寬帶的利用率，是一種節(jié)約網(wǎng)站運營成本的重要手段.用來壓縮HTTP請求數(shù)據(jù)大小的手段很多，例如使用Gzip壓縮HTTP請求、壓縮圖片，如圖4所示.

圖4 用Gzip壓縮HTTP請求

壓縮HTTP請求的另外一種方法是減少cookie存儲數(shù)據(jù)的大小，cookie信息除了保存在瀏覽器端[2]，它還會包含在HTTP報文頭里，每個HTTP請求響應都會帶著cookie信息進行傳遞，所以cookie既可以被客戶端操作，也能被服務端操作.如果濫用cookie，當cookie信息數(shù)據(jù)增加，意味著每次請求響應的數(shù)據(jù)量會增加，而這些信息可能大部分都不會被使用.因此，在網(wǎng)站架構的初始階段，要提前設計cookie使用規(guī)范，在一定程度上規(guī)避cookie不合理使用導致的HTTP數(shù)據(jù)量變大的問題.

4.2 利用CDN技術

一般情況下，網(wǎng)站前端的數(shù)據(jù)都是從web服務器中獲取，如果用戶的客戶端與網(wǎng)站的服務器端物理距離比較遠，那么網(wǎng)站的訪問速度就會變慢，主要影響因素有：傳輸距離、運營商、帶寬等.可以通過使用CDN技術，將CDN節(jié)點分布在各地，當客戶端發(fā)送請求到服務器端時，服務器會根據(jù)用戶的地理區(qū)域信息，為用戶分配最近的CDN服務器.一個典型的CDN網(wǎng)站架構如圖5所示.

圖5 利用CDN架構網(wǎng)站

通過CDN技術，利用本地緩存加速，提高了網(wǎng)站的訪問速度和穩(wěn)定性，消除了不同運營商之間互相通信的瓶頸問題，實現(xiàn)了跨運營商的網(wǎng)絡訪問，提高用戶訪問的質(zhì)量.地理位置比較遠的用戶根據(jù)DNS負載均衡技術，智能選擇距離最近的Cache服務器，加快遠程訪問的速度.通過生成服務器的Mirror(鏡像)Cache服務器，遠程客戶端訪問網(wǎng)站時，直接從鏡像Cache服務器上讀取數(shù)據(jù)，減少遠程訪問的帶寬、減輕網(wǎng)絡流量和原站點web服務器負載等功能.另外，CDN節(jié)點分布比較廣，節(jié)點之間采取智能冗余機制，有效地降低了黑客入侵的風險和各種D.D.o.S攻擊對服務器的影響.

4.3 添加Cache control和Expire

隨著網(wǎng)站開發(fā)規(guī)模的擴大，越來越多的素材和資源被嵌入到網(wǎng)站頁面中，其中包括文字、圖片、javascript腳本、CSS樣式表、flash動畫等，所以，當客戶端發(fā)送請求到服務器端時，由于資源的增加，從而造成請求次數(shù)的增加.可以通過設置Cache control來緩存這些資源文件，還可以設置Expire來指定特定類型的文件在瀏覽器中的緩存時間[3-4].一般情況下，在用戶向服務器發(fā)送請求后的一段時間內(nèi)，網(wǎng)站中的圖片、CSS、flash等資源是不需要修改的.有了Cache以后,如果瀏覽器再次訪問同一個地址，就不需要再從服務器下載這些文件，而是直接從Cache中讀取，這樣訪問頁面的速度會大大加快.一個典型的HTTP 1.1協(xié)議返回的HTTP報頭信息如下.

HTTP/1.1 200 OK

Content-Type: image/webp

Content-Length: 3988

Date: Sun, 24 May 2015 16:01:32 GMT

Last-Modified: Thu, 21 May 2015 09:30:56 GMT

Expires: Wed, 21 May 2025 16:01:32 GMT

Cache-Control: max-age=315360000

可以在服務器端設置Cache control和Expire的值，例如，設置緩存30天過期的代碼如下：

pHeader("Cache-Control: must-revalidate"); $offset = 60 * 60 * 24 * 30; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; Header($ExpStr);

4.4 減少DNS查詢

網(wǎng)絡傳輸大部分都是基于TCP/IP，IP地址是TCP/IP協(xié)議中的基礎，但人們并不是直接通過IP地址來訪問網(wǎng)站的，而是通過特定的域名來訪問.DNS是一個域名系統(tǒng)，用戶在訪問網(wǎng)站時，在瀏覽地址欄中輸入的網(wǎng)址就是一個域名，瀏覽器把域名交給DNS服務器，DNS服務器在接到請求后會返回給客戶端一個IP地址，用戶計算機再通過這個IP地址訪問網(wǎng)站.

一次DNS查詢的過程會消耗20～120毫秒的時間,在DNS查詢的過程中，瀏覽器不會下載該域名下的任何文件，所以減少DNS查詢，可以加快頁面的加載速度.

4.5 對JS和CSS進行壓縮

對頁面的javascript和CSS代碼進行壓縮可以減少頁面的字節(jié)數(shù)，從而提高頁面的加載速度，另外，壓縮JS和CSS還可以起到一定的保護作用.常用的壓縮工具有Saltstorm出品的ESC、Rob Seiler的packer、Cruncher-Compressor等.另外還有一些網(wǎng)站提供了在線壓縮的工具，比如：http://tool.oschina.net/jscompress.

當然，JS和CSS壓縮帶來的一個問題就是代碼的可讀性變差，因此，一般情況下，高并發(fā)網(wǎng)站采取的做法是在服務器端對JS和CSS進行壓縮，這樣開發(fā)人員就可以很方便地維護自己的代碼.

5 小結(jié)

對于高并發(fā)網(wǎng)站來說，前端優(yōu)化的很多技術和原理都是從如何提高網(wǎng)絡的傳輸效率的角度提出的，但是這些技術在使用的時候還是有很多細節(jié)在里面，如果開發(fā)人員不能深入理解這些優(yōu)化技術背后所隱藏的原理，很有可能顧此失彼，沒有達到最佳的優(yōu)化效果.本文通過分析影響網(wǎng)站加載速度的因素、前端優(yōu)化的技術原理，提出了幾點前端優(yōu)化的實現(xiàn)手段，希望通過分析這些細節(jié)問題，能給其他開發(fā)人員一個啟迪，更好地理解這些優(yōu)化技術背后的原理，最終能更好地運用這些技術.

[1]阮曉龍.高校門戶建設中Web前端技術[J].中國科技信息,2015(02):80-83.

[2]萬虎,徐遠超,孫鳳蕓,閆俊峰.面向大數(shù)據(jù)應用的眾核處理器緩存結(jié)構設計[J].計算機工程與科學,2015(01):28-35.

[3]羅貴章.一種面向高負載Sakai系統(tǒng)的性能優(yōu)化方案[J].計算機與現(xiàn)代化,2015(02):101-105.

[4]謝健.基于PHP的負載均衡技術的研究與改進[D].上海:華東理工大學,2015.

10.13877/j.cnki.cn22-1284.2015.08.002

2015-05-15

2014年福建省大學生創(chuàng)新訓練項目“基于PC和移動終端的校園生活服務網(wǎng)站和APP設計”(201413762044)

鄭逸凡，福建仙游人，講師.

TP393

A

1008-7974(2015)04-0004-03