陳博文

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

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

中圖分類號：G4? ? ? 文獻(xiàn)標(biāo)識碼：A DOI：10.3969/j.issn.1672-0407.2021.12.087

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

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

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

（一）CSS

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

（二）HTML

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

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

（三）Java Script

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（三）script底部設(shè)置減少重新定向

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)

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

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

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

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

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