賈麗娜

(武漢船舶職業(yè)技術(shù)學院計算機信息技術(shù)學院，湖北武漢，430050 )

1 Web技術(shù)分析

Web頁面是由W3C標準HTML類型的文件，CSS類型的文件，Javascript方式的腳本以及多種類型的圖片、涉及不同方面的音視頻及其他多媒體文件共同構(gòu)成。以上不同組成部分具有差異性的作用，均在一定程度上支持Web前端，以HTML類型的文件來講，可以將其視為超出規(guī)范標準的文本標記語言，利用該語言描述文檔內(nèi)容，可將內(nèi)容詳細地、準確地、具體地呈現(xiàn)出來；而CSS類型的文檔，則是為了滿足不同用戶的實際應(yīng)用需求對頁面的樣式進行多元化的布局。隨著互聯(lián)網(wǎng)技術(shù)研究越來越深入，Web前端各項技術(shù)均得到互聯(lián)網(wǎng)的支持，針對不同移動平臺設(shè)備應(yīng)用情況，合理地設(shè)置與應(yīng)用，極大程度上提高Web前端的應(yīng)用價值[1]。

2 Web前端性能優(yōu)化研究

2.1 Web前端性能優(yōu)化模型及思想

總結(jié)以往Web前端設(shè)置及實際應(yīng)用，可知Web前端性能可能受到多種因素的影響。如從宏觀角度講，Web前端性能可能遭受用戶操作系統(tǒng)、網(wǎng)絡(luò)環(huán)境、客戶端軟硬件平臺等方面的影響；如從結(jié)構(gòu)構(gòu)成的角度講，Web前端性能可能遭受HTML文檔結(jié)構(gòu)、CSS樣式表、頁面javascript腳本等方面的影響?；诖?，在優(yōu)化Web前端性能時，應(yīng)制定可行性的優(yōu)化模型及思想，以便后續(xù)能夠有步驟、有計劃、有方向地展開性能優(yōu)化，真正提高Web前端的應(yīng)用效果。目前可概括表示W(wǎng)eb前端性能的模型為負載模型、性能模型及成本模型。負載模型表示為請求和用戶操作事件所誘發(fā)的OS資源需求和負載的強度；性能模型則是對影響web應(yīng)用性能的因素予以描述，比如加載耗時、響應(yīng)速度、內(nèi)存占有量等等；成本模型則是對web應(yīng)用的外部環(huán)境損耗情況進行說明，尤其是對影響性能的因素進行描述。應(yīng)用這三種模型有助于對性能實施優(yōu)化，改善負載情況，提高web應(yīng)用性能，減少成本[2]。綜合評估模型為性能優(yōu)化給出衡量標準，這些標準則是由眾多性能參數(shù)和指標組成的，比如加載時間、相應(yīng)速度、HTTP請求數(shù)目、數(shù)據(jù)流量等等。Web前端優(yōu)化網(wǎng)站的過程中會出現(xiàn)不同程度的損耗，其性能勢必會收到不同程度的影響。如通過綜合評估模型，即可獲得具有參考作用的反饋數(shù)據(jù)，根據(jù)反饋結(jié)果及Web前端的構(gòu)成情況，分析參數(shù)指標的相匹配組成模塊，定位參考指標的前端模型，并可行性應(yīng)用的角度來設(shè)計并制定優(yōu)化方案（如圖1所示）。

圖1 web前端性能優(yōu)化模型

2.2 Web前端性能優(yōu)化方法

2.2.1 相關(guān)請求優(yōu)化

完整且具有較高應(yīng)用價值的Web頁面勢必能夠滿足多樣化的文件格式的數(shù)據(jù)應(yīng)用需求。這就意味著Web頁面涵蓋的文件類型較多，比如html文件的擁有，即可對腳本及圖片、音頻、視頻等多媒體資源進行處理，呈現(xiàn)內(nèi)容豐富、色彩鮮艷的頁面，如此勢必能夠刺激用戶的感官，使之對頁面內(nèi)容產(chǎn)生瀏覽興趣。在用戶打開瀏覽器某一頁面，瀏覽器會針對每個文件發(fā)出HTTP請求，在HTTP協(xié)議規(guī)范之下不同文件內(nèi)容即可同步打開，呈現(xiàn)內(nèi)容豐富的頁面。若HTTP請求過程中受到一些因素的影響，那么部分文件內(nèi)容將無法快速傳輸，頁面顯示為部分內(nèi)容正在加載，如此勢必會降低用戶Web瀏覽器使用體驗效果。為了避免此種情況發(fā)生，就要對相關(guān)請求予以優(yōu)化。具體的做法是：合并處理同類文件，壓縮同類文件相對應(yīng)的代碼。為了能夠滿足用戶不同信息查看需求，Web前端頁面文件涵蓋的信息種類繁多，那么頁面內(nèi)容加載難度較大，而對文件予以合并、代碼壓縮，即可緩解文件加載緩慢、難以呈現(xiàn)信息的局面。需要注意的是合并處理同類文件，對于壓縮同類文件相對應(yīng)的代碼不能盲目操作，主要是對.html、.js以及.css格式的文件予以合并，也就對以上類型文件的相同代碼予以分類，之后在各個子頁面內(nèi)設(shè)置統(tǒng)一的link方式，進而顯著提高Web前端開發(fā)的效率，改善代碼冗余情況。通過將多個文件進行合并、壓縮后形成以一個文件，涵蓋多種語言內(nèi)容，能滿足合并文件的要求，但存在的一個缺點是代碼可讀性被削弱，又因為開發(fā)后的版本不需要進行代碼閱讀，所以其存在的缺點可以被忽略，不會影響Web應(yīng)用。

2.2.2 HTML結(jié)構(gòu)相關(guān)的優(yōu)化

HTML結(jié)構(gòu)是Web前端的重要組成部分，但同樣容易受到諸多因素的影響，導(dǎo)致Web前端性能不佳。為了提高Web應(yīng)用的可行性，應(yīng)當進行HTML結(jié)構(gòu)相關(guān)的優(yōu)化。具體包括：

（1）HTML標簽語義化。HTML文檔是由不同意義的標簽構(gòu)成的，而標簽又是由不同元素組成的，比如元素、元素、元素等等。對HTML標簽語義化處理，即：在文檔結(jié)構(gòu)設(shè)計之際，對標簽本身所具有的含義予以設(shè)置，如段落就用

，標題選擇等，如此Web瀏覽器使用的過程中搜索引擎可根據(jù)標簽的語義來判斷是否權(quán)重等問題，進而對頁面予以優(yōu)化。

（2）DOM操作優(yōu)化。正常情況下Web瀏覽器在接收HTML文檔之后會進行解析處理，其中涵蓋DOM文檔解析和CSS樣式解析，兩者解析過程中會形成渲染樹，瀏覽器由此對頁面進行合理地排版及繪畫，其中涉及到 Reflow 和 Repaint。又因為 Reflow 和 Repaint所占據(jù)的瀏覽器內(nèi)存較大，容易誘發(fā)用戶阻塞的現(xiàn)象。為了盡可能地避免此種情況發(fā)生，需要進行DOM操作優(yōu)化，具體的做法是：比如在瀏覽器內(nèi)存中動態(tài)新增片段對象。例如可以定義一個方法用于向頁面中動態(tài)添加鏈接，如文檔需要新增8個鏈接，那么整個操作過程可為：

如此即可在DOM外創(chuàng)建一個文檔對象，對其內(nèi)存中的某個節(jié)點實施添加操作即可。

3 Web性能優(yōu)化的應(yīng)用

3.1 瀏覽器功能介紹

某國際版瀏覽器具有的功能有：

（1）流行應(yīng)用及我的桌面應(yīng)用

瀏覽器的主界面展示瀏覽使用排名靠前的、比較流行的Web應(yīng)用，以便用戶能夠?qū)eb應(yīng)用圖標添加到桌面上。我的桌面應(yīng)用則限制了客戶端獲取的桌面新型及Web應(yīng)用的添加情況。

（2）應(yīng)用搜索功能

在搜索界面輸入關(guān)鍵詞查詢，服務(wù)器接受請求后進行邏輯處理，獲得數(shù)據(jù)結(jié)果，并將其傳送至界面上，滿足用戶的應(yīng)用需求。

3.2 Web前端性能優(yōu)化

某國際版瀏覽器為典型的Web產(chǎn)品，遠程服務(wù)器負責核心數(shù)據(jù)的處理、推送、數(shù)據(jù)展示等。為了使瀏覽器能夠有效的應(yīng)用，設(shè)置的Web前端框架涵蓋app-list、cate-detail等模塊；tab、box、dialog 等組件。Web應(yīng)用實際情況表明瀏覽器頁面內(nèi)容顯示效果不佳，在一定程度上降低了用戶使用體驗效果。對此，需要對Web前端性能予以優(yōu)化，而采用的具體優(yōu)化方法為：

3.2.1 減少請求

減少請求的做法有兩種，即文件合并與代碼壓縮。也就是對可歸為一類的文件進行合并處理，其中包括 baina.js、carousel.js、dolphin.js、list.js、listdataadapter.js、tab.js、zepto.min.js，將其均設(shè)置在Gruntfile.js文件內(nèi)，如此即可減少110KB數(shù)量傳輸，相應(yīng)的瀏覽器頁面加載速度增加。對圖片進行處理，則是將指示性icon予以合并，生成CSS Sprite圖片。

3.2.2 改進DOM操作方式

頁面結(jié)構(gòu)類似的模塊較多，如若均進行DOM操作，頁面內(nèi)容呈現(xiàn)需要較長的時間。為了避免此種情況發(fā)生，需要正確認識到舊版本DOM操作存在的效率問題，也就是在每次append操作之后都需要對復(fù)雜的模塊進行修改操作，這會造成很大的浪費。而修改DOM操作方式則可統(tǒng)一使用documentFragment這一種操作方式，只對fragment進行循環(huán)插入，然后一次性append到文檔中，如此即可提高整個瀏覽器的應(yīng)用效果。比如首頁Banner模塊應(yīng)用，以往首頁Banner模塊操作后需要進行修改操作，這造成一定資源的浪費，同時會使web前端性能降低。對此，計劃應(yīng)用渲染修改的方式來處理Banner模型，使之操作更加簡潔，避免出現(xiàn)反復(fù)修改操作的情況。這里所采用的渲染修改的方式為：

在此基礎(chǔ)上將利用style方式添加樣式的方法來處理腳本中所有選擇的DOM元素，并修改Class Name。