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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（3）在服務(wù)器端優(yōu)化階段，相關(guān)技術(shù)人員可以減小瀏覽器對(duì)服務(wù)器發(fā)出HTTP請(qǐng)求數(shù)量為優(yōu)化目標(biāo)，以HTTP請(qǐng)求資源傳輸路徑為優(yōu)化要點(diǎn)，通過優(yōu)化域名、設(shè)置合理緩存、采用CDN或Gzip壓縮等方式，最大程度降低Web前端網(wǎng)絡(luò)資源傳輸損耗。其中，在域名優(yōu)化階段，相關(guān)技術(shù)人員可以利用多域名策略，將Web前端頁面內(nèi)容合理劃分，分配到多個(gè)域名中，促使頁面最大程度達(dá)到平行下載目標(biāo)。同時(shí)，為保證某個(gè)資源在分配階段可分配至對(duì)應(yīng)的域名，相關(guān)技術(shù)人員可在頁面資源多域名分配時(shí)，設(shè)定網(wǎng)頁下次訪問時(shí)可以通過瀏覽器緩存讀取資源。在合理緩存設(shè)置過程中，相關(guān)技術(shù)人員可直接在瀏覽器使用緩存。同時(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ò)文件傳輸時(shí)間[6]。

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

5? ? 結(jié)語

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

[參考文獻(xiàn)]

[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ù)學(xué)院學(xué)報(bào)，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