Web前端性能優(yōu)化方案與實踐

霍福華

（山西省財政稅務?？茖W校， 山西 太原 030024）

據(jù)CNNIC統(tǒng)計，截至2017年6月，中國網(wǎng)民規(guī)模達到7.51億，占全球網(wǎng)民總數(shù)的五分之一?；ヂ?lián)網(wǎng)普及率為54.3%，超過全球平均水平4.6個百分點。隨著互聯(lián)網(wǎng)規(guī)模的不斷擴大、前端的崛起以及移動化的大趨勢，WEB前端性能優(yōu)化成為了熱點，但與發(fā)達國家相比，我國依然十分落后。

在Yahoo的性能團隊開始對Web前端優(yōu)化開始實踐，并相繼提出了著名的“Yslow-23條規(guī)則”和Yslow性能優(yōu)化工具開始，web前端性能的優(yōu)化就拉開了帷幕。而在國內(nèi)，很多學者通過分析瀏覽器和服務器通訊過程，提出了一系列優(yōu)化方案，為我國互聯(lián)網(wǎng)行業(yè)發(fā)展提供堅實基礎。但前端優(yōu)化是復雜的，涉及客戶端、服務器端以及相互間的通信各個方面，包括 HTML、CSS、Javascript、Image 等各類資源 。WEB前端優(yōu)化既能給用戶提供及時、便捷和友好的使用體驗，又能為服務商減少請求、節(jié)約帶寬從而節(jié)省資源。

WEB前端優(yōu)化按構(gòu)成可分為客戶端、服務器端和通信過程三方面的優(yōu)化，按粒度大小可分為頁面級和代碼級的優(yōu)化[1]。

一、Web性能優(yōu)化理論

（一）減少HTTP請求

瀏覽器和服務器之間通過HTTP協(xié)議來實現(xiàn)通信功能，其中，HTTP中包含了大量信息，而HTTP請求的減少可以提高Web性能。另外，圖片地圖、CSS Sprites、內(nèi)聯(lián)圖片和腳本、樣式表的合并等技術(shù)的使用，不僅可以使HTTP請求有效減少，還能有效回避性能和設計之間的彼此制約問題?？蛻舳伺c服務器端之間HTTP的工作過程，如下圖1所示。

圖1 服務器端并行處理HTTP請求流程

（二）HTML的優(yōu)化

首先是HTML文檔優(yōu)化，通過HTML Tidy，可以有效降低HTML的文件大小，將文件中的空格全部除去。使用“DIV+CSS”格式，還可以有效降低文件中的代碼數(shù)量，使編碼出來的語義變得更加清晰，在此過程中很多企業(yè)運用了HTML5之中的header、nav等語義化標簽對其進行標注。其次是Cookie的設置。當對服務器做出瀏覽器請求時，在相同域名影響之下，HTTP請求指令會在用一個域名之下統(tǒng)計Cookie數(shù)據(jù)，將可能將Cookie所產(chǎn)生的數(shù)據(jù)降低，這樣可以將Cookie對頁面的影響降到最低[2]。

（三）CSS的優(yōu)化

第一，CSS的精簡。相關設計人員通過Collect以及CSS Selector等來進行代碼檢測，將CSS無效代碼去除出去。根據(jù)相關領域?qū)SS的規(guī)范，在樣式系統(tǒng)中的匹配規(guī)則可從右邊選擇符向左邊進行匹配。在CSS代碼使用過程中，應該盡量避免使用免屬性選擇器、兄弟選擇器等。當CSS窗口出現(xiàn)變化時，將會導致CSS的表達式求值出現(xiàn)一定變化，如果操作不當，將會對整個Web帶來嚴重影響。因此，在使用過程中，盡量對CSS表達式進行特殊處理。

第二，CSS的外聯(lián)。一般來說，在頁面中使用CSS或者其他相關文件類型，可以賦予頁面更加生動的形象。HTML頁面可以通過內(nèi)嵌和外聯(lián)等方式將CSS文件引入到系統(tǒng)中，而且這種方式可以有效提升文件維護效果和文件的組件化。另外，CSS文件的加載可以對頁面產(chǎn)生一定影響，尤其是在Web解析過程中，如果對CSS進行有效加載，便可以實現(xiàn)頁面效果的持續(xù)優(yōu)化。

（四）JavaScript的優(yōu)化

首先，JavaScript會被置于底部。有關于Java Script腳本的存在，將會對瀏覽器的下載造成嚴重影響，并且會影響HTML文檔和相關資源的加載速度和加載情況，如果將Java Script腳本移到HTML文檔底部，便可以將頁面阻塞情況有效避免，實現(xiàn)加載效果和加載速度的有效提升。另外，如果設計人員在設計過程中加入無阻賽的JavaScript，在資源加載指令下達之后，通過JavaScript之中建立DOM等相關元素，可實現(xiàn)src的成功設置，并將設置好的文件附加到HTML程序中。

其次，是對JavaScript進行壓縮，在壓縮過程中，可以使用JSmin對其進行處理，刪除腳本中無用文件和空格，實現(xiàn)文件大小的有效降低，還可以通過JavaScript函數(shù)轉(zhuǎn)變，將復雜的文件轉(zhuǎn)化成較短的字符串，最終實現(xiàn)代碼數(shù)量的降低[3]。

（五）圖片的優(yōu)化

根據(jù)HTTP Archieve統(tǒng)計，WEB頁面的平均大小在逐年增大，圖片內(nèi)容占已比已連續(xù)多年超過50%，也就是說我們?yōu)g覽一個普通網(wǎng)頁時，超過一半的流量和時間都用來下載圖片。從性能優(yōu)化的角度看，圖片也絕對是優(yōu)化的熱點和重點之一[1]。圖片格式的選擇是優(yōu)化的第一步，常用的圖片格式包括：矢量圖、標量圖、SVG、有損壓縮、無損壓縮等等。圖片格式選擇過程如下圖2所示。

圖2 圖片格式選擇過程

二、Web前端技術(shù)的具體實踐應用

（一）指間點餐系統(tǒng)

所謂指間點餐系統(tǒng)，主要指的是在信息化生活中，可以將一些智能技術(shù)應用到點餐系統(tǒng)中，如HTML5技術(shù)等，通過這些技術(shù)的應用，不僅節(jié)省了大量人力物力，還可以有效提升相關領域的工作效率，提供店面收益和顧客滿意程度。指間點餐系統(tǒng)的發(fā)展，有賴于Web技術(shù)發(fā)展和HTML5的技術(shù)搭建，不僅取代了傳統(tǒng)的本地應用，而且將開發(fā)時間有效縮短，降低系統(tǒng)的更新周期，使整個系統(tǒng)更加便于維護。但在Web前端性能實踐過程中，如果網(wǎng)速降低，便會使網(wǎng)頁的加載速度變慢，這樣便降低了上述系統(tǒng)的使用的有效性，這種現(xiàn)象已經(jīng)成為該應用最大的劣勢。

（二）性能檢測工具以及測試環(huán)境

在瀏覽器使用過程中，可將CSS利用率、CPU監(jiān)測等當做某種開發(fā)工具，并利用JavaScript作為一種性能監(jiān)測工具對瀏覽器在運行過程中的渲染布局以及排版等進行有效優(yōu)化。在性能測試工具選擇過程中，主要以響應時間、待測系統(tǒng)的資源利用率等為主要評測指標，對Web的軟件性能進行綜合評定，并找到Web系統(tǒng)的最終設計瓶頸。在環(huán)境測試過程中，首先需要將瀏覽器中的緩存全部清空，其次在慢網(wǎng)速狀態(tài)下對UI Thread進行測試。最后，在測試過程中，應該將不相關的網(wǎng)頁全部關閉，并將監(jiān)測工具開啟[4]。

（三）性能評測系統(tǒng)的設計和實現(xiàn)

1.Web的應用評測過程

在每個Web應用評測過程中，都要針對于特殊場景進行目標設計，還可以通過Spirent進行負載測試，并將測試后的各項指標進行合理統(tǒng)計，并生成指標統(tǒng)計報告。根據(jù)報告，可以將系統(tǒng)中的性能瓶頸顯示出來，并對其進行適當優(yōu)化。另外，相關設計人員可以根據(jù)具體需求對相關測試程序進行選擇，并確定好迭代次數(shù)，根據(jù)使用者需求選擇正確的迭代方案。

2.測試場景的選擇和設計

性能測試應該屬于一種全面測試環(huán)節(jié)，對系統(tǒng)中的各項能力指標以及系統(tǒng)問題等進行評測。在此過程中，可為設計測試提供有效依據(jù)和指導，將系統(tǒng)中的最大瓶頸突破。因此，相關設計人員在設計過程中，可以將具有代表性的業(yè)務進行單獨測試，還要對綜合性業(yè)務進行全面測定，防止各個業(yè)務之間或者相關性讀寫鎖出現(xiàn)長時間等待，降低測試中的重疊時間，同時保證各個測試無遺漏過程。在指間點餐系統(tǒng)使用過程中，點餐頁面的設計最為復雜，而且在工作過程中，該頁面的使用最為頻繁，而且頁面操作較多，UI交互性較強。因此，在對點餐系統(tǒng)頁面進行優(yōu)化時，可以根據(jù)Web前端性能優(yōu)化方案，制定出最合適的實踐計劃，將系統(tǒng)的意義有效突顯出來。最后便是負載流程測試，Spirent負載測試的核心在于參數(shù)的有效配置，通過對測試目標和日志的有效分析，將系統(tǒng)瓶頸找出[5]。

三、總結(jié)

綜上所述，由于Web用戶逐漸增加，讓Web成為人們生活和工作中的重要組成部分。在Web前端性能優(yōu)化和實踐過程中，所涉及到的知識面交廣，對邏輯思維應用也具有較高要求。因此，相關研究人員需要對Web技術(shù)進行深入體會，將Web技術(shù)開發(fā)過程中的難點問題全面解決，實現(xiàn)Web服務性能的不斷提升。

參考文獻：

[1]霍福華.Web前端開發(fā)技術(shù)以及優(yōu)化方向[J].晉城職業(yè)技術(shù)學院學,2017,10(2)：59-62.

[2]趙思焰.Java無狀態(tài)系統(tǒng)的優(yōu)化實踐[J].電腦與信息技術(shù),2017,25(1)：28-31.

[3]陳 霞,吳 東.基于就業(yè)導向的HTML5前端開發(fā)課程教學改革實踐[J].現(xiàn)代計算機(專業(yè)版),2017,(12)：29-32+41.

[4]劉夢甜.Oracle數(shù)據(jù)庫性能監(jiān)控與分析系統(tǒng)設計 [J].信息技術(shù)與信息化，2017,(4)：102-104.

[5]黃昱愷,耿金坤,等.NFV數(shù)據(jù)平面的網(wǎng)絡性能優(yōu)化技術(shù)[J].電信科學，2017,33(4)：65-70.