芻議Web前端開發技術與優化工作

郝風平

（金肯職業技術學院，江蘇 南京 211100）

0 引言

在當前科學進步速度不斷提升的背景下，網絡被廣泛應用于各領域之中，并成為推動現代社會發展的重要動力之一。自網絡技術誕生以來，受其適用性以及實際價值影響，研究人員對其的研究從未中斷，因此，新技術不斷涌現并趨于完善，但在此領域中Web前端開發技術以及其優化研究一直是行業內研究重點內容。隨著高新信息技術不斷發展，Web前端開發技術在先進技術支持下，逐漸實現了采集網絡環境信息的功能，這無疑對信息傳輸以及服務獲取具有直接影響。由此Web前端技術開發成為當前信息行業內前沿研究項目，研究者將此作為主要研究內容。

1 Web前端開發技術概述

從當前技術研究領域發展現狀層面分析，Web前端運轉流程在實際發展過程中可以為技術發展工作提供重要的方向指引。現階段，網絡應用較為廣泛的結構主要為B/S結構。瀏覽器在實際提供服務過程中主要分為三個步驟：網絡用戶首先在瀏覽器中輸入網址，隨后對Web進行url請求，DNS服務器通過對域名進行解析獲取相應的IP地址并訪問計算機，在此基礎上，Web服務器在頁面文件內容以及具體url相關參數指引下對相關資源進行篩選，最后生成網絡用戶搜索的數據以及HTML頁面。網絡用戶在實際操作過程中對計算機網絡最基本的服務要求即是瀏覽器運轉，而不同的瀏覽器在運轉方式上具備一致性，HTML文件在實際生成后需要通過服務器渠道向瀏覽器傳輸，隨后瀏覽器會對HTML文件進行分解。Web前端開發技術主要分為三大模塊，具體包括改善開發、多向開發以及兼容開發，主要內容涵蓋網頁設計流程、HTML文檔結構、網頁制作器等。

1.1 改善開發

改善開發模塊主要內容為針對現行Web前端技術應用過程中暴露出的問題進行優化改進，如基于SEO技術的Web前端運行時間優化改進流程。該技術在實際應用過程中可以有效地對Web前端反應時間進行優化，同時降低寬帶占用量，進而實現提升網頁加載速度的目的。該技術的主要應用原理為，在對SEI技術進行開發時，對Web前端程序進行簡化，消除中間段反應導致的延時，同時對HTML請求以及URL詢問進行簡化，最終實現大幅提升Web前端運行速度的目的，同時該技術在降低寬帶占用量方面同樣效果顯著，可以實現兼顧提升電腦反應速率以及降低內存占用量的目標[1]。然而從實際發展角度分析，該技術尚處于開發起步階段，尚未應用于市場之中。

1.2 多向開發

該模塊的主要內容為提升Web前端的運轉功能。此方面比較有代表性的研究為以Web前端運轉體制為切入點，對網絡協議、IP等方面進行改進。通過促使DNS子碼默認及IP網址認定同步運轉，實現提升Web前端反應速率目標，進而落實優化Web前端開發質量的工作目標。但是技術人員在實際工作中應認識到的一點是，該方式在實際應用過程中呈現出較為顯著的雙面性特征，雖然可以有效提升Web前端開發水準，但是也對Web運轉提出更高的要求，提升其更新速度是落實此方案的必要基礎保障，一旦此環節出現問題則此方案也會被棄用[2]。

1.3 兼容開發

此方面內容主要為對當前瀏覽器兼容問題進行優化。從實際應用角度分析，在多個瀏覽器同時運轉的條件下，Web前端運行時間以及反應速度會受到較為嚴重的影響，進而導致加載遲緩或是網速被拖慢等情況發生。雖然當前不同瀏覽器Web前端運行方式以及速度相差不大，但是在頁面設計以及載入內容方面具有較為顯著的差異性[3]。現階段技術人員為實現提升瀏覽器兼容性目標，在實際工作過程中通常會首先利用CSS編程技術對Web前端運轉程序進行優化改進，切實提升其反應速率。隨后在HTHL技術基礎上進行反應程序編程，并促使其獨立化，通過優化寬帶占有量及反應過程與時間微差促使不同瀏覽器對不同Web前端鏈接進行處理。從實際發展角度分析，雖然該方向具備一定創新性，但是當前技術人員對其開發程度相對較低，同時當前市場形勢正處于不斷變化之中，因此，在實際進行開發過程中應注意積極進行市場調查，并圍繞市場實際需求進行技術修正。

2 Web前端開發技術優化難點

2.1 瀏覽器二連接限制

現階段Web前端所應用的HTTP協議對客戶端以及服務端構建過程中產生的并發連接數具有嚴格要求，依據其規定內容要求，同一客戶端僅能實現與兩個服務器在同一時刻內進行并發連接。此規定的本質目的在于避免因并發連接數量過多導致服務器阻塞情況發生，進而導致反應速率下降。但是同時也存在較大問題，主要表現為用戶在實際進行瀏覽過程中會同時發出多個Ajax請求，進而導致服務器無響應情況發生，最終導致后續HTTP請求堵塞。

2.2 B/S結構限制

現階段，B/S結構是當前網絡應用最為廣泛的結構，其對Web前端的限制主要表現在用戶輸入網址請求瀏覽至網頁呈現的過程中，其主要內容包括瀏覽器網頁URL輸入、IP地址解析等。其中，瀏覽器及服務器通信過程、瀏覽器對頁面渲染等是結構優化的主要難點。

3 Web前端開發技術優化方向

3.1 Web前端瀏覽器二連接優化

在此方向上，需要優化內容主要包含兩個模塊，分別為請求調度解決方案以及SACC算法優化設計。在實際進行優化設計過程中需要遵循不同模塊具體內容開展有針對性的設計。

在請求調度解決方案設計階段，技術人員在實際進行工作過程中可以將網頁性能衡量指標設定為文檔下載速度以及文檔下載時運。在避免對瀏覽器連接數進行調整的前提條件下對多個HTTP請求順序進行調整，進而實現推動HTTP整體請求回復時間下降的目的[4]。

具體設計如圖1所示。由圖中信息可知，瀏覽器在不同時刻分別獲取不同的請求響應。假定時刻之間的間隔為1，且瀏覽器在某時刻接收到3個HTTP請求，同時將A、B、C三個HTTP請求反應時間分別設定為m、n、h，且三者之間需要滿足m＞n＞h以及m＞n-1＞h條件。此時，技術在以降低HTTP反應時間為目標進行的操作過程中，可以將請求發送順序設定為A→B→C，總等待時間起始點設定為時刻，最終結果為m+n—1，相較于以往HTTP反應速斷具有較大提升。

圖1 Web 前端瀏覽器HTTP 請求順序等待示意

技術人員在實際進行SACC算法優化工作過程中，應充分遵循TDD最小優化策略原則。在優化工作開展過程中，技術人員首先明確客戶實際應用需求，并圍繞此核心綜合視頻、文本等數據信息調用過程中的請求時間以及瀏覽器對網頁渲染速度特征基礎上，實現對TDD以及TRP進行綜合調度優化。為切實提升優化工作成效，技術人員可以在模型中設置兩個不同的度量屬性，即將請求對象大小以及對象渲染時間分別設定為0和J，隨后引入權重系數i，在此基礎上重新設定請求對象大小即對象渲染時間等待時間比重，完成此環節后明確HTTP請求次序，將其設定為系數k，最終實現發送順序達到最有效果的目的。其中0≤i≤1。

3.2 降低文件大小

從實際發展角度分析，瀏覽器網頁打開速度是提升用戶體驗的重要條件之一，而網頁打開速度與用戶網絡環境及占用文件大小之間具有直接聯系。在相同網絡環境下，瀏覽器占用網絡資源會隨著文件大小降低而降低，其網絡打開以及運行速度也會隨之提升，由此，對網頁存儲結構進行優化實現降低文件大小是Web前端技術開發的重要內容[5]。在實際進行優化設計過程中，技術人員應注意盡可能地削減不必要的文件，同時對其中存在的重復代碼進行刪減，降低網頁文件總量，進而實現提升瀏覽速率的目標。此環節工作中需要注意的重點在于保護核心代碼，如果核心代碼受損會使得網頁難以正常運行，進而導致用戶體驗直線下降。

3.3 削減網頁中的HTTP請求

HTTP在網頁設計以及運行過程中發揮著不可替代的作用，其本質是一個請求-響應協議，通常在TCP上運行。HTTP功能為指定客戶端發送的消息以及可能得到的響應，并以及ASCⅡ代碼反饋，而消息的具體內容則采用MIME格式給出。該模型為早期Web建立的基石。但是早期網頁設計過程中，由于設計者缺乏相應的經驗，側重于網頁的美觀性導致HTTP請求過多，在網頁中占據較大位置，導致用戶難以直接找到搜索內容，往往需要經過大量HTTP請求，這就使用戶搜索體驗受到一定的影響。為此，設計者在實際進行Web前端設計優化過程中應注意圍繞用戶體驗這一核心，對HTTP請求進行相應的削減，切實提升網頁運行速度。在實際進行網頁界面設計過程中應更加側重于簡潔性以及創新性，確保網頁設計滿足用戶審美發展趨向以及實際需求，一方面提升網頁運行流暢性，另一方面也可以實際提升用戶的體驗，為Web前端設計優化提供經驗參考。

3.4 降低DNS查詢時間

在互聯網技術中，DNS域名系統發揮著重要作用，其主要功能為將域名以及IP地址映射至分布式數據庫之中，確保用戶可以更加便捷地對互聯網進行訪問。通常情況下，DNS使用TCP以及UDP端口53。現階段，互聯網規則中對各級域名長度限制為63個字符，總長度控制在253個字符以下。從實際發展角度分析，DNS查詢時間將直接影響網頁打開速度，同時，市場調研結果顯示，用戶在實際應用網頁過程中更加青睞查詢效率高的網頁。因此，技術人員在實際工作過程中應注意圍繞網頁查詢時間這一節點進行優化，切實降低網頁DNS查詢時間，并對復雜的DNS查詢系統進行簡化設計，實現提升網頁查詢效率目標，提升用戶使用感受。

3.5 優化網頁界面

以往網頁設計中，設計者對界面的華麗性以及功能的多樣性更加重視，這就導致網頁界面冗余情況產生，一定程度上影響用戶體驗。由此，在實際發展過程中應注意對網頁進行簡化設計。同時設計者還應注意對用戶使用習慣進行調查，并進行有針對性的創新，在提升網頁運行速度的同時提升其對用戶的吸引力。

4 結語

綜上所述，在當前新時代背景下，網絡已經成為民眾日常生活以及工作中不可分割的部分。由此，Web前端設計開發優化成為研究人員的重要工作內容，在實際開展相關工作過程中，設計人員應注意對瀏覽器二接優化、網頁文件占用量以及HTTP請求縮減相關問題進行重點研究，切實提升設計有效性，為提升Web前端功能性提供有力保障。