Web前端開發技術以及優化方向探究

摘? ?要：網絡制作涵蓋內容較多，不僅需要進行圖片處理及布局，而且需要設置合理的數據庫。在網絡制作類型不斷增加的背景下，Web前端開發技術占據著越來越重要的地位。文章以Web前端開發技術為研究對象，介紹了Web前端開發技術內涵及特點，分析了Web前端開發技術應用現狀，闡述了Web前端開發技術優化難點，并對Web前端開發技術優化方向進行了簡單探究。

關鍵詞：Web前端開發技術;優化;HTTP請求

Web主要指全球廣域網，Web前端開發技術是科技信息發展的產物，前身為網頁制作，即以靜態為主的初始網站設計。Web前端開發技術的發展，標志著信息時代的到來，在信息時代，隨著Web前端開發技術不斷發展，網絡用戶在網頁中數據交互頻率不斷增加，對Web前端開發技術提出了更高的要求。據此，對Web前端開發技術進行適當分析具有非常重要的意義。

1? ? Web前端開發技術

Web前端開發技術主要包括CSS（層疊樣式表）、JavaScript（腳本語言）、HTML（超文本標記語言）3種語言，這3種前端開發語言具有不同的特點，且具有緊密的聯系。其中，CSS主要用于增強控制網頁樣式，是一種可將樣式信息、網頁內容進行分離的標記性語言。CSS具有表現及內容獨立運行、頁面瀏覽速度快、易于維護等優良特點。JavaScript主要以擴展Netscape Navigator（網景領航員）為運行要點，可在Java、HTML間，嵌入Web頁面內基于對象、事件驅動的解釋性編程語言[1]。通過JavaScript的應用，可以進行實時、可交互、動態的語言表達，在脫離Web服務器的基礎上，促使Web網頁與用戶進行良好信息交互。HTML（超文本標記語言）將以往標記進行了取消，并通過對網頁結構進行了改進，可促使網頁管理難度越來越低。除此之外，Web前端開發技術還包括Ajax（異步JavaScript和XML）、DOM（文檔對象模型）等技術。前者可以在無需刷新頁面的基礎上，向服務器傳輸、讀寫數據，后者可以將XML文檔抽象為多個節點集成的樹形數據結構。用戶可在脫離瀏覽器、語言、平臺接口的基礎上，直接訪問頁面標準組件。

2? ? Web前端開發技術應用現狀

在Web技術發展過程中，Web前端開發技術普遍較低，如百度在2011年推出的百度新首頁，后端運行時間平穩在60.0 ms左右，而前端運行時間平均在1.30 s左右，Web前端開發弊端較明顯。雖然在21世紀初期，谷歌、雅虎等公司先后推出了SPeed tracer、Even Faster Web、High Performance Web Sites等前端優化工具及方案。我國學者也以優化HTTP請求為要點，進行了Web前端開發技術優化[2]。但是相關人員并沒有針對瀏覽器二連接限制進行優化，導致Web前端開發技術優化效果不佳。

3? ? Web前端開發技術優化難點

3.1? Web前端瀏覽器二連接限制

HTTP協議明確規定客戶端、服務器端所構建的并發連接數應進行約束，在同樣的時刻，單一客戶端、服務器構建的持久連接數均勻在兩個以內。上述規定雖然可以在一定程度上避免服務器擁塞。但是也會導致用戶在網頁瀏覽中同時出發多個Ajax（異步JavaScript和XML）請求，隨后導致服務器無法對請求響應，最終致使后續HTTP請求被堵塞。

3.2? Web前端B/S（瀏覽器/服務器）結構限制

Web前端B/S（瀏覽器/服務器）結構限制主要指用戶在瀏覽器地址欄輸入網頁發出請求至網頁呈現在瀏覽器中的過程。其主要包括瀏覽器網頁URL（統一資源定位符）輸入、IP地址解析、HTTP請求命令發送、服務器接收請求、瀏覽器接收并解析HTML文檔、服務器接收HTTP請求、瀏覽器資源文件渲染等幾個模塊。其中，瀏覽器與服務器通信過程、瀏覽器對頁面渲染等為Web前端B/S（瀏覽器/服務器）結構優化的主要難點。

4? ? Web前端開發技術優化方向

4.1? Web前端瀏覽器二連接優化

Web前端瀏覽器二連接優化主要包括請求調度解決方案、SACC算法優化設計兩個模塊。一方面，在請求調度解決方案設計階段，相關技術人員可以文檔下載完成時間、文檔渲染時運為網頁性能衡量指標。在不改變瀏覽器連接數目的基礎上，調整多個HTTP請求順序，以降低總體HTTP請求回復時間[3]。

如圖1所示，在T5時刻瀏覽器接收到請求響應，T6時刻獲得另外一個請求的響應。若假定T6、T5時刻時間間隔差為1，且T5時刻具有3個HTTP請求，且A HTTP請求從請求到響應時間為m，B HTTP請求從請求到響應時間為n，C HTTP請求從請求到響應時間為h。需同時滿足m>n>h，且m>n-1>h。此時，為降低HTTP請求響應時間，相關技術人員可設定HTTP請求發送順序為A→B→C，總等待時間需要從T6為起始點，為m+n-1，遠小于以往HTTP請求響應等待時間。

另一方面，在SACC算法設計過程中，相關技術人員可以TDD最小優化策略原則，結合用戶體驗需求，根據視頻、文本、圖片請求消耗時間及瀏覽器對網頁渲染速度特點，同時進行TDD、TRP綜合調度優化。在TDD、TRP綜合調度階段，相關技術人員可在TDD、TRP綜合調度模型中，設置兩個度量屬性。即請求對象大小O、對象渲染時間J。隨后引入權重系數i，對TDD、TRP總等待時間比重進行適當設置，并引入HTTP請求發送次序確定系數k，保證HTTP請求發送順序達到最佳。即k=i×Qn/Qmax+（1-i）×（Jmin/J），其中0≤i≤1[4]。

4.2? Web前端B/S（瀏覽器/服務器）結構優化

針對Web前端B/S（瀏覽器/服務器）結構不佳，對Web前端性能的不利影響，Web前端開發人員可從HTTP請求、延遲加載、服務器端、Ajax（異步JavaScript和XML）等方面，進行優化改進。

（1）在HTTP請求優化階段，主要包括合并資源文件壓縮、圖片優化等幾種方式，通過將瀏覽器請求資源文件精簡，可以降低HTTP請求數量。其中，圖片優化主要是采用CSS Sprites，將多個圖片整合至一張圖片內。同時采用CSS background屬性，對Web前端網頁進行背景定位;壓縮資源文件主要是將多余換行符、多余空格、注釋，進行CSS、JavaScript、HTML等文件進行壓縮。同時，相關技術人員可利用合并靜態文件的方式，將Web頁面中多個JavaScript請求、CSS請求進行合并，最終形成一個請求，可以有效減小HTTP請求數量。

（2）在延遲加載優化階段，由于延遲加載主要針對特定條件下，或者頁面剛開始加載階段，采取的HTTP請求減小情況。因此，在延遲加載手段應用過程中，相關技術人員可依托特定情境，從圖片延遲加載、組件預加載等方面，進行延遲加載優化。其中，圖片延遲加載主要針對Web頁面剛開始加載的情況，設定Web頁面僅加載首屏。此時用戶可根據需求，停止滾屏或者向后滾屏，確定是否加載后續圖片。圖片延遲加載方式的應用，在一定程度上降低了非必要HTTP請求數量的增加。而在組件預加載手段應用階段，相關技術人員可將組件預加載設定為瀏覽器機制。即利用瀏覽器空閑時間，預先加載用戶后續所需瀏覽頁面信息。通過將相關頁面信息預加載結合，可以提高頁面呈現效率[5]。

（3）在服務器端優化階段，相關技術人員可以減小瀏覽器對服務器發出HTTP請求數量為優化目標，以HTTP請求資源傳輸路徑為優化要點，通過優化域名、設置合理緩存、采用CDN或Gzip壓縮等方式，最大程度降低Web前端網絡資源傳輸損耗。其中，在域名優化階段，相關技術人員可以利用多域名策略，將Web前端頁面內容合理劃分，分配到多個域名中，促使頁面最大程度達到平行下載目標。同時，為保證某個資源在分配階段可分配至對應的域名，相關技術人員可在頁面資源多域名分配時，設定網頁下次訪問時可以通過瀏覽器緩存讀取資源。在合理緩存設置過程中，相關技術人員可直接在瀏覽器使用緩存。同時，在服務器、瀏覽器間設置Etag頭部信息緩存模式，以避免資源重復加載。在CDN或Czip壓縮方式設置過程中，由于CDN主要由分散至不同地理位置的服務器構成，而Gzip壓縮為服務器網站訪問階段將網頁內容壓縮后傳輸至瀏覽器。通過CDN或Czip壓縮方式設置，可以縮短服務器用戶距離，降低網絡文件傳輸時間[6]。

（4）在Ajax（異步JavaScript和XML）優化階段，相關技術人員可以利用具有一定緩存性能的Ajax，提高Web前端網頁性能。Ajax特殊的服務器傳輸信息異步性，可以保證用戶反饋信息的即時性。

5? ? 結語

Web前端技術體系的不斷優化，可以縮短用戶獲取信息前等待時間。因此，針對現階段Web前端網頁運行情況，相關技術人員可從Web前端瀏覽器二連接優化、Web前端B/S（瀏覽器/服務器）結構優化兩個方面，綜合利用HTTP請求、延遲加載、服務器端、Ajax（異步JavaScript和XML）、請求調度解決方案、TDD及TRP綜合調度等方式，提高Web前端技術優化效果，為用戶提供更加優質的體驗。作者簡介：白曉（1979- ），女，山東日照人，講師，碩士;研究方向：信息安全，智能算法。

[參考文獻]

[1]周文君.基于網站制作的Web前端開發技術與優化[J].電子技術與軟件工程，2017（10）：60.

[2]王赫.Web前端開發技術以及優化方向分析[J].科技傳播，2016（8）：123-125.

[3]霍福華.Web前端開發技術以及優化方向[J].晉城職業技術學院學報，2017（2）：59-62.

Abstract：Network production covers a lot of contents. It not only needs picture processing and layout， but also needs to set up a reasonable database. With the increasing types of network production， Web front end development technology is playing an increasingly important role. This paper takes Web front end development technology as the research object， introduces the connotation and characteristics of Web front end development technology， analyzes the application status of Web front end development technology， expounds the difficulties of Web front end development technology optimization， and makes a simple exploration on the direction of Web front end development technology optimization.

Key words：Web front end development technology; optimization; HTTP queryinfo