基于Web前端開發(fā)技術(shù)的應(yīng)用研究

褚建萍

（德州職業(yè)技術(shù)學(xué)院 山東省德州市 253000）

互聯(lián)網(wǎng)技術(shù)在高速發(fā)展的社會中，無論是應(yīng)用范圍還是水平均獲得不同程度的提高，在日常工作生活中帶來更多便利?，F(xiàn)階段，已經(jīng)進入到Web2.0時代，通過積極推廣與深度研發(fā)Web前端技術(shù)，大幅提高網(wǎng)頁制作的效率和質(zhì)量，而這項技術(shù)如何進一步優(yōu)化改善網(wǎng)絡(luò)生活，成為重要的技術(shù)研究課題。

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

1.1 基本內(nèi)涵

其主要指的是Web頁面被建立的過程，也可指在APP前端頁面創(chuàng)建的基礎(chǔ)上向用戶呈現(xiàn)一個過程，憑借例如JavaScript、CSS、HTML多種技術(shù)，建立頁面框架并予以相應(yīng)的問題處理方案，進而建立起交互性特征明顯的頁面，為界面和用戶的交互創(chuàng)造條件[1]。當(dāng)前，互聯(lián)網(wǎng)技術(shù)已邁入發(fā)展的“快速路”，對比過去Web頁面僅是移動設(shè)備或是PC瀏覽器中出現(xiàn)，當(dāng)前網(wǎng)頁能以豐富多元的模式出現(xiàn)，提供更優(yōu)質(zhì)的服務(wù)，而且不同的交互形式進一步強化了用戶體驗，而以上效果都是依靠應(yīng)用前端技術(shù)達成的?？傊琖eb前端開發(fā)技術(shù)是以Web作為基礎(chǔ)的一項前端制作技術(shù)，通過對其有效應(yīng)用逐漸提高網(wǎng)頁瀏覽效率，優(yōu)化瀏覽體驗，同時汲取本地原生的有關(guān)應(yīng)用技術(shù)精華，在頁面制作中廣泛使用，也是當(dāng)前頁面開發(fā)人員的第一技術(shù)選擇[2]。

1.2 基本特征

因為HTML編程語言屬于這項技術(shù)的典型語言，為此技術(shù)所表現(xiàn)的各項基本特征，則能由此出發(fā)進行討論分析：

1.2.1 編寫簡便

技術(shù)人員如果無法熟練應(yīng)用JavaScript語言，便可通過HTML進行網(wǎng)頁制作和實際，僅將一些Tags加載文本即可。

1.2.2 語法較弱

在編寫HTML5時，能看到其沒有相對緊湊的語法結(jié)構(gòu)要求，但是瀏覽器中依舊具備相同的功能，不僅沒有大小寫的區(qū)分，還不需要嚴格管理控制標(biāo)記的結(jié)束[3]。

1.3 核心技術(shù)簡介

1.3.1 JavaScript語言

JavaScript語言屬于解釋型的腳本，最初使用目的在于處理表單中的輸入驗證。當(dāng)前的JavaScript中心內(nèi)容主要包括ECMAScript、BOM、DOM，其具有讀取HTML頁面元素的能力，將文本以動態(tài)的形式嵌入至HTML頁面中，使表單數(shù)據(jù)在提交前便可在瀏覽器中進行驗證操作，也具有控制瀏覽器Cookie寫入、修改的功能。伴隨Web前端技術(shù)的進步，技術(shù)人員搭建了多種JavaScript的庫與框架，如以往流行的jQuery庫便是基于JavaScript的封裝庫，以封裝原生JavaScript語法的方式，簡化了前端開發(fā)的編程。近些年的技術(shù)人員更偏愛Angular、Vue、React框架，以操作虛擬Dom和數(shù)據(jù)驅(qū)動的方式加以實現(xiàn)。

1.3.2 CSS樣式表

CSS主要作用在于定義HTML元素的表現(xiàn)形式，可制定元素的背景顏色、邊框形式、陰影、內(nèi)容位置等的樣式和布局描述。CSS技術(shù)在當(dāng)前已經(jīng)升級到了CSS3版本，新增了特殊效果，如元素漸變、透明、圓角等，以及利用彈性盒模型簡化網(wǎng)頁彈性布局，便于網(wǎng)頁響應(yīng)式開發(fā)工作等。而CSS3中的媒體查詢還能以不同客戶端的分辨率為中心，定義差異性的樣式布局，讓同一網(wǎng)頁可自適應(yīng)不同尺寸的設(shè)備。

1.3.3 HTML語言

該語言由一系列標(biāo)簽組成，最終呈現(xiàn)在瀏覽器中的頁面。利用這一語言可在網(wǎng)頁中添加文字、圖片、音頻、視頻、表格、超鏈接等元素，定義了網(wǎng)頁的布局和最終表現(xiàn)形式。目前主要使用的版本為HTML5，比前一個版本優(yōu)化了瀏覽器本地離線存儲功能，新增了表單控件，如url、search、number、date等。HTML頁面也在服務(wù)器、瀏覽器端中承載著傳輸HTTP請求的任務(wù)，負責(zé)向瀏覽器請求資源鏈接，在瀏覽器收到腳本文件加以解析、執(zhí)行時，便可完成瀏覽器網(wǎng)頁中數(shù)據(jù)的動態(tài)獲取和更新的任務(wù)。

2 Web前端技術(shù)的開發(fā)方向

2.1 優(yōu)化開發(fā)

在信息技術(shù)發(fā)展過程中，對Web前端技術(shù)的改善使提高技術(shù)應(yīng)用效果的重點。比如，使用SEO技術(shù)優(yōu)化Web前端運行時間，可高效縮短Web前端的反應(yīng)時間，也能緩解帶寬資源占用較多的問題，便于用戶以較快的速度進入網(wǎng)頁中，使訪問效率有所提升，也能使計算機的硬盤存儲空間得到優(yōu)化。在利用SEO技術(shù)開展系統(tǒng)開發(fā)工作之時，簡化Web前端程序可對網(wǎng)頁加載中的無關(guān)問題加以處理，使用戶進入網(wǎng)頁時間有所降低。但SEO技術(shù)優(yōu)化Web前端開發(fā)仍然處于探索階段，尚未大范圍投用到人們的生產(chǎn)、生活中，還有更長的路要走。

2.2 兼容開發(fā)

Web前端兼容開發(fā)理念的提出，主要針對了當(dāng)前部分瀏覽器兼容性不足的問題。在計算機實際應(yīng)用之時，用戶有時會同時使用多種不同類型、引擎的瀏覽器，如同時開啟Google Chrome、Firefox、PaleMoon三個瀏覽器，可能會出現(xiàn)網(wǎng)頁加載速度明顯降低的現(xiàn)象。由于不同瀏覽器間Web前端的運行模式、網(wǎng)絡(luò)速度上差異性較小，若想切實解決瀏覽器存在的兼容問題，便要開展對應(yīng)的兼容開發(fā)工作。技術(shù)人員可采用CSS編程技術(shù)，對Web前端中的運行程序進行設(shè)定，從多個無關(guān)聯(lián)的反應(yīng)程序入手，縮小反應(yīng)速度、帶寬占用量等，彰顯了技術(shù)開發(fā)的創(chuàng)新性和完整性。

2.3 多項開發(fā)

Web前端技術(shù)的多項開發(fā)，有利于提高Web前端的運行能效。比如在開發(fā)Web前端運行網(wǎng)絡(luò)協(xié)議時，當(dāng)技術(shù)人員輸入完IP地址、DNS網(wǎng)址后，可達到減少IP地址確認時間的目的，對于提高Web前端開發(fā)水準(zhǔn)具有現(xiàn)實意義。但多項開發(fā)的方向也存在一些問題，如用戶對Web運行會帶有懷疑的態(tài)度，降低了整體運行速度，若想規(guī)避此類風(fēng)險的發(fā)生，技術(shù)人員便要提高Web的更新進程。

2.4 頁面結(jié)構(gòu)語義化

HTML頁面結(jié)構(gòu)的語義化有助于讓用戶明晰頁面的層次，在失去CSS樣式的條件下，仍能清楚判斷頁面的整體結(jié)構(gòu)和基礎(chǔ)性頁面的內(nèi)容布局。語義化也決定了技術(shù)人員要選擇運用語義化的標(biāo)簽，可對網(wǎng)站的搜索引擎進行改進，便于網(wǎng)頁開發(fā)中維護工作的有序進行。最新HTML5技術(shù)標(biāo)準(zhǔn)規(guī)范中增加了較多類型的語義標(biāo)簽如main、article、header、footer、nav等，利用這些標(biāo)簽可較為明確地區(qū)分網(wǎng)頁中的主要內(nèi)容、引用、頭部、底部、超鏈接區(qū)域等布局結(jié)構(gòu)，方便在其他設(shè)備中進行識別與解析，讓頁面的標(biāo)簽使用更為標(biāo)準(zhǔn)，提高了頁面代碼的可讀性。

2.5 MVVM開發(fā)框架

MVVM即模型-視圖-視圖模型，本質(zhì)上由MVC改進而來，其設(shè)計主旨是將網(wǎng)頁中的視圖邏輯、業(yè)務(wù)邏輯加以獨立，再經(jīng)由對數(shù)據(jù)和視圖綁定的方式，使更新視圖邏輯得到驅(qū)動。該框架能夠解耦頁面UI和邏輯處理，提升視圖和邏輯代碼的重復(fù)使用能效。將頁面視圖和業(yè)務(wù)邏輯進行單獨開發(fā)，可細化技術(shù)人員的工作內(nèi)容，比如將頁面設(shè)計工作安排給專業(yè)設(shè)計人員完成，而邏輯問題的處理交給其他技術(shù)人員。在測試環(huán)節(jié)中，技術(shù)人員也可根據(jù)“視圖模型”層面進行編寫，能夠用來解決傳統(tǒng)界面測試中遇到的問題。

3 Web前端技術(shù)的相關(guān)應(yīng)用

3.1 網(wǎng)站

有關(guān)制作網(wǎng)頁，如果想為用戶帶來更理想的瀏覽體驗，則應(yīng)從前期工作、建設(shè)開發(fā)、后期工作三個階段實現(xiàn)逐一優(yōu)化，基于實際應(yīng)用視角分析，這樣技術(shù)在網(wǎng)站設(shè)計與制作中應(yīng)用如下：

3.1.1 制作及完善網(wǎng)站的前期框架

基于網(wǎng)站形式劃分主要為單頁面、多頁面網(wǎng)站。針對單頁面形式而言，其以單一網(wǎng)址用作基礎(chǔ)形成“一對一”網(wǎng)站，因為結(jié)構(gòu)相對簡單，所以僅涉及頁面設(shè)計就能夠瀏覽，通過HTML、CSS語言的合理搭配便會實現(xiàn)。至于多頁面網(wǎng)站，其建立基礎(chǔ)為單頁面，通過單一網(wǎng)址與若干頁面數(shù)據(jù)相對應(yīng)的形式搭建網(wǎng)站結(jié)構(gòu)，主要包含主、副兩類頁面。一般情況下，主頁面為網(wǎng)站主體的業(yè)務(wù)模式和相關(guān)經(jīng)營概況，通過“文字+配圖”形式突出重點，設(shè)計主頁面時力求精簡，對比單頁面網(wǎng)站存在一些相同點。對于多頁面攜帶的附屬網(wǎng)頁，需將主頁面作為基礎(chǔ)并通過代碼串聯(lián)，其中要防止復(fù)雜內(nèi)容、冗余代碼對瀏覽速度造成的影響[4]。

3.1.2 制作導(dǎo)航

導(dǎo)航系統(tǒng)的建立基礎(chǔ)為多頁面網(wǎng)站，用戶利用導(dǎo)航可獲得相應(yīng)的瀏覽指引，并且突顯網(wǎng)絡(luò)整體結(jié)構(gòu)的重點內(nèi)容與主要脈絡(luò)。對此，設(shè)計并優(yōu)化導(dǎo)航系統(tǒng)屬于提高網(wǎng)頁質(zhì)量，瀏覽可行性的一大分支，一般導(dǎo)航菜單依據(jù)網(wǎng)站內(nèi)容實現(xiàn)數(shù)據(jù)分類，一方面在分類時保證脈絡(luò)清晰，另一方面要不斷優(yōu)化技術(shù)體系。當(dāng)前，多數(shù)導(dǎo)航系統(tǒng)通過無序列表、樣式表來設(shè)計，然后以超鏈接的形式附加元素，或是將jQuery、Menu用作第三方插件引用相關(guān)數(shù)據(jù)。

3.1.3 規(guī)劃總體網(wǎng)站制作

確定網(wǎng)站主題應(yīng)該突出重點，依據(jù)網(wǎng)站有關(guān)主體情況與附屬機構(gòu)規(guī)劃，不僅要言簡意賅還應(yīng)做好字數(shù)控制，旨在讓網(wǎng)站頁面更加整潔。然后是科學(xué)編排與合理布局網(wǎng)站排版，按照內(nèi)容體系各自的重要性再次規(guī)劃與排版，要保證頁面排版有條理且兼具秩序性，如果想通過排版的帶來良好的瀏覽體驗，則可通過JavaScript、jQuery庫執(zhí)行規(guī)劃設(shè)計，一方面網(wǎng)站結(jié)構(gòu)更具連貫性，另一方面幫助網(wǎng)站主體提高影響力[5]。

3.2 在線學(xué)習(xí)平臺

3.2.1 前端應(yīng)用網(wǎng)頁

技術(shù)人員利用HTML5、Hybrid APP開發(fā)技術(shù)展開不同使用場景的響應(yīng)設(shè)計，在確保學(xué)習(xí)資源整體呈現(xiàn)效果的基礎(chǔ)上，讓終端平臺更具兼容性，由此為學(xué)生帶來良好的平臺使用體驗。以制作平臺前端應(yīng)用網(wǎng)頁為例，利用HTML5技術(shù)設(shè)計前端應(yīng)用網(wǎng)頁，增強用戶和界面間、教師和學(xué)生間的交流互動性，搜集整合豐富的網(wǎng)頁要素、多元的學(xué)習(xí)主題，從而創(chuàng)造理想的教學(xué)活動外部環(huán)境。構(gòu)建前端網(wǎng)頁在為網(wǎng)頁設(shè)計提供便利的同時保證科學(xué)體現(xiàn)各項教學(xué)資源，還可以為實現(xiàn)后端及離線功能予以強有力的技術(shù)支持。技術(shù)人員利用jQuery Mobile等技術(shù)設(shè)置前端框架，讓前端網(wǎng)頁包含的應(yīng)用元素獲得有效、針對性設(shè)置。更重要的是，為后續(xù)修改網(wǎng)頁應(yīng)用元素創(chuàng)造便利條件[6]。

3.2.2 后端應(yīng)用功能

不僅要科學(xué)設(shè)置前端應(yīng)用網(wǎng)頁，也要重視離線和后端功能的有效設(shè)置。技術(shù)人員在具體操作中進行代碼編寫，依托代碼具備的交互作用幫助前端頁面和后臺數(shù)據(jù)之間的交互，在做到動態(tài)更新的同時建立完備的緩存機制，讓平臺擁有更強大的離線功能[7]。技術(shù)人員通過HTML緩存機制提高程序調(diào)用Web資源的速度，從而增強其獲取及共享后端數(shù)據(jù)的能力。刨除構(gòu)建緩存機制也能通過Web Storage功能，妥善保存緩存數(shù)據(jù)。

3.2.3 終端應(yīng)用程序

關(guān)于設(shè)置終端應(yīng)用程序，通過使用PhoneGap技術(shù)進行封裝操作，從而豐富程序功能。例如Android平臺，設(shè)置應(yīng)用程序利用Eclipse建立文件夾，并在此基礎(chǔ)上設(shè)立2個獨立子文件夾/libs、/assets/www，再以PhoneGap壓縮相關(guān)文件并存儲。與此同時，將java程序啟動進行文件夾的運行以及修改操作，從而形成apk文件[8]。

4 優(yōu)化Web前端技術(shù)相關(guān)措施

4.1 提高HTTP請求控制的合理性

例如使用協(xié)議等均是體現(xiàn)HTTP請求的常見形式。如果請求適當(dāng)減少會在一定程度上提升網(wǎng)頁靈敏度，這是由于減少HTTP請求會縮減資源具體的占用空間。由于完成HTTP存在較大難度并屬于作出系列反應(yīng)的一個過程，HTTP請求的合理控制顯得十分重要，比如通過文件合并來處理HTTP請求問題[9]。

4.2 提高DNS查詢的合理性

如果執(zhí)行DNS查詢會導(dǎo)致網(wǎng)頁運行速度下降，期間會經(jīng)歷較長的解析過程，大約消耗20-120毫，且在DNS查詢?nèi)蝿?wù)完成之前，網(wǎng)站不會加載網(wǎng)址域名下的任何模塊?；谥饾u增大的訪問量，會進一步延長網(wǎng)頁運行所需時間，導(dǎo)致用戶體驗感下降，網(wǎng)站的使用效果難以滿足用戶的需求。面對這樣的現(xiàn)實情況，因為用戶要求的信息無法及時加載，所以應(yīng)對DNS查詢次數(shù)嚴格控制，從而提升網(wǎng)頁的加載速度和反應(yīng)能力[10]。在加載網(wǎng)頁之時，技術(shù)人員應(yīng)規(guī)避較為繁瑣的設(shè)計，其會對頁面加載速度產(chǎn)生不良影響，還容易發(fā)生用戶審美疲勞的現(xiàn)象。決定了技術(shù)人員應(yīng)更多關(guān)注網(wǎng)頁的實用性，讓網(wǎng)頁的設(shè)計簡潔明了、主體功能清晰明確，使網(wǎng)頁在符合用戶審美需求的條件下，也能確保網(wǎng)頁的加載效率。

4.3 對文件夾大小科學(xué)控制

實際上文件夾和加載速度之間為正比關(guān)系。即文件夾越大會使加載速度愈發(fā)緩慢，與此同時，加載速度的快慢直接影響網(wǎng)頁使用的體驗感受。具體表現(xiàn)如下：較多文件數(shù)量、較大文件內(nèi)等情況會降低其實際運行速度，網(wǎng)頁可能由于不堪重負而致使系統(tǒng)崩潰?；诖耍夹g(shù)人員應(yīng)予以高度重視并采取有效的解決方法，以壓縮文件的手段提升網(wǎng)頁整體運行水平，還可以通過處理代碼及CSS文件的方式，防止系統(tǒng)發(fā)生崩潰[11]。

4.4 降低HTTP錯誤出現(xiàn)概率

如果HTTP錯誤出現(xiàn)，則會發(fā)生頁面崩潰的問題，用戶無法順利訪問網(wǎng)頁。通過對這種現(xiàn)象出現(xiàn)的原因分析，在網(wǎng)頁中無法找出查詢內(nèi)容的情況下，很容易引發(fā)網(wǎng)頁問題，或是由于過長的處理時間而產(chǎn)生網(wǎng)頁問題，為此應(yīng)提高網(wǎng)頁處理效率，避免出現(xiàn)類似的問題[12]。降低HTTP錯誤的思路在于減少無用響應(yīng)，比如在網(wǎng)頁訪問中會常見404錯誤、拒絕訪問錯誤等，這些錯誤發(fā)生的主要原因在于網(wǎng)站未能找到用戶提出需求的文件ID。在具體操作中，用戶的HTTP請求耗時較長，在長時間的等待中會出現(xiàn)無用的響應(yīng)頁面，而用戶需求的內(nèi)容則沒有被及時找出，使得用戶的體驗感有所降低?？茖W(xué)設(shè)置Web服務(wù)器與頁面間的連接，對頁面鏈接進行測試，以及跟蹤Web服務(wù)器的錯誤日志等，均可達成減少HTTP錯誤發(fā)生幾率的目標(biāo)。

4.5 規(guī)避重定向風(fēng)險

網(wǎng)頁的重定向會消耗較多的時間，增加了用戶在網(wǎng)頁使用時的等待實踐。網(wǎng)頁重定向中還會發(fā)生各種類型的問題，當(dāng)重定向次數(shù)增加一次后，也會相應(yīng)地增加一次對Web的請求。為規(guī)避這一風(fēng)險，技術(shù)人員可在Web站點子目錄后增加root目錄“/”，可減少網(wǎng)頁發(fā)生重定向操作的頻率。

4.6 完善HTML頁面

在技術(shù)人員對Web前端頁面進行開發(fā)的過程中，若想保證同一網(wǎng)頁在不同客戶端的顯示，便要讓網(wǎng)頁同設(shè)備的屏幕大小具有較高契合性，使用戶的體驗度也能得到同步提升。在部分網(wǎng)站解決此類問題時，通常會結(jié)合移動端設(shè)備設(shè)置不同版本的網(wǎng)頁，但這種做法會造成技術(shù)人員維護網(wǎng)頁工作量的增多，也會加大開發(fā)難度。在前端頁面設(shè)計中想要對HTML頁面加以完善，技術(shù)人員可考慮借助HTML5技術(shù)的力量，達到自適應(yīng)設(shè)計的目的，用以解決同一網(wǎng)頁在不同客戶端屏幕中的適應(yīng)性問題。在具體操作上，技術(shù)人員的首要任務(wù)是在HTML文檔中的標(biāo)簽屬性中輸入指令和設(shè)置其寬度，維持與設(shè)備屏幕寬度的一致，再設(shè)置“用戶禁止操作網(wǎng)頁”項目。之后要對Web前端網(wǎng)頁寬度、字體字號等進行調(diào)整，應(yīng)結(jié)合相對參數(shù)的百分比進行設(shè)置，字號設(shè)置上可利用相對值rem，能夠輔助調(diào)整字號比例。技術(shù)人員或可使用媒體查詢的方法執(zhí)行CSS樣式，讓查詢可結(jié)合實際客戶端類型加以執(zhí)行。由此可見，HTML5技術(shù)在Web前端開發(fā)中應(yīng)用效果良好，與以往的同類型技術(shù)相比，該技術(shù)可為開發(fā)工作提供便捷，也提高了網(wǎng)頁設(shè)計的適應(yīng)性和穩(wěn)定性。

4.7 改進頁面設(shè)計工作

在技術(shù)人員開展頁面設(shè)計工作之時，應(yīng)保證頁面布局的科學(xué)性，內(nèi)容表達和布局明晰、文字圖片清楚，也是提高頁面加載速度的一項可行之計。因此，在基于Web前端開發(fā)進行網(wǎng)頁設(shè)計時，應(yīng)更加體現(xiàn)出網(wǎng)頁主旨明確、大方得體的特點，對于文件數(shù)量、大小，以及圖片的規(guī)格等加以改進。比如，在對CSS和JavaScript文件數(shù)量和大小改進時，技術(shù)人員可選擇外聯(lián)式模式，考慮到頁面設(shè)計中包含多種內(nèi)容的可能性，此時頁面設(shè)計中便會需要更多的CSS或JavaScript文件，也會讓頁面設(shè)計的復(fù)雜性更高。要求技術(shù)人員對于CSS或JavaScript的應(yīng)用事先進行規(guī)劃，多使用縮寫模式以防占用更多空間。以這種規(guī)劃的方式可降低CSS或JavaScript的使用量，顯著降低了HTTP的請求數(shù)量。技術(shù)人員還應(yīng)當(dāng)減少重復(fù)代碼的使用，比如在網(wǎng)頁背景圖進行設(shè)計改進時，可對與背景圖進行靜態(tài)設(shè)置，若網(wǎng)頁中對于內(nèi)容中有圖片需求，可事先對其進行優(yōu)化處理后再予以上傳。較多的網(wǎng)頁中對于背景圖片數(shù)量有較多要求，容易增加服務(wù)器的運行壓力，無形中增加了HTTP的請求數(shù)量。技術(shù)人員在CSS定義背景時可將有關(guān)背景加以聯(lián)合，對圖片質(zhì)量進行控制，使其尺寸大小最為適宜。圖片占用空間小可提高網(wǎng)頁的加載速度，也便于用戶快速下載，對于服務(wù)器帶寬發(fā)揮良性作用也大有裨益。

5 結(jié)語

網(wǎng)絡(luò)信息技術(shù)的進步發(fā)展，致使用戶提出更多的技術(shù)服務(wù)需求。有關(guān)這一技術(shù)的使用及創(chuàng)新，會盡可能滿足多樣化的用戶使用需求?；诖?，有關(guān)技術(shù)人員在靈活運用技術(shù)的同時，應(yīng)有效解決目前存在的技術(shù)問題，例如以對無用響應(yīng)、HTTP請求量等方面的優(yōu)化控制，進一步強化網(wǎng)頁交互能力、提升加載效率，從而為網(wǎng)頁運行提供保障，也由于提供可靠方便的技術(shù)服務(wù)，助力我國互聯(lián)網(wǎng)產(chǎn)業(yè)的良好發(fā)展。