王宇翔

（上海工商外國語職業(yè)學(xué)院 上海市 201399）

隨著科學(xué)技術(shù)的不斷進步，人類社會越來越向數(shù)字化、智能化、自動化方向發(fā)展，人們的社會生產(chǎn)和生活對網(wǎng)絡(luò)科技的依賴性也在不斷增強。Web前端開發(fā)技術(shù)直接影響網(wǎng)頁的人機交互，影響信息交流效果，用戶在信息獲取中，也會因為Web前端開發(fā)效果產(chǎn)生不一樣的體驗感，Web前端開發(fā)技術(shù)也會影響產(chǎn)業(yè)收入和經(jīng)濟效益，所以有必要研究Web前端開發(fā)技術(shù)，探索Web前端開發(fā)技術(shù)的優(yōu)化方向和對策。對此，需要把握Web前端開發(fā)技術(shù)的基本內(nèi)涵和要點，掌握Web前端開發(fā)技術(shù)的具體應(yīng)用，順著Web前端開發(fā)技術(shù)的應(yīng)用方向，不斷探索Web前端開發(fā)技術(shù)的優(yōu)化方向，真正促進Web前端開發(fā)效益提升。

1 Web前端開發(fā)技術(shù)體系及相關(guān)工作

在網(wǎng)絡(luò)系統(tǒng)中，Web前端開發(fā)技術(shù)應(yīng)用中，HTML、CSS以及Java Script是該技術(shù)系統(tǒng)的重要支撐性語言，它們在Web前端開發(fā)技術(shù)系統(tǒng)中扮演著不同角色，有不同的規(guī)則約束和要求，但是三種語言之間也存在一定的聯(lián)系。要想對Web前端開發(fā)技術(shù)系統(tǒng)進行優(yōu)化處理，需要落實到具體的工作過程中，把握相關(guān)工作細節(jié)，確保系統(tǒng)優(yōu)化達到預(yù)期目標(biāo)。

Web前端開發(fā)是在Web發(fā)展中一種常見軟件開發(fā)模式。最開始的前端開發(fā)方法單一，將頁面作為工作單元，對于頁面中的內(nèi)容展示，早期開發(fā)界面中的Java Script邏輯并不多，所以完全不需要構(gòu)建框架結(jié)構(gòu)。而隨著互聯(lián)網(wǎng)及相關(guān)信息技術(shù)的快速發(fā)展，頁面設(shè)計中不僅要完成內(nèi)容信息等展示，還需要和用戶交互，突出技術(shù)特效等，滿足多樣化設(shè)計需要，這些使得前端代碼邏輯越來越復(fù)雜，隨著移動互聯(lián)網(wǎng)的進一步發(fā)展創(chuàng)新，智能化的移動終端設(shè)備應(yīng)用越來越普遍，這樣全段代碼的跨平臺使用越來越頻繁，前端頁面的復(fù)雜性更高，要求不斷提升系統(tǒng)維護性。在目前的網(wǎng)絡(luò)架構(gòu)中，B/S結(jié)構(gòu)是比較常用的一種。這一結(jié)構(gòu)可以將系統(tǒng)想要實現(xiàn)的功能都納入服務(wù)器中，為后續(xù)系統(tǒng)開發(fā)提供便利，也能夠方便今后的維護和操作，確?？蛻舳私y(tǒng)一目標(biāo)實現(xiàn)。同時，B/S架構(gòu)中進行相關(guān)數(shù)據(jù)庫軟件以及瀏覽器安裝，也能夠促進數(shù)據(jù)庫間高效數(shù)據(jù)共享目標(biāo)實現(xiàn)，這對于頁面設(shè)計而言意義重大。通過這一架構(gòu)，進行Web層開發(fā)，從客戶端開發(fā)需求出發(fā)，進而進入到數(shù)據(jù)訪問成和業(yè)務(wù)層中，還可以借助管理員身份對應(yīng)的權(quán)限，進入系統(tǒng)配置，掌握需要的信息，實現(xiàn)信息管理目標(biāo)。要針對具體用戶瀏覽器進行研究，確保其和現(xiàn)代網(wǎng)絡(luò)環(huán)境相適應(yīng)。在瀏覽器對發(fā)出的頁面請求打開的時候，用戶需要在瀏覽器中進行網(wǎng)址輸入，再通過DNS服務(wù)器來進行網(wǎng)址分析，在得到具體IP地址后，可以通過網(wǎng)址進行頁面瀏覽?；诖?，用戶通過相應(yīng)瀏覽器使用向服務(wù)器發(fā)送HTTP的請求，服務(wù)器在接收請求后，借助URL瀏覽器來確定選擇的文件，一般文件采取的都是頁面形式中的多種允許格式，在Web服務(wù)器打開頁面的時候，以URL為參數(shù)，通過數(shù)據(jù)庫以及選定的目標(biāo)文件將頁面打開，最后才能將數(shù)據(jù)庫打開，確保其和頁面能夠有效結(jié)合。

在生成HTML文件后，服務(wù)器能夠?qū)τ脩粼跒g覽器中的請求進行落實，將文件完整的傳輸?shù)綖g覽器中，通過瀏覽器將服務(wù)器傳送的文件接收到，再進行文件的分析解讀，再向網(wǎng)絡(luò)系統(tǒng)進行更多的資源鏈接的搜索。系統(tǒng)服務(wù)器在接收請求后，會結(jié)合相關(guān)請求來獲取完整的文件，通過液面形式傳輸?shù)綖g覽器中。這一過程中，瀏覽器能夠由高到低對文件進行解析，在完成后，執(zhí)行任務(wù)，這一過程可能導(dǎo)致鏈接文件加載比較慢，所以這也是Web前端開發(fā)技術(shù)系統(tǒng)優(yōu)化中需要重點解決的問題。

2 Web前端開發(fā)技術(shù)應(yīng)用

要想掌握前端開發(fā)技術(shù)，需要對于前端開發(fā)形式以及應(yīng)用進行把握。目前，很多網(wǎng)頁設(shè)計中都用到B/S結(jié)構(gòu)框架。用戶在瀏覽器使用中，一般需要經(jīng)歷三個主要步驟，首先，網(wǎng)絡(luò)用戶可以在瀏覽器頁面將自己要搜索的關(guān)鍵詞輸入其中，點擊查詢需要的信息資料，再對于Web進行URL的訪問申請，此后，DNS服務(wù)器會對相應(yīng)的域名解析，在獲取相關(guān)IP地址后，就可以在對應(yīng)地址上進行計算機訪問。

Web服務(wù)器負責(zé)對于相關(guān)瀏覽器的頁面內(nèi)容以及URL數(shù)據(jù)參數(shù)，實現(xiàn)數(shù)據(jù)和信息層層篩選，生成有用數(shù)據(jù)和HTML頁面。這一過程中，相關(guān)瀏覽器的正常運行是保證用戶服務(wù)需求得到滿足的保證，不同瀏覽器運行方式也存在一定差異，在具體開發(fā)中，需要把握相關(guān)差異，做好解析和處理。

3 Web前端的主要開發(fā)方向

3.1 改善開發(fā)

在現(xiàn)代信息化技術(shù)不斷發(fā)展的過程中，要實現(xiàn)對Web前端開發(fā)技術(shù)的改善，是提升技術(shù)應(yīng)用效益的關(guān)鍵。如，通過SEO技術(shù)對于Web前端的運行時間進行改善，這對于促進Web前端反應(yīng)時間縮短有重要作用，也能夠減少對寬帶資源的占用情況，這樣可以讓用戶更快的進入網(wǎng)頁，提升訪問效率。在使用SEI技術(shù)進行系統(tǒng)開發(fā)中，開展Web前端程序進行簡化處理，能夠?qū)崿F(xiàn)對加載中的無關(guān)問題進行處理，這樣用戶通過搜索進入網(wǎng)頁的時間會大大縮短。這種改善開發(fā)后，頁面訪問對于寬帶的占用也會顯著減少，這對于電腦運行而言也是一種優(yōu)化措施，可以讓電腦的存儲空間得到有效強化。從現(xiàn)階段的SEO發(fā)展情況來看，對Web前端的改善開發(fā)工作還處于探索階段，并沒有廣泛應(yīng)用到實際生產(chǎn)和生活中。

3.2 多項開發(fā)

針對Web前端開發(fā)技術(shù)進行多項開發(fā)，能夠促進Web前端運行性能顯著提升。如，進行Web前端運行的網(wǎng)絡(luò)協(xié)議進行開發(fā)，在完成IP地址以及DNS網(wǎng)址等輸入后，可以實現(xiàn)對IP地質(zhì)確認時間縮短，這對于提升Web前端開發(fā)水平具有重要作用。不過，多項開發(fā)也存在一定的缺陷，因為用戶對Web的運行過程會產(chǎn)生質(zhì)疑，且整體的速度也會不斷降低，因此，要想避免出現(xiàn)嚴(yán)重問題，必須要有效提升Web的更新進程。

3.3 兼容開發(fā)

開展Web前端兼容性開發(fā)，是針對目前一些瀏覽器兼容性不足問題提出的。在具體的計算機應(yīng)用過程中，用于可能使用多種不同瀏覽器，如果同時將這些瀏覽器都打開，那么Web前端的運行壓力會不斷提升，這樣操作的后果就是導(dǎo)致前端反應(yīng)速度延長，網(wǎng)頁的加載速度顯著降低，也會影響正常網(wǎng)速。而不同瀏覽器之間Web前端運作模式以及網(wǎng)絡(luò)速度方面并沒有顯著差異，但是具體的企業(yè)頁面加載方式是有一定不同的異。要想解決瀏覽器兼容問題，就需要開展兼容開發(fā)?？梢酝ㄟ^CSS編程技術(shù)應(yīng)用，對于Web前端的運行程序中進行多個相對無關(guān)聯(lián)的反應(yīng)程序設(shè)定，通過寬帶占用量以及反應(yīng)速率的微小差距，對于多個瀏覽器進行不同程度的Web前端處理。這種開發(fā)方向的針對性以及創(chuàng)新性比較突出，不過，因為我國的科研水平并不全面，市場穩(wěn)定性不足，所以Web前端運行模式不能廣泛應(yīng)用，這在一定程度上限制了相關(guān)行業(yè)的技術(shù)應(yīng)用和發(fā)展。

4 Web前端開發(fā)技術(shù)優(yōu)化方向

要對Web前端進行技術(shù)優(yōu)化并不容易，相關(guān)技術(shù)要求也會更加嚴(yán)格，但是目的是解決Web前端應(yīng)用中的不足和問題，讓用戶在使用中的滿意度不斷提升。在具體的Web前端開發(fā)中，很多時候開發(fā)者對于技術(shù)的優(yōu)化并不關(guān)注，但是實際上Web前端開發(fā)技術(shù)優(yōu)化對于系統(tǒng)應(yīng)用性能、系統(tǒng)使用效率都會產(chǎn)生很大影響。通過Web前端開發(fā)技術(shù)優(yōu)化，能夠有效減少用戶打開網(wǎng)頁時的加載速度，避免用戶長時間等待，提升用戶體驗滿意度，還能夠及時快速的響應(yīng)運用的相關(guān)操作，促進使用效率提升。此外，通過Web前端開發(fā)技術(shù)優(yōu)化，還能夠減少系統(tǒng)對服務(wù)器的請求測試，避免對寬帶的占用，這對于節(jié)約資源，提升使用效益也有積極作用。

4.1 對HTML頁面的優(yōu)化

在相關(guān)技術(shù)開發(fā)中，開發(fā)人員對Web前端頁面實施開發(fā)中，要確保同一網(wǎng)頁在不同設(shè)備中顯示，確保網(wǎng)頁和設(shè)備屏幕大小匹配，確保網(wǎng)頁效果好，提升用戶體驗度。一些網(wǎng)站針對這些問題的解決中，一般需要結(jié)合移動設(shè)備類型來設(shè)置不同版本的網(wǎng)頁，這樣會導(dǎo)致網(wǎng)頁維護工作量加大，也會增加開發(fā)難度。在對相應(yīng)前端頁面設(shè)計中，要實現(xiàn)對HTML頁面的優(yōu)化，可以借助HTML5技術(shù)應(yīng)用，實現(xiàn)自適應(yīng)設(shè)計目標(biāo)，將其應(yīng)用到Web前端開發(fā)中，可以解決同一網(wǎng)頁在不同設(shè)備屏幕中的適應(yīng)性問題。在具體開發(fā)過程中，第一步在HTML文檔中的標(biāo)簽屬性中輸入指令，再設(shè)置指令寬度，保持和屏幕寬度一致，同時，設(shè)置用戶禁止操作網(wǎng)頁。第二步是對于Web前端網(wǎng)頁寬度以及字體數(shù)值進行調(diào)整，這里不需要設(shè)置絕對數(shù)值，但是需要結(jié)合相對數(shù)值百分比來設(shè)置，相關(guān)字體設(shè)置上，一般使用相對值rem，這對于字體比例大小調(diào)整有一定幫助。此外，可以借助媒體查詢的方式對CSS樣式執(zhí)行，這樣可以確保查詢能夠結(jié)合具體的設(shè)備類型來進行差異化執(zhí)行。通過HTML5技術(shù)在Web前端開發(fā)設(shè)計中應(yīng)用具有很好的使用效果，相對于傳統(tǒng)的HTML5技術(shù)應(yīng)用，這類技術(shù)能夠更好的優(yōu)化系統(tǒng)，為開發(fā)工作提供便利，確保開發(fā)效果，提升頁面設(shè)計的可靠性和適應(yīng)性，促進系統(tǒng)開發(fā)效率顯著提升。

在網(wǎng)頁設(shè)計中，首先要確保網(wǎng)頁或者是網(wǎng)站的基本性能能夠?qū)崿F(xiàn)，其次是對于相應(yīng)視覺效果進行提升，這些都是影響用戶體驗的最關(guān)鍵問題。通過網(wǎng)頁展示相關(guān)圖片，播放視頻動畫等能夠讓用戶被吸引過來，增強視覺感受和體驗。但是，在具體的網(wǎng)頁設(shè)計中，用戶如果大量加載圖片或者是視頻的話，會發(fā)現(xiàn)網(wǎng)頁打開的速度會明顯減慢，網(wǎng)頁響應(yīng)差，這時候可能一部分用戶就會感受到不耐煩，直接關(guān)閉網(wǎng)頁。所以，在網(wǎng)頁設(shè)計中，需要考慮網(wǎng)頁打開時的第一屏的加載速度，要保證網(wǎng)頁能夠瞬間打開，展示在用戶面前，避免網(wǎng)頁用戶的流失。通過第一屏中的信息，吸引用戶進一步進行網(wǎng)頁瀏覽和操作，對其他圖片進行按需加載，提升網(wǎng)頁的加載效率和響應(yīng)速度。

4.2 HTTP請求的優(yōu)化

在網(wǎng)頁或者網(wǎng)站設(shè)計中，相關(guān)設(shè)計人員為了提升網(wǎng)頁吸引力，往往會使用華麗的圖片或者是效果圖來吸引用戶點擊，但是在網(wǎng)頁中設(shè)置多個挑戰(zhàn)環(huán)節(jié)會導(dǎo)致整體液面加載速度受到影響。所以，對于不同網(wǎng)頁內(nèi)容，需要確保腳本功能，并且確保頁面設(shè)計整體簡潔美觀，不需要進行大量華麗腳本的使用，避免影響加載速度，避免不必要的跳轉(zhuǎn)，提升響應(yīng)效率。

4.3 文件大小的優(yōu)化

在Web前端開發(fā)技術(shù)優(yōu)化中，還需要注意，網(wǎng)頁中的相關(guān)文件大小也是影響其加載速度和反映效率的關(guān)鍵因素之一，文件大小還會影響寬帶資源的占用率，所以，在Web前端開發(fā)技術(shù)過程中，需要針對這一問題進行思考。可以借助相關(guān)技術(shù)應(yīng)用或者是對文件中的不重要代碼進行刪除，這樣就可以有效降低文件所占的內(nèi)存，縮小文件，緩解網(wǎng)頁加載壓力，減少資源占用的情況發(fā)生。在具體應(yīng)用中，可以借助Java Script以及CSS文件的壓縮來讓文件體積減小。此外，還可以進一步優(yōu)化編程思路，借助有效的技術(shù)手段和方法等，促進代碼內(nèi)容的有效降低，借助相關(guān)技術(shù)手段來對冗余的代碼進行刪除，將HTML標(biāo)簽刪除，防止內(nèi)聯(lián)式樣式出現(xiàn)，促進CSS代碼的優(yōu)化處理。

4.4 DNS查詢的優(yōu)化

在DNS查詢過程中，需要經(jīng)歷漫長的解析過程，這一過程會消耗一定的時間，在DNS查詢完成前，網(wǎng)站不會對網(wǎng)址域名下的任何東西進行加載，可能會導(dǎo)致用戶體驗感降低，導(dǎo)致網(wǎng)站的使用效果大打折扣。所以，在Web前端開發(fā)技術(shù)優(yōu)化中，需要盡可能的減少DNS的查詢時間使用，促進網(wǎng)頁的加載速度不斷提升。相關(guān)頁面加載中，還應(yīng)該避免過于繁瑣的設(shè)計，避免用戶審美疲勞，而且繁瑣的設(shè)計也會導(dǎo)致頁面加載速度受到影響。所以在網(wǎng)頁設(shè)計中，必須要提升對其實用性的關(guān)注，確保網(wǎng)頁設(shè)計頁面簡潔大方，主體功能清楚明了，這樣可以確保網(wǎng)頁的大眾審美，也能夠保證網(wǎng)頁加載效率。

4.5 頁面設(shè)計的優(yōu)化

在進行網(wǎng)頁的頁面設(shè)計中，要確保頁面布局合理，文字圖片清晰，內(nèi)容表達布局清楚，防止頁面設(shè)計的過度華麗和繁瑣，避免用戶頁面使用中產(chǎn)生視覺疲勞，也是為了避免繁瑣的頁面內(nèi)容設(shè)計降低頁面加載速度。所以，基于Web前端開發(fā)技術(shù)應(yīng)用，進行網(wǎng)頁設(shè)計中，需要體現(xiàn)實用性，確保網(wǎng)頁設(shè)計整體簡潔，有明確主旨，大方得體。在進行頁面優(yōu)化設(shè)計中，要對于相應(yīng)的文件數(shù)量、大小、圖片規(guī)格等進行優(yōu)化設(shè)計。例如，對css，js文件數(shù)量及大小的優(yōu)化。對于css、js的優(yōu)化，可以使用外聯(lián)式模式來優(yōu)化處理?？紤]到相關(guān)頁面設(shè)計中，可能包含多樣化的內(nèi)容，這樣的頁面設(shè)計繁瑣性更強，具有多樣化特點，這樣的頁面設(shè)計中需要的css比較多。這需要在頁面設(shè)計中，對css的應(yīng)用提前做好規(guī)劃，多采取縮寫模式，避免占用更多的內(nèi)存空間。通過規(guī)劃，能夠在一定程度上減少對css的使用量，減少http請求數(shù)，js也是如此。此外，要降低重復(fù)代碼使用，就需要學(xué)會重復(fù)利用相關(guān)代碼。如，在網(wǎng)頁設(shè)計中對于頁面的背景圖進行優(yōu)化設(shè)計，可以對于背景圖進行靜態(tài)設(shè)置，如果網(wǎng)站中需要有內(nèi)容圖片，需要提前將其做好最優(yōu)化處理后，再進行上傳，因此，需要把握前端開發(fā)中的（背景）圖片修飾和優(yōu)化方法?？紤]到很多網(wǎng)頁設(shè)計中的背景圖片數(shù)量比較多，這會給服務(wù)器帶來影響，增加http請求數(shù)。對此，在使用css定義背景的情況下，可以聯(lián)合相關(guān)背景，這對于降低http請求數(shù)很有幫助，在具體操作中，需要對于圖片質(zhì)量進行控制，確保圖片大小合適。對于網(wǎng)頁操作和加載來說，圖片內(nèi)存小，可以方便用戶快速下載，而且這樣的圖片設(shè)計也能夠?qū)ζ髽I(yè)服務(wù)器寬帶發(fā)揮良性作用，提升寬帶運行效率。

目前，我國計算機技術(shù)水平都在不斷提升，且在我國的很多行業(yè)中都有一定程度的應(yīng)用，隨著計算機及其相關(guān)技術(shù)發(fā)展應(yīng)用范圍擴大，計算機應(yīng)用軟件也在不斷增多，所以，要做好對相應(yīng)軟件功能的完善。在相關(guān)軟件設(shè)計中，用戶界面設(shè)計是其中比較關(guān)鍵的部分，能夠為用戶提供一個舒適的操作環(huán)境，提升提升操作的舒適度和滿意度。在對于計算機用戶界面開展設(shè)計操作中，還需要主義做好相應(yīng)的界面布置以及顏色選擇等，確保圖像設(shè)計相關(guān)內(nèi)容精準(zhǔn)可靠，將頁面的空間科學(xué)合理的利用起來，避免空間浪費，但是也要避免空間布局過于擁擠，避免給用戶造成世界疲勞，這樣會導(dǎo)致頁面使用的體驗感大大降低。所以，需要對用戶界面進行完善，這樣可以促進用戶體驗感提升，促進界面評價效益不斷提升。

4.6 杜絕無用響應(yīng)

用戶在進行網(wǎng)站訪問中，經(jīng)常會遇到無響應(yīng)的情況，例如，訪問中常見的404錯誤或者是拒絕訪問錯誤問題，這種情況是因為系統(tǒng)沒有找到用戶想要的文件導(dǎo)致ID。在具體操作中，用戶的Http請求耗時較長，這種長時間的等待導(dǎo)致一個無用的響應(yīng)頁面出現(xiàn)，用戶想要的內(nèi)容不能及時被找出，用戶的體驗感會大大降低。對頁面鏈接開展測試，并對于Web服務(wù)器Errorr日志的不斷跟蹤，這些措施對于減少這些無響應(yīng)錯誤有積極作用。多數(shù)情況下，這種無響應(yīng)錯誤因為定位難度大，所以常常被技術(shù)人員忽視。

4.7 有效避免重定向

進行網(wǎng)頁重定向是需要消耗大量時間的，這樣會延長用戶網(wǎng)頁使用的等待時間。在進行重定向中可能會出現(xiàn)多種問題，每增加一次重定向就需要增加一次對Web的請求，因此，要盡量避免重定向操作。對此，相關(guān)系統(tǒng)開發(fā)技術(shù)人員需要對Web站點的子目錄后增加"/"，這樣的操作能夠有效減少系統(tǒng)重定向操作。

4.8 優(yōu)化網(wǎng)頁內(nèi)容

CSS代表層疊樣式表，層疊表明后面的CSS可以覆蓋前面的，高級的可以覆蓋低級的，這樣的瀏覽器開發(fā)設(shè)計中，頁面會再完全加載后才考慮渲染問題。結(jié)合CSS這種特性，要想對web進行優(yōu)化，可以嘗試將樣式表放在頂部。此外，還可以將script放在底部，這樣做是為了有效避免script腳本對當(dāng)前頁面產(chǎn)生阻礙，避免對系統(tǒng)下載速度的減緩，這樣液面加載時間可以有效縮短。

5 總結(jié)

Web前端開發(fā)技術(shù)對于用戶體驗以及網(wǎng)頁的使用效率有很大影響。以往的Web前端開發(fā)技術(shù)應(yīng)用中，往往忽視對這一開發(fā)技術(shù)的優(yōu)化，所以網(wǎng)頁使用中用戶體驗感不好，網(wǎng)頁反應(yīng)速度慢，甚至出現(xiàn)網(wǎng)頁卡死的情況，嚴(yán)重降低了用戶使用和操作滿意度。對此，本文基于Web前端開發(fā)問題提出了幾點優(yōu)化對策，分析了Web前端開發(fā)技術(shù)的基本內(nèi)涵和要點，探究Web前端開發(fā)技術(shù)的具體應(yīng)用，順著Web前端開發(fā)技術(shù)的應(yīng)用方向，不斷探索Web前端開發(fā)技術(shù)的優(yōu)化方向，真正促進Web前端開發(fā)效益提升。研究指出，需要進一步做好Web前端開發(fā)技術(shù)優(yōu)化工作，針對關(guān)鍵環(huán)節(jié)進行優(yōu)化處理，從對HTML頁面的優(yōu)化、HTTP請求的優(yōu)化、文件大小的優(yōu)化、DNS查詢的優(yōu)化等方面研究具體的優(yōu)化路徑。