Web前端開發(fā)技術(shù)及優(yōu)化策略研究

邢翀

（長春金融高等專科學校信息技術(shù)學院 吉林省長春市 130000）

信息化時代，人類社會出現(xiàn)數(shù)字化特征，人們對于網(wǎng)絡信息技術(shù)也更為依賴，多元化的媒體結(jié)構(gòu)使得網(wǎng)頁也更為生動豐富，網(wǎng)頁的作用也更為繁瑣。Web 前端開發(fā)技術(shù)是科技信息的產(chǎn)物，在很早之前是靜態(tài)的網(wǎng)頁，主要是承載單一的文字和圖片，然而在當前這個信息化的時代，網(wǎng)絡用戶對于網(wǎng)頁數(shù)據(jù)交互的使用頻率在不斷增加，社會各界對于Web 前端技術(shù)也有了新的要求，早期的Web 前端開發(fā)方式已經(jīng)不在適應當前社會的發(fā)展，這就必須要對Web 前端技術(shù)進行優(yōu)化，提高頁面運行效率，提升用戶體驗。

1 Web前端技術(shù)概述

Web 前端涉及到HTML、CSS、URL、HTTP 等，這些元素組成了Web 前端系統(tǒng)，并且這些元素按照相應的技術(shù)標準，各司其職，共同協(xié)作，維護網(wǎng)頁的正常運轉(zhuǎn)。比如用戶在地址欄輸入相關(guān)的網(wǎng)址，經(jīng)過DNS 進行域名解析，獲取相應的IP 地址，再來調(diào)用文件目標，形成html 頁面，執(zhí)行http 請求，并將信息進行整理排版發(fā)送到終端設備。

Web 前端開發(fā)的過程中會應用到一些工具，主要是HTML（Hyper Text Markup Language）超文本標記語言，這是一種標示性的語言，其中含有多個標簽，主要是統(tǒng)一網(wǎng)絡文檔格式，此命令可以說明文字、圖形、動畫、聲音、表格、鏈接等，與傳統(tǒng)的flash 語言有相似之處，但是卻比flash 更為便捷，目前在一定程度上可以取代flash。CSS 是層疊樣式表，主要目的是用來控制網(wǎng)頁樣式，展示html 應用集的文件樣式，是Web 前端開發(fā)中必不可少的一部分。CSS 可以更好的修飾網(wǎng)站外觀，比如頁面的透明度與網(wǎng)頁陰影效果等，用以切割網(wǎng)頁內(nèi)容與對應樣式，簡化了網(wǎng)頁代碼，使得CSS 被重復利用，在一定程度上提高了瀏覽器的運行速度，而且CSS 易于使用和修改，方便后期維護優(yōu)化。JavaScript 是腳本語言，具備多種形態(tài)，是基于瀏覽器引擎的一種語言，在html 間嵌入Web 頁面內(nèi)基于對象、事件驅(qū)動的解釋性編程語言。JavaScript是一種開發(fā)語言，自開發(fā)初期就應用在Web 前端開發(fā)中，其主要目的是為靜態(tài)的頁面添加動態(tài)功能，可以有效避免兼容問題，另外JavaScript 具備實時、交互、動態(tài)的語言表達，可以不依賴Web 服務器，與用戶進行良好的信息交互。除此之外，Web 前端開發(fā)技術(shù)還包括Ajax、DOM 等技術(shù)，Ajax 可以向服務器傳輸、讀寫數(shù)據(jù)，DOM（文檔對象模型）將XML 文檔進行節(jié)點抽象繼承樹形數(shù)據(jù)結(jié)構(gòu)。

2 Web前端技術(shù)應用現(xiàn)狀

Web 前端開發(fā)技術(shù)起步較晚，比如百度在2011 年推出百度新頁面，運行時長依舊很長，是后端運行時長的數(shù)倍，因此在Web技術(shù)發(fā)展之初，弊端非常明顯，后期Google，Yahoo 等公司推出多種前端優(yōu)化方案，比如Speed tracer、High Performance Web Sites、優(yōu)化http 請求等，這些優(yōu)化手段在一定程度上提高了瀏覽器的運行速度，但是沒有針對瀏覽器進行限制優(yōu)化，優(yōu)化效果不佳，制約了Web 前端開發(fā)技術(shù)的發(fā)展。

Web 前端開發(fā)技術(shù)優(yōu)化的主要難點在兩處，瀏覽器的二連接限制與B/S 結(jié)構(gòu)限制。通常來說Http 協(xié)議明確規(guī)定客戶端與服務器的并發(fā)數(shù)，約束并發(fā)連接數(shù)，即在同一時刻，單一的客戶端、服務器的持久連接數(shù)是一定的，主要目的是為了避免服務器擁塞，這就導致用戶在瀏覽中會觸發(fā)多個異步JavaScript 請求，阻止服務器響應請求，從而使得后續(xù)的Http 請求被堵塞，影響網(wǎng)頁響應速度。B/S 結(jié)構(gòu)限制，主要是用戶在瀏覽器中輸入相應的URL，進行IP地址解析，再由Http 請求發(fā)送命令到服務器，服務器接收到瀏覽器所發(fā)送的請求，開始解析Html 文檔，并對終端進行響應的過程，其中瀏覽器與服務器的通信過程就是B/S 結(jié)構(gòu)優(yōu)化的難點。

3 Web前端優(yōu)化策略

Web 網(wǎng)頁的主要價值在于傳遞信息，并滿足用戶的相應需求，對于網(wǎng)絡用戶來說，網(wǎng)頁的加載速度是訪問網(wǎng)頁的關(guān)鍵。如果網(wǎng)頁加載速度慢，就會直接影響用戶體驗，用戶等待時間過長，就會直接關(guān)閉網(wǎng)站，用戶無法高效利用網(wǎng)絡信息，網(wǎng)站也會損失大量的訪問量。因此在開發(fā)工作中，要優(yōu)化改善網(wǎng)絡性能，提高工作效率。對于Web 前端開發(fā)優(yōu)化的方向有很多，本文就著重介紹幾個主要的方向，下面就對其進行一一分析。

3.1 優(yōu)化HTML、CSS、JavaScript開發(fā)語言

HTML、CSS、JavaScript 是Web 開發(fā)的主要開發(fā)語言，在對Web 進行優(yōu)化的時候，自然要先優(yōu)化這幾種技術(shù)語言。對于HTML語言的優(yōu)化，就要清楚了解HTML 的原理。HTML 作為主要的組織語言，來保證HTML 代碼清晰、簡化，保證HTML 的語義化特性，盡可能的減少空屬性問題，減少文檔對象模型節(jié)點，從而來提高頁面的渲染速度與運行速度。優(yōu)化CSS 的角度比較多，主要是避免代碼重復，從而來減少總體代碼量，盡量避免使用CSS 符層級，從而來簡化開發(fā)流程，在開發(fā)的時候，要把CSS 放在頂部，這是由于CSS 特性決定的，眾所周知，CSS 具有層疊特性，后面的CSS 可以完全覆蓋前面的CSS，在加上瀏覽器的工作原理是先完全加載信息，然后在進行內(nèi)容渲染，因此把CSS 放在頂部，可以更好的實現(xiàn)Web 優(yōu)化。優(yōu)化JavaScript 是前端開發(fā)的重點，JavaScript在前端開發(fā)具有多元化的動態(tài)特性，使用可優(yōu)化面也較大，在優(yōu)化的過程中，要減少全局變量的使用次數(shù)，避免重繪與回流，盡量不使用function、with、eval；的使用，刪除重復的JS，在開發(fā)的過程中，要將JavaScript 放在底部，可以防止因腳本阻塞而導致的頁面加載時間過長的問題。這里需要注意的是，網(wǎng)頁設計也會影響網(wǎng)站運行效率，因此在進行設計的時候除了要符合人類審美習慣外，還要考慮頁面運轉(zhuǎn)的流暢性，必要時對頁面進行分流，降低加載總量。

3.2 減少HTTP請求

HTTP 請求的表現(xiàn)形式多樣，請求方式也比較多元化，而且這些請求會同時產(chǎn)生，消耗過多的運行時間，導致網(wǎng)頁運行時長延緩，降低網(wǎng)頁數(shù)據(jù)傳輸速度，想要優(yōu)化Web 前端開發(fā)技術(shù)，自然要減少不必要的HTTP 請求。每一個HTTP 請求產(chǎn)生的時候，內(nèi)部數(shù)據(jù)都會占用大量的網(wǎng)絡資源，這是由于HTTP 請求的特性決定的，完整的HTTP 請求包含DNS 尋址、發(fā)送雙方的數(shù)據(jù)、建立瀏覽器和服務器間的連接并傳輸數(shù)據(jù)、等待服務器響應等環(huán)節(jié)，這就意味著HTTP 攜帶的大量數(shù)據(jù)會出現(xiàn)在每個過程中，這些數(shù)據(jù)會占用大量的網(wǎng)絡資源，然而網(wǎng)絡資源是有限的，這就使得網(wǎng)絡出現(xiàn)卡頓、崩潰的現(xiàn)象，從而增加了用戶等待時長。因此適當?shù)臏p少HTTP 請求，可以在一定程度上提高網(wǎng)頁運行速度，主要方法是將多個CSS或者JavaScript 合并為一個，壓縮打包HTTP 請求，從表層上減少HTTP 請求；利用內(nèi)聯(lián)圖像的方法來優(yōu)化圖片地圖，采用絕對定位背景圖的方式來提高網(wǎng)頁的載入速度。

3.3 優(yōu)化文件規(guī)模，控制文件夾大小

網(wǎng)頁加載速度與文件規(guī)模息息相關(guān)，文件越大，加載速度越慢，直接影響網(wǎng)頁的響應速度，嚴重會導致頁面卡頓、崩潰等情況的產(chǎn)生。因此文件越大，寬帶資源占用越多，這就需要加強網(wǎng)頁文件的規(guī)?？刂?，壓縮JavaScript 和CSS 文件，刪除多余的HTML 標簽，有效避免內(nèi)聯(lián)樣式的出現(xiàn)，從本質(zhì)上降低文件大小。文件夾是Web數(shù)據(jù)傳輸打包形式，內(nèi)部文件數(shù)據(jù)越多，文件夾就越大，在使用文件夾進行數(shù)據(jù)傳輸?shù)臅r候，會直接影響傳輸速度與加載速度，從而延遲了網(wǎng)頁響應速度，降低網(wǎng)頁的及時交互特性。這就需要在進行Web 前端開發(fā)過程中，合理控制文件夾大小，現(xiàn)代文件夾壓縮技術(shù)也很成熟，在進行傳輸?shù)臅r候，可以采用文件夾壓縮技術(shù)來封裝文件夾，減小文件夾的體制，另外要刪除文件夾多余的數(shù)據(jù)信息，保證用戶的流暢體驗，避免頁面長時間留白。

3.4 優(yōu)化DNS查詢

DNS 查詢是用戶瀏覽網(wǎng)絡信息最常見的功能之一，DNS 的每次解析至少需要20ms，過多的DNS 查詢會加大時間開銷，直接影響到網(wǎng)頁的響應時長。一般來說，單純的DNS 查詢出現(xiàn)的延時是看不出來的，但是隨著用戶使用時間增加，瀏覽器緩存過多，DNS查詢時間會延遲，或者DNS 解析過于頻繁，都會降低信息傳輸質(zhì)量，導致網(wǎng)頁內(nèi)容無法全部顯示，而且在DNS 查詢結(jié)束前，頁面中的任何內(nèi)容都不能加載，這就需要對DNS 查詢進行優(yōu)化。主要是避免加載重復的頁面，增加自動清理緩存的功能，提高網(wǎng)頁加載速度，從而來優(yōu)化DNS 查找。

3.5 優(yōu)化Web前端瀏覽器二連接

Web 前端瀏覽器二連接優(yōu)化主要包含兩個模塊，其中在請求調(diào)度解決方案模塊中，將文檔下載完成時間與文檔渲染運行時長作為衡量網(wǎng)頁性能指標，瀏覽器可以根據(jù)HTTP 請求數(shù)量，自主合理的調(diào)整HTTP 請求順序，從而來降低總體HTTP 請求響應等待時間。在SACC 算法設計模塊中，結(jié)合用戶的實際需求，遵循最小優(yōu)化策略原則，精確計算視頻、文本、圖片消耗時間與網(wǎng)頁渲染速度，進行綜合調(diào)度優(yōu)化。在綜合調(diào)度解讀，工作人員可以根據(jù)調(diào)度模型，設置度量順序，設置總等待時間比重，從而來優(yōu)化HTTP 請求發(fā)送順序。

3.6 優(yōu)化Web前端B/S結(jié)構(gòu)

Web 前端B/S 結(jié)構(gòu)直接影響著Web 前端性能，這就需要優(yōu)化Web 前端結(jié)構(gòu)，從而來提高網(wǎng)站響應速度。優(yōu)化B/S 結(jié)構(gòu)，主要是優(yōu)化延遲加載，比如在頁面剛開始加載的時候，減少HTTP 請求，根據(jù)實際情況，延遲加載圖片、組件等非關(guān)鍵信息。比如WEB 頁面在加載圖片的時候只加載首屏，后面的圖片可以根據(jù)用戶實際情況來進行加載，降低非必需HTTP 請求數(shù)量，在對非必要組件進行加載的時候，只需要更改組件預加載機制，利用瀏覽器空閑時間來進行加載，從而來提高頁面加載效率。另外還可以優(yōu)化服務端，主要是優(yōu)化HTTP 請求資源傳輸路徑，采用多域名策略，優(yōu)化域名，合理劃分Web 前端頁面內(nèi)容，促進頁面下載平衡。還可以在服務器中設置頭部信息緩存模式，最大程度的避免資源重復加載，盡可能減少網(wǎng)絡資源的占用，降低網(wǎng)頁加載時間。最后還可以利用Ajax特殊的服務器傳輸異步性，提高Web 前端網(wǎng)頁性能，保證網(wǎng)頁響應的及時性。

3.7 杜絕無用響應，避免重定向

無用響應是用戶訪問網(wǎng)站的常見問題之一，比如403，404 錯誤等，HTTP 請求又非常消耗時間與帶寬，而這些消耗會換回一個無響應頁面，這對于用戶體驗來說是非常不利的。因此在進行Web前端開發(fā)過程中加上Error 日志追蹤，從而減少錯誤的產(chǎn)生。除此之外，網(wǎng)頁重定向也是影響網(wǎng)頁等待時間的主要因素之一，網(wǎng)頁的重定向會耗費網(wǎng)頁運行時間，其中重定向發(fā)生一次，Web 請求就會增加一次，因此在進行Web 前端開發(fā)過程匯總，需要在子目錄后加“/”，有效減少重定向的次數(shù)。

4 總結(jié)

Web 前端開發(fā)技術(shù)在不斷的優(yōu)化，提升了用戶上網(wǎng)體驗，降低用戶上網(wǎng)成本，在對其進行優(yōu)化前，從業(yè)人員要充分了解HTML、CSS、JavaScript 語言特征，了解瀏覽器運行特性，采用多種手段來優(yōu)化Web 前端開發(fā)技術(shù)，提高網(wǎng)頁的加載效率。