Web前端開發(fā)技術研究

陳博文

【摘? ? 要】隨著社會經(jīng)濟的發(fā)展和進步，科技發(fā)展日新月異，以互聯(lián)網(wǎng)技術為代表的新興產(chǎn)業(yè)迅猛發(fā)展，并且滲透到人們生活中的各個方面。Web前端技術承擔用戶和服務器之間的信息互換，使互聯(lián)網(wǎng)信息技術以更直觀的方式被人們理解，Web網(wǎng)頁由傳統(tǒng)的靜態(tài)圖片和文字疊加形式演變成各種信息的爆炸式增長，人們對于互聯(lián)網(wǎng)的要求在不斷增加，這也促使Web前端開發(fā)技術的不斷更新與發(fā)展。本文就Web前端開發(fā)模式以及技術研究做出闡述，同時提出一系列優(yōu)化效率的方式方法。

【關鍵詞】Web? 前端? 開發(fā)技術? 優(yōu)化方法

中圖分類號：G4? ? ? 文獻標識碼：A DOI：10.3969/j.issn.1672-0407.2021.12.087

一、Web前端開發(fā)技術的理解

Web前端技術是在主要媒介為瀏覽器的前提下，更好地把信息交互傳輸給客戶以及網(wǎng)絡終端的技術。從整體來講，Web前端技術主要涉及的模塊是Web頁面、外部的視覺效果以及前后端口信息的交互等。隨著科技的不斷發(fā)展，網(wǎng)頁作為用戶和服務器交換的媒介以及網(wǎng)絡信息的主要載體，其穩(wěn)定性直接影響到用戶對該網(wǎng)站資源信息的獲取。Web前端技術的開發(fā)猶如百花齊放，但是在Web2.0技術背景下，網(wǎng)絡的開發(fā)交互性已經(jīng)有了很大的變化。Java Script、CSS、HTML成為Web前端開發(fā)技術的三大支柱型設計語言，隨著技術的不斷發(fā)展完善，Silver light、Flash/Flex、XML以及服務器端語言等技術也逐漸被大眾所熟知[1]。Web前端開發(fā)技術設計知識面比較廣，在開發(fā)分析的時候需要借助互聯(lián)網(wǎng)技術，從瀏覽器到用戶端口的設計都稱之為Web前端技術。

二、對CSS、JavaScript、HTML的具體理解

（一）CSS

所謂CSS，是HTML的具體表現(xiàn)（標準通用標記語言的其中一個應用）以及XML（標準通用標記語言的一個子集）的一種計算機系統(tǒng)語言。通常情況下用于增強網(wǎng)頁控制，由于其自身的特性（動靜兼?zhèn)洌┛梢耘浜喜煌哪_本語言，動態(tài)地對網(wǎng)頁各元素、位置的排版進行像素級精確控制以及格式化，是現(xiàn)有網(wǎng)頁設計中最普遍的一種網(wǎng)頁設計語言，其顯著特點是語法靈活、代碼可讀性較高，而且擁有對網(wǎng)頁對象的編輯以及模型樣式編輯的能力。

（二）HTML

HTML是超文本標記語言的一種，且包括一系列標簽。通過這些標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，通常用于創(chuàng)建Web超文本文檔的計算機編程。通常情況下網(wǎng)頁中各元素的編輯以及顯示都是通過對標簽符號的使用實現(xiàn)的，但是在HTML編程語言來臨之后形成了一種規(guī)范標準。

HTML文本會產(chǎn)生命令，然后經(jīng)過處理可以明確文字、圖形、動畫、聲音、表格、鏈接等。HTML經(jīng)過多年的演變出現(xiàn)了很多版本，但是應用較為廣泛的是HTML5。HTML5在音頻、視頻、動畫、應用等方面給網(wǎng)頁的設計帶來了前所未有的改變，區(qū)別于以往的網(wǎng)頁設計風格，HTML5引用了多種新型標簽，良好的網(wǎng)頁表現(xiàn)性以及跨越平臺的兼容性都使得HTML5備受推崇。

（三）Java Script

Java Script，是一種具有函數(shù)優(yōu)先的輕量級、解釋型或即時編譯型的編程語言。作為開發(fā)頁面的腳本語言被人熟知，也經(jīng)常運用到瀏覽器環(huán)境中，Java Script基于原型編程、多范式的動態(tài)腳本語言，同時支持面向?qū)ο蟆⒚钍胶吐暶魇斤L格。至此Web前端開發(fā)進入了一個嶄新的時期，Java Script作為一種腳本網(wǎng)頁編寫語言，其明顯特征是可響應、有具體對象，但是操作有限制，需要配合HTML網(wǎng)頁添加的動態(tài)功能來響應[2]。

Java Script也是一種網(wǎng)絡解釋性語言，常因編寫過程不需要專門的編輯器而被技術人員青睞。最終與HTML超文本語言、Java腳本語言一起實現(xiàn)同一個網(wǎng)頁中鏈接多個對象，與客戶端口實現(xiàn)交互作用。一旦監(jiān)聽到某件元素以及某個事件就會調(diào)動相應的時間函數(shù)來執(zhí)行處理，并且將處理結(jié)果返還給函數(shù)調(diào)用元素，其動態(tài)性、跨平臺性、交互時間短的特點十分顯著。由于Java Script是動態(tài)語言，因此凡是能運行瀏覽器的并且支持Java Script的計算機，都可以利用其跨平臺的特點直入站點，無需經(jīng)過Web服務程序，減少了信息交互時間，提升了效率。

三、現(xiàn)階段Web前端開發(fā)技術現(xiàn)狀分析

據(jù)調(diào)查發(fā)現(xiàn)，Web前端開發(fā)技術作為新型技術，已經(jīng)成為當下各大科研機構研究的重點，發(fā)展前景不可小覷。隨著科技的進步和發(fā)展，類似淘寶、百度等互聯(lián)企業(yè)，也從傳統(tǒng)的運作模式轉(zhuǎn)移到Web產(chǎn)品前端技術的開發(fā)、研究，且對自己的網(wǎng)站進行了重新構建。但是科技在發(fā)展，技術在進步，人們對于生活品質(zhì)的要求越來越高，網(wǎng)絡亦然?；诋斍吧鐣F(xiàn)狀，互聯(lián)網(wǎng)對于人才的要求增加分工越來越細致。如交互設計師、網(wǎng)頁設計師、前端開發(fā)工程師、網(wǎng)頁重構師、用戶體驗師等等。Web前端開發(fā)工程師，不僅需要扎實地掌握前端的開發(fā)技術（如CSS、HTML、DOM、AJAX等），還需要合理優(yōu)化后期技術。國內(nèi)大型互聯(lián)網(wǎng)公司整體上前端技術研發(fā)氛圍很好、速度比較快，雖然也有很多高端人才助力，但整體發(fā)展不盡如人意，由于Web前端開發(fā)技術還處于發(fā)展階段，很多規(guī)范以及最佳實踐仍然處于初期探索階段，框架結(jié)構各式各樣，有很多種選擇，設計執(zhí)行方案更是五花八門，針對這種情況，現(xiàn)階段如何對Web系統(tǒng)進行優(yōu)化，提升用戶的綜合體驗，提高整體的運行速率，是接下來我們要研究的重點?；ヂ?lián)網(wǎng)技術需要國內(nèi)外研發(fā)人員深層次的開放交流才能更加趨于完善，故步自封難以長久，Web前端技術的發(fā)展道路任重而道遠。

四、Web技術前端開發(fā)的體會以及工程人員要求

相較于服務器以及后臺開發(fā)的技術，Web前端開發(fā)的技術門檻較低。其規(guī)律是先易后難，技術人員通過自學一些相關的知識，就可以對Web技術進行研發(fā)，比如會使用PS、Dream weaver以及Flash等基本軟件，就可以完成網(wǎng)頁制作。但是隨著科技的進步和發(fā)展，動態(tài)的網(wǎng)站占據(jù)了主要地位，以前的技術遠遠無法支撐網(wǎng)站運行的需求，這就需要我們對資源進行整合利用，前后端口開發(fā)人員相互配合，才能提高效率，完成項目的完整制作。

在整體知識構架上，Web前端技術開發(fā)人員不僅要有深度，而且也要有廣度。在開發(fā)的過程中，一定要養(yǎng)成良好的編碼習慣，盡可能保持好文檔的結(jié)構、編碼的風格、代碼的規(guī)范、命名的準確以及結(jié)構標簽的合理使用，盡可能多地關注網(wǎng)站性能優(yōu)化調(diào)整的一些方式方法。Web前端技術開發(fā)的宗旨就是滿足用戶的需求，使用戶有更好、更優(yōu)質(zhì)的網(wǎng)絡體驗。然而優(yōu)質(zhì)的體驗不僅僅依靠基礎功能的建設，還要追求更高層次的技術改革，從根本上解決問題。

首先，網(wǎng)絡工程師需要熟練掌握CSS、DOM等前端開發(fā)技術，以及在不同瀏覽器的情況下其使用情況和兼容情況、渲染的原理和存在的問題等。其次，技術上的優(yōu)化、網(wǎng)站性能的優(yōu)化、SEO以及服務器端口的知識都要熟練掌握。第三，學會使用工具對網(wǎng)絡程序進行輔助開發(fā)。最后，除了必要的基礎知識外還要清晰地掌握理論知識，包括代碼的維護以及瀏覽器的分級支持等[3]。

五、Web在應用中的方案優(yōu)化

Web前端開發(fā)技術作為當下一項新興熱門專業(yè)，能夠高效率地為用戶傳達數(shù)據(jù)信息，與此同時，還能夠快速為后端服務器傳輸相關數(shù)據(jù)，這就是判斷Web前端技術開發(fā)與研究的價值所在。如果對設計出的Web網(wǎng)頁用戶體驗響應較慢或者網(wǎng)絡運營不穩(wěn)定，不僅會影響用戶體驗，還會給用戶造成不必要的損失和麻煩?；诖?，前端開發(fā)人員一直在努力追求Web網(wǎng)頁的完善，不僅可以滿足用戶的需求，還可以滿足后端服務器的需要。

（一）對于HTTP請求次數(shù)加以限制

通常情況下，Web前端技術開發(fā)人員為了達到美化的效果，往往會在網(wǎng)頁中加入很多圖片作為修飾，這樣在視覺效果上雖然達到了華麗的效果，卻增加了運行的負擔，過多的圖片堆積嚴重影響到網(wǎng)頁的加載速度，使得運行速度緩慢。針對這種情況，我們應當及時予以調(diào)整。過于花哨的網(wǎng)頁會使瀏覽用戶產(chǎn)生視覺疲勞，技術人員應該針對不同的效果，在保證網(wǎng)頁能夠正常運營的前提下對圖片做適當?shù)膭h減，確保網(wǎng)頁簡潔大方，減少其在HTTP中的次數(shù)請求，確保整個網(wǎng)頁能夠更加順利流暢地運行。

（二）配置文件的合理安排

在前端技術開發(fā)中適當減少HTTP的請求次數(shù)之后，緊接著就是合理地配置文件資源。文件的大小在一定程度上也會影響網(wǎng)頁的加載速度以及寬帶的占用資源，因此Web技術開發(fā)人員在編碼時應該盡量用最少的代碼編寫出最好的網(wǎng)頁效果[4]。采用這種簡潔的代碼減少文件的應用以及內(nèi)存的占用，進而提高Web的網(wǎng)頁加載速度。

（三）script底部設置減少重新定向

script底部放置的意思是為了防止script腳本的執(zhí)行阻礙頁面的加載速度，通過采用將script放置底部的做法來提高網(wǎng)頁頁面中組件的下載速率，促使網(wǎng)頁頁面的加載時間大大縮短。這種形式大大提高了Web前端的性能，在對網(wǎng)頁進行瀏覽的時候，不需要重新設定方向，節(jié)省時間的同時提高了效率。雖然造成重新定向的原因各式各樣，但不管是哪種原因都會變相增加一次或者一次以上的Web請求，因此避免重新定向至關重要。

（四）網(wǎng)頁內(nèi)容優(yōu)化調(diào)整

Web前端開發(fā)技術需要不斷完善優(yōu)化，其中網(wǎng)頁內(nèi)容的優(yōu)化占據(jù)主要的地位，在具體的工作過程中需要針對其特點做出相應的考慮，并且結(jié)合Web技術對其進行全面的優(yōu)化。舉例說明，對內(nèi)容進行優(yōu)化時需要把注意力從內(nèi)容轉(zhuǎn)移到樣式表上，script在下，樣式表在上。再就CSS來說，由于其自身特點突出（易覆蓋疊成），應區(qū)別對待。在完成瀏覽信息以及數(shù)據(jù)的加載后，對該網(wǎng)頁的具體內(nèi)容進行渲染，在很大程度上為用戶提供了較好的體驗感。但是對于網(wǎng)頁的內(nèi)容優(yōu)化，需要充分考慮到整體以及細節(jié)的作用。就Web前端開發(fā)技術的優(yōu)化來說，需要對CSS和script同時進行優(yōu)化，保障網(wǎng)頁頁面的下載效果，確保腳本對頁面不會形成消極的影響。

（五）文件類型以及規(guī)模的合理優(yōu)化

對文件類型的優(yōu)化，成為網(wǎng)頁優(yōu)化的重點問題，為了更好地避免Web用戶在進行網(wǎng)頁訪問的過程中出現(xiàn)上傳文件以及下載文件時由于格式不同而導致的文件錯碼亂碼現(xiàn)象，在優(yōu)化Web技術中要注意規(guī)定好文件的類型以及相關的網(wǎng)頁代碼。雖然流程復雜，但是整體效果顯著，也可以對其他代碼進行全面的優(yōu)化處理。程序員可以針對具體的代碼構造進行刪減分析，規(guī)避出現(xiàn)內(nèi)聯(lián)樣式的產(chǎn)生，從根本上降低文件的大小來進行網(wǎng)頁代碼的優(yōu)化。

（六）對DNS次數(shù)查詢的優(yōu)化

通常在進行網(wǎng)絡查詢時，域名系統(tǒng)會導致網(wǎng)頁響應時間過長。通常的域名系統(tǒng)在查找中時長大概為20毫秒左右。如果瀏覽器處在一個等待的狀態(tài)就是正在進行域名查找，不論是查找次數(shù)多還是需求多，整個網(wǎng)頁都將處于備受影響的狀態(tài)中。鑒于這種情況，就需要進行系統(tǒng)緩存，由于瀏覽器承載大量的數(shù)據(jù)信息，并且當前域名中的內(nèi)容不會在系統(tǒng)下一次的請求完成之前受到任何限制[5]，因此網(wǎng)頁前端技術開發(fā)水平的整體提高，需要不斷強調(diào)域名系統(tǒng)的查詢次數(shù)且不斷精進技術要求，確保網(wǎng)絡系統(tǒng)的穩(wěn)健運行。

（七）Cookie的優(yōu)化

Cookie信息的產(chǎn)生來源于硬盤，如果想使之與域名有關，就要接受HTTP的請求，跟網(wǎng)絡流量變大網(wǎng)速就會卡的道理一樣，這個道理Cookie信息也同樣受用，一旦Cookie信息內(nèi)容逐漸增加，需求量就會逐漸變大，卡頓的時間就會延長，需要我們完善以下步驟：

1.減少或禁止系統(tǒng)程序之外多余的Cookie。

2. 將Cookie降到最小的程度，就會很大程度上優(yōu)化Cookie，提高網(wǎng)頁系統(tǒng)的響應速度。

3.添加Cookie的過期時間，并且把要緊信息放在硬盤上儲存。當退出瀏覽器時Cookie仍然會把信息保留在硬盤上。

4. 在訪問的過程中其實多數(shù)Cookie是涉及不到的，例如JS、CSS等，因此，要善于運用不同的domain儲存靜態(tài)資源來提高速率，增加其利用率。

隨著互聯(lián)網(wǎng)技術的飛速發(fā)展，互聯(lián)網(wǎng)也受到了一定程度的沖擊。Web前端開發(fā)技術從簡單慢慢走向復雜，問題出現(xiàn)在不同的方方面面，針對這種情況，我們要對Web網(wǎng)絡技術進行優(yōu)化。首先，在技術層面上對技術人員的要求較高，不僅要有扎實的專業(yè)知識，還要不斷完善自身實力，優(yōu)化網(wǎng)站性能，學會借助相關的理論知識并且靈活運用使用各種工具進行輔助開發(fā)。例如，對代碼的維護、分層模板的語意和組件的易用性都要熟悉掌握，從而開發(fā)出更多能滿足顧客需求的產(chǎn)品。現(xiàn)階段Web前端技術的發(fā)展不夠完善，還處于不斷摸索階段，很多網(wǎng)絡規(guī)則還沒有統(tǒng)一的標準。Web作為朝陽產(chǎn)業(yè)，其開發(fā)研究工作都會呈現(xiàn)上升趨勢。網(wǎng)站前端的頁面優(yōu)化得越好，互聯(lián)網(wǎng)的文明建設就會更加和諧、有序。我們眼前所呈現(xiàn)的網(wǎng)絡制作標準并不是終極理想的結(jié)果。只有不斷地更新完善Web前端技術開發(fā)與研究技術，才能滿足社會不斷發(fā)展的需求。Web前端技術開發(fā)涵蓋范圍非常廣，不僅有具體技術，也有抽象的理念，但其核心目標就是把網(wǎng)站的界面更優(yōu)質(zhì)地呈現(xiàn)給用戶。

參考文獻

[1]劉蕾，劉冰月.Web前端課程的知識體系和教學實踐[J].軟件工程，2018，21（06）.

[2]吳向榮.“Java Web編程技術”課程教學方法研究[J].電腦知識與技術，2019，15（01）.

[3]劉蕾，劉冰月.Web前端課程的知識體系和教學實踐[J].軟件工程，2018，21（06）.

[4]李曉薇.網(wǎng)站制作下的Web前端開發(fā)設計[J].電子技術與軟件工程，2018（6）.

[5]萬中文.基于網(wǎng)站制作的Web前端開發(fā)技術與優(yōu)化[J].電腦知識與技術，2018，14（33）.