Web前端開發(fā)技術(shù)以及優(yōu)化方向探究

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

關(guān)鍵詞：Web前端開發(fā)技術(shù);優(yōu)化;HTTP請求

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

1? ? Web前端開發(fā)技術(shù)

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

2? ? Web前端開發(fā)技術(shù)應(yīng)用現(xiàn)狀

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

3? ? Web前端開發(fā)技術(shù)優(yōu)化難點

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

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

3.2? Web前端B/S（瀏覽器/服務(wù)器）結(jié)構(gòu)限制

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

4? ? Web前端開發(fā)技術(shù)優(yōu)化方向

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

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

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

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

4.2? Web前端B/S（瀏覽器/服務(wù)器）結(jié)構(gòu)優(yōu)化

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

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

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

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

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

5? ? 結(jié)語

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

[參考文獻]

[1]周文君.基于網(wǎng)站制作的Web前端開發(fā)技術(shù)與優(yōu)化[J].電子技術(shù)與軟件工程，2017（10）：60.

[2]王赫.Web前端開發(fā)技術(shù)以及優(yōu)化方向分析[J].科技傳播，2016（8）：123-125.

[3]霍福華.Web前端開發(fā)技術(shù)以及優(yōu)化方向[J].晉城職業(yè)技術(shù)學院學報，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