計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)技術(shù)應(yīng)用現(xiàn)狀與優(yōu)化措施分析

朱志翔 焦彥鋒 吳新穎

一、前端開(kāi)發(fā)與計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)技術(shù)

（一）前端開(kāi)發(fā)

運(yùn)用HTML技術(shù)、CSS技術(shù)等創(chuàng)設(shè)Web頁(yè)面或者App平臺(tái)，為網(wǎng)絡(luò)用戶呈示前端界面，實(shí)現(xiàn)用戶界面與網(wǎng)絡(luò)產(chǎn)品二者間交互的過(guò)程，即為前端開(kāi)發(fā)。傳統(tǒng)模式下，網(wǎng)絡(luò)界面內(nèi)容多為文字與靜態(tài)圖片等。如今，在飛速發(fā)展的網(wǎng)絡(luò)技術(shù)支持下，網(wǎng)站內(nèi)容更加豐富，功能更加多元，交互效果也更加突出，更好地滿足了網(wǎng)絡(luò)用戶不斷增長(zhǎng)的使用需求。

（二）計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)技術(shù)

1.HTML技術(shù)。HTML全稱為HyperText Markup Language，即超文本標(biāo)記語(yǔ)言，作為計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)領(lǐng)域內(nèi)運(yùn)用普遍的技術(shù)之一，是相關(guān)技術(shù)人員深入研究前端開(kāi)發(fā)技術(shù)的一項(xiàng)基礎(chǔ)網(wǎng)絡(luò)技術(shù)要素，其發(fā)展程度日臻成熟。該技術(shù)具有獨(dú)特的計(jì)算機(jī)網(wǎng)站前端頁(yè)面重構(gòu)形式，能夠有效解析并且重構(gòu)PC端計(jì)算機(jī)網(wǎng)站布局方式。[1]應(yīng)用該技術(shù)開(kāi)發(fā)計(jì)算機(jī)網(wǎng)站前端，需要有效組合HTTP協(xié)議與前端模塊化應(yīng)用模式，并且全面解析常見(jiàn)的業(yè)務(wù)系統(tǒng)前端開(kāi)發(fā)體系與設(shè)計(jì)模式。在該項(xiàng)技術(shù)支持下，全棧項(xiàng)目與混合類項(xiàng)目均可具備網(wǎng)頁(yè)外觀與樣式布局重構(gòu)操作功能，并且全面管理各類低層編碼形式的工具庫(kù)與包模塊等內(nèi)容，為前端開(kāi)發(fā)人員實(shí)現(xiàn)編碼形式與平臺(tái)的精細(xì)化管理提供助力。值得注意的一點(diǎn)是，在應(yīng)用該項(xiàng)技術(shù)進(jìn)行平臺(tái)開(kāi)發(fā)與編輯的過(guò)程中，需要有效組合多個(gè)應(yīng)用模式，如系統(tǒng)響應(yīng)、交互以及面向?qū)ο蟮?，并且全面分析可視化?yè)面的樣式配置過(guò)程。

2.CSS技術(shù)。CSS全稱為Cascading Style Sheets，即層疊樣式表，同樣是一項(xiàng)計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)技術(shù)領(lǐng)域中常見(jiàn)的應(yīng)用技術(shù)，能夠有效滿足靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)間多元化交互性能需求。應(yīng)用該項(xiàng)技術(shù)，必須精準(zhǔn)對(duì)應(yīng)腳本語(yǔ)言與動(dòng)態(tài)化網(wǎng)頁(yè)標(biāo)識(shí)和元素，并在網(wǎng)頁(yè)調(diào)整形式格式化后，對(duì)其進(jìn)行創(chuàng)新組合。[2]該項(xiàng)技術(shù)應(yīng)用優(yōu)勢(shì)突出，不但具備多元化樣式定義模式，而且還具備優(yōu)良性能，修改與使用難度更低。此外，相關(guān)人員還可以借此技術(shù)進(jìn)入多頁(yè)面應(yīng)用場(chǎng)景進(jìn)行層疊樣式排布，實(shí)現(xiàn)頁(yè)面壓縮?？傮w而言，應(yīng)用該項(xiàng)技術(shù)，能夠最大程度地縮短網(wǎng)頁(yè)訪問(wèn)間隔時(shí)間，并且做到標(biāo)準(zhǔn)化管理多種文件格式與鏈接；能夠提升對(duì)多種網(wǎng)頁(yè)端系統(tǒng)開(kāi)發(fā)與設(shè)計(jì)模式的適應(yīng)效率；還可以原型系統(tǒng)為依托快速配置完成指定樣式；其通用的樣式層疊與覆蓋形式可以打造更為簡(jiǎn)潔的代碼編寫(xiě)環(huán)境，為開(kāi)發(fā)人員提供極大便利。

3.JS編程技術(shù)。JS全稱JavaScript，是一種吸收了C++語(yǔ)言優(yōu)勢(shì)而又補(bǔ)齊了C++語(yǔ)言短板的能夠直面對(duì)象的編程語(yǔ)言，現(xiàn)已憑借其強(qiáng)大的語(yǔ)言功能與便捷的使用優(yōu)勢(shì)在計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)領(lǐng)域?qū)崿F(xiàn)廣泛應(yīng)用。傳統(tǒng)的JS編程存在功能單一的問(wèn)題，只能夠利用編程手段判斷網(wǎng)頁(yè)信息是否違法。經(jīng)過(guò)一系列革新，JS編程技術(shù)現(xiàn)已具備多元化功能，不僅能夠制作網(wǎng)頁(yè)特效，還支持網(wǎng)絡(luò)服務(wù)器之間、移動(dòng)端與用戶之間的交互，無(wú)論是與傳統(tǒng)JS編程技術(shù)進(jìn)行縱向?qū)Ρ?，還是與其他編程語(yǔ)言進(jìn)行橫向相比，都具備更加突出的應(yīng)用優(yōu)勢(shì)。網(wǎng)站前端開(kāi)發(fā)設(shè)計(jì)人員可在該項(xiàng)技術(shù)支持下，聯(lián)系網(wǎng)頁(yè)與邏輯控制層，及時(shí)跟蹤并收集統(tǒng)計(jì)實(shí)時(shí)出現(xiàn)的信息請(qǐng)求與相關(guān)變更信息。此外，相關(guān)技術(shù)人員也可應(yīng)用該項(xiàng)技術(shù)撰寫(xiě)腳本語(yǔ)言代碼，從而提高網(wǎng)頁(yè)動(dòng)態(tài)類型捕捉質(zhì)效，并且準(zhǔn)確判斷網(wǎng)頁(yè)功能組合是否符合邏輯。

4.DOM技術(shù)。DOM全稱為Document Object Model，即文檔對(duì)象模型，是一種重要的編程接口，現(xiàn)已成為一項(xiàng)常用技術(shù)。網(wǎng)站設(shè)計(jì)勢(shì)必離不開(kāi)文檔對(duì)象模型，而在該項(xiàng)技術(shù)支持下，可以應(yīng)用文檔對(duì)象模型中的映射模式滿足多網(wǎng)站業(yè)務(wù)開(kāi)發(fā)需求。應(yīng)用該項(xiàng)技術(shù)實(shí)現(xiàn)對(duì)象標(biāo)識(shí)轉(zhuǎn)化，還需要以計(jì)算機(jī)文檔、標(biāo)簽以及屬性等內(nèi)容為依托，并在第一時(shí)間隱藏對(duì)象屬性的前提下，及時(shí)處理文檔與標(biāo)簽需求、有效設(shè)置文檔與標(biāo)簽內(nèi)容。標(biāo)記性文檔，即傳統(tǒng)文檔在隱藏處理對(duì)象屬性與行為的基礎(chǔ)上搭建標(biāo)記性文檔模型，并將模型轉(zhuǎn)變?yōu)槿肿兞恳蜃?。該?xiàng)技術(shù)所用解析方式有所不同，不但能夠封裝可以與HTML交互的樹(shù)結(jié)構(gòu)中的內(nèi)容，使其成為節(jié)點(diǎn)對(duì)象，且還可以轉(zhuǎn)化網(wǎng)站設(shè)計(jì)所用層次化標(biāo)簽，最終形成具備多段接口的樹(shù)形結(jié)構(gòu)，有效提高內(nèi)存加載便捷性。此外，該項(xiàng)技術(shù)也為相關(guān)技術(shù)人員進(jìn)行網(wǎng)站動(dòng)態(tài)化設(shè)計(jì)提供了有力支持，不但能夠加載網(wǎng)站動(dòng)態(tài)信息，而且使得用戶動(dòng)態(tài)操作成為可能。同時(shí)，還能根據(jù)網(wǎng)站性質(zhì)為全部封裝對(duì)象元素提供合理的編碼與標(biāo)識(shí)，并且正確解析網(wǎng)站設(shè)計(jì)常用操作形式，如查找、刪減等。

二、計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)技術(shù)應(yīng)用現(xiàn)狀

（一）在網(wǎng)站制作方面的應(yīng)用

HTML技術(shù)使得用戶訪問(wèn)網(wǎng)頁(yè)內(nèi)容成為可能，而CSS則為網(wǎng)頁(yè)內(nèi)容美化設(shè)計(jì)與站點(diǎn)構(gòu)建的實(shí)現(xiàn)提供了有效的技術(shù)支持。計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)工作重點(diǎn)還有設(shè)計(jì)網(wǎng)站內(nèi)容、完成網(wǎng)頁(yè)跳轉(zhuǎn)，以及改善用戶體驗(yàn)，而這便要求開(kāi)發(fā)技術(shù)人員具備良好專業(yè)能力，熟練掌握各項(xiàng)技術(shù)操作技能，以此提高開(kāi)發(fā)工作質(zhì)效并且不斷升級(jí)網(wǎng)站功能，從而更好地滿足用戶需求。然而，就當(dāng)前狀況來(lái)看，由于開(kāi)發(fā)技術(shù)人員存在素質(zhì)能力差異，導(dǎo)致各項(xiàng)技術(shù)在提高網(wǎng)站訪問(wèn)穩(wěn)定性與高效性等方面所具應(yīng)用優(yōu)勢(shì)未能得到充分發(fā)揮。

（二）在網(wǎng)絡(luò)安全性能方面的應(yīng)用

為了防止網(wǎng)頁(yè)與網(wǎng)站遭受病毒攻擊與惡意入侵，有效提高用戶瀏覽使用安全性，相關(guān)技術(shù)人員可以應(yīng)用必要的技術(shù)手段為網(wǎng)頁(yè)增加非法訪問(wèn)功能，或在系統(tǒng)內(nèi)安裝殺毒軟件等。比如，可在計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)過(guò)程中為網(wǎng)站設(shè)置訪問(wèn)權(quán)限，確保用戶在順利通過(guò)身份認(rèn)證控制系統(tǒng)識(shí)別的前提下進(jìn)入網(wǎng)站進(jìn)行瀏覽；在瀏覽過(guò)程中，利用移動(dòng)IP安全管理系統(tǒng)對(duì)用戶信息進(jìn)行實(shí)時(shí)保護(hù)；在有病毒侵入的情況下，系統(tǒng)可于第一時(shí)間發(fā)出提示，并且自動(dòng)查殺病毒，確保網(wǎng)絡(luò)環(huán)境安全。值得注意的是，雖然網(wǎng)絡(luò)安全防護(hù)技術(shù)水平現(xiàn)已得到大幅度提高，能夠抵御多數(shù)病毒，但是病毒入侵方式與惡意攻擊方式也越發(fā)多元，導(dǎo)致網(wǎng)絡(luò)安全問(wèn)題仍然存在。

（三）在瀏覽器兼容方面的應(yīng)用

CSS等網(wǎng)站前端開(kāi)發(fā)技術(shù)能夠有效提高網(wǎng)站的響應(yīng)與運(yùn)轉(zhuǎn)效率，為獨(dú)立反應(yīng)程序提供科學(xué)處理方式，實(shí)現(xiàn)程序設(shè)置流程優(yōu)化升級(jí)，從而有效完善計(jì)算機(jī)前端鏈，有效解決各種不合用戶需求的問(wèn)題，彌補(bǔ)網(wǎng)站當(dāng)前存在的功能缺陷。

三、計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)技術(shù)優(yōu)化措施

（一）優(yōu)化HTTP請(qǐng)求

為提高計(jì)算機(jī)網(wǎng)站交互質(zhì)效，必須重視HTTP請(qǐng)求這一重要內(nèi)容，實(shí)現(xiàn)對(duì)它的優(yōu)化意味著優(yōu)化前端設(shè)計(jì)模式與編碼實(shí)現(xiàn)機(jī)制具備較高復(fù)雜性的操作請(qǐng)求與token方法。[3]安全的網(wǎng)絡(luò)連接環(huán)境是優(yōu)化HTTP請(qǐng)求的重要前提，在此環(huán)境中，開(kāi)發(fā)技術(shù)人員能夠設(shè)計(jì)前端網(wǎng)頁(yè)資源優(yōu)化配置方案，并且去除不必要的分散組件與樣式配置。部分瀏覽器網(wǎng)頁(yè)客戶端具備較強(qiáng)的兼容性能，因此，可以采用緩存方式減少HTTP請(qǐng)求次數(shù)。但是，這種方式存在一定局限，雖然適用于靜態(tài)網(wǎng)頁(yè)存儲(chǔ)，但對(duì)處于動(dòng)態(tài)變化中的計(jì)算機(jī)網(wǎng)站前端頁(yè)面不甚友好，或會(huì)影響其操作質(zhì)量。減少HTTP請(qǐng)求次數(shù)，必須以不同類型業(yè)務(wù)系統(tǒng)在單位時(shí)間內(nèi)的點(diǎn)擊頻次與操作數(shù)量作為依據(jù)，測(cè)試數(shù)據(jù)指標(biāo)中亟待改進(jìn)的開(kāi)發(fā)要點(diǎn)，并且適度調(diào)整信息載體分時(shí)存儲(chǔ)機(jī)制?？傮w來(lái)說(shuō)，優(yōu)化HTTP請(qǐng)求具備兩方面優(yōu)勢(shì)。一方面，能夠在網(wǎng)頁(yè)樣式與組件對(duì)象間建立高質(zhì)量動(dòng)態(tài)鏈接；另一方面，也能有效解決用戶在不同網(wǎng)絡(luò)操作環(huán)境下所面臨的本地緩存效率低下的問(wèn)題，并使本地網(wǎng)絡(luò)前端頁(yè)面業(yè)務(wù)邏輯流轉(zhuǎn)過(guò)程的安全計(jì)算成為可能。

（二）應(yīng)用CDN架構(gòu)

CDN全稱為Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)，是一種高質(zhì)效網(wǎng)絡(luò)應(yīng)用服務(wù)模式，能在有效縮短緩存時(shí)間并且減少前端頁(yè)面資源浪費(fèi)次數(shù)的前提下，將各種前端頁(yè)面內(nèi)容分發(fā)至異地服務(wù)器設(shè)備。但在應(yīng)用過(guò)程中，必須做到有效隔離公共節(jié)點(diǎn)與私人節(jié)點(diǎn)關(guān)鍵數(shù)據(jù)參數(shù)，以此確保每次操作的完整性與可靠性。[4]CDN架構(gòu)的應(yīng)用優(yōu)勢(shì)主要體現(xiàn)在優(yōu)化前端性能方面，此外，還能全程跟蹤并管理用戶預(yù)先加載資源的進(jìn)度，確保用戶能夠在更短的時(shí)間內(nèi)得到可靠的系統(tǒng)結(jié)果，并且提供有效鏈接，為用戶讀取特定操作內(nèi)容提供便利。應(yīng)用過(guò)程中，開(kāi)發(fā)技術(shù)人員還需在代理與協(xié)議（族）的選擇問(wèn)題上保持慎重，并且嚴(yán)密監(jiān)控、合理分析內(nèi)容分發(fā)節(jié)點(diǎn)等各項(xiàng)安全保密機(jī)制的應(yīng)用路徑。值得一提的是，在應(yīng)用過(guò)程中，需要加速計(jì)算存在于前端頁(yè)面的流媒體與其他多媒體緩存形式，并從性能與數(shù)據(jù)處理功能等方面入手，有效提高前端頁(yè)面操作準(zhǔn)確性與后端數(shù)據(jù)庫(kù)管理系統(tǒng)的實(shí)時(shí)存儲(chǔ)與處理分析性能。

（三）優(yōu)化內(nèi)容并調(diào)整文件規(guī)模

為了確保本地與異地網(wǎng)絡(luò)信息傳輸安全性并提高信息傳輸效率，還需把握內(nèi)容與文件規(guī)模這兩個(gè)重要方面。一方面，要進(jìn)一步優(yōu)化內(nèi)容，有效組合原型系統(tǒng)與特定樣式設(shè)計(jì)模式，以此規(guī)避重定向等問(wèn)題。此外，還需要適度優(yōu)化Ajax可緩存機(jī)制。開(kāi)發(fā)人員需在合理運(yùn)用懶加載組件的同時(shí)，有效整理特定的可視區(qū)域。由于預(yù)加載組件通常涉及豐富的工具類型與有效方法，因此，開(kāi)發(fā)人員可在提高實(shí)時(shí)傳輸效率這一關(guān)鍵目標(biāo)引導(dǎo)下，結(jié)合特定的業(yè)務(wù)系統(tǒng)開(kāi)發(fā)場(chǎng)景，合理選用其中的一種或者多種。[5]在組件需被切分至不同區(qū)域的情況下，為避免數(shù)據(jù)沖突等一系列問(wèn)題的出現(xiàn)，必須嚴(yán)格控制前端編碼中所包含的域名數(shù)量。另一方面，還需積極調(diào)整文件規(guī)模，具體可從壓縮代碼與服務(wù)器、優(yōu)化Cookie等方面入手完成資源整合，對(duì)網(wǎng)頁(yè)加載資源進(jìn)行合理分類，并將可有可無(wú)的資源刪除。前述兩方面舉措，在縮短HTTP請(qǐng)求次數(shù)與緩存時(shí)間等方面具備重要作用，此外，對(duì)于多重前端頁(yè)面網(wǎng)絡(luò)運(yùn)行阻塞問(wèn)題的解決也大有裨益。

（四）確保DNS查詢次數(shù)適量

DNS查詢次數(shù)過(guò)少或者過(guò)多，都會(huì)影響前端網(wǎng)頁(yè)功能的充分發(fā)揮，且還可能引發(fā)解析錯(cuò)誤等一系列問(wèn)題。由此可見(jiàn)，確保DNS查詢次數(shù)適量，也是優(yōu)化計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)技術(shù)的一個(gè)重要舉措。由于前端網(wǎng)頁(yè)中的域名數(shù)量與DNS查詢次數(shù)呈正相關(guān)，因此，在完成前端頁(yè)面鏈接對(duì)象與實(shí)例封裝過(guò)程中，有必要通過(guò)去除可有可無(wú)的域名來(lái)減少DNS查詢次數(shù)，從而實(shí)現(xiàn)網(wǎng)頁(yè)客戶端系統(tǒng)響應(yīng)速度的提升。[6]此外，DNS查詢次數(shù)對(duì)并行下載數(shù)量變化情況亦存在間接影響，因此，可以通過(guò)實(shí)現(xiàn)CDN與SDN等兩種網(wǎng)絡(luò)架構(gòu)的融合應(yīng)用，循序漸進(jìn)地縮短前端頁(yè)面響應(yīng)時(shí)間。為使DNS查詢次數(shù)保持在適中水平，還需確保方法與解析時(shí)間和頻率設(shè)定等相對(duì)應(yīng)，并且有效計(jì)算靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)的本地緩存效率，立足全局設(shè)定具體的域名分配規(guī)則。部分計(jì)算機(jī)網(wǎng)站前端頁(yè)面具備后端數(shù)據(jù)信息處理功能，針對(duì)這部分前端頁(yè)面而言，確保DNS解析次數(shù)保持適中，不但對(duì)清空本地用戶網(wǎng)站緩存資源大有裨益，且還能夠提升網(wǎng)頁(yè)動(dòng)態(tài)響應(yīng)速度、縮短響應(yīng)時(shí)間。

結(jié)語(yǔ)

計(jì)算機(jī)網(wǎng)站前端開(kāi)發(fā)目的在于優(yōu)化網(wǎng)站界面與交互操作，在提高網(wǎng)絡(luò)系統(tǒng)運(yùn)行質(zhì)效與網(wǎng)絡(luò)服務(wù)水平方面發(fā)揮著重要作用。以HTML、CSS、JS編程以及DOM等為其主要構(gòu)成的計(jì)算機(jī)網(wǎng)站前期開(kāi)發(fā)技術(shù)，當(dāng)前主要被應(yīng)用在網(wǎng)站制作、網(wǎng)絡(luò)安全性能以及瀏覽器兼容等幾個(gè)方面，且面臨著服務(wù)器擁堵、運(yùn)行結(jié)構(gòu)受限以及基準(zhǔn)統(tǒng)一困難等優(yōu)化難點(diǎn)。為此，筆者提出優(yōu)化HTTP請(qǐng)求、應(yīng)用CDN架構(gòu)、優(yōu)化內(nèi)容并調(diào)整文件規(guī)模以及確保DNS查詢次數(shù)適量等四條優(yōu)化建議，以有效豐富網(wǎng)站功能，更好地滿足當(dāng)代用戶的多元化與個(gè)性化使用需求。