魏鵬娟

（陜西交通職業(yè)技術(shù)學(xué)院 陜西省西安市 710000）

1 Web前端開發(fā)的關(guān)鍵技術(shù)

在前端技術(shù)發(fā)展與應(yīng)用中，有HTML、CSS、JavaScript 三種關(guān)鍵的技術(shù)，不同的語言代表著不同的使用環(huán)境，三者在代碼的編寫與使用的過程中，都會存在著不同的需求與差別，而隨著技術(shù)的發(fā)展，根據(jù)具體開發(fā)環(huán)境的要求，可以將三者聯(lián)合起來進行使用。

1.1 HTML技術(shù)

HTML 屬于XHTML/HTMLS 技術(shù)的統(tǒng)稱，但它們之間還存在著一定的區(qū)別，HTML 是一種比較標(biāo)準(zhǔn)的網(wǎng)頁標(biāo)記語言，不是網(wǎng)頁編程語言的一種，主要功能是保證網(wǎng)頁瀏覽器能夠正常的工作，利用瀏覽器能夠?qū)TML 語言進行翻譯，方便用戶能在網(wǎng)頁中閱讀。XHTML 是對HTML 語言的更新，將W3C 標(biāo)準(zhǔn)作為開發(fā)的標(biāo)準(zhǔn)，從而增強了網(wǎng)頁的互動性，增強了用戶的體驗效果，帶分頁的超文本格式(HTMLS)是HTML 進行更新之后的新一代標(biāo)準(zhǔn)語言，能夠嵌入不同格式的文本、圖片等，還能滿足當(dāng)前網(wǎng)頁開發(fā)中的最新需求。在Web 前端技術(shù)開發(fā)中主要采用的HTMLS 語言，能夠更加清晰的展示出網(wǎng)頁的開發(fā)結(jié)構(gòu)，與傳統(tǒng)的HTML 網(wǎng)頁語言相比，它在網(wǎng)頁開發(fā)中具有更強的功能，實現(xiàn)了網(wǎng)頁開發(fā)的更加簡潔與方便。而且，在現(xiàn)代移動設(shè)備上，利用HTMLS 可以輕易的實現(xiàn)移動網(wǎng)頁的設(shè)計與開發(fā)，采用HTML 語言很難滿足動態(tài)、移動的效果。通過具體的應(yīng)用設(shè)計中，可以發(fā)現(xiàn)HTMLS 具有更大的優(yōu)點，也能適合Web 操作的RIA 應(yīng)用前端開發(fā)。在的設(shè)計中，XHTML 擁有HTML 和HTMLS 之間的穿插性和通用性，而利用HLMLS 更能實現(xiàn)多元化的網(wǎng)頁設(shè)計效果。

1.2 CSS技術(shù)

CSS 樣式在網(wǎng)頁設(shè)計中應(yīng)用十分廣泛，所謂的CSS 是在HTML、XML 中設(shè)計的網(wǎng)頁中來展示某些應(yīng)用的文件樣式，屬于層疊樣式表，在Web 前端設(shè)計與開發(fā)中具有十分重要的作用，它能夠?qū)W(wǎng)頁樣式、內(nèi)容等進行分割，使動態(tài)網(wǎng)頁的個性更強，利用CSS 樣式開發(fā)Web 前端，能夠提高瀏覽器的運行速度，提高網(wǎng)頁的維護效率，從應(yīng)用的原理來分析，CSS 通過代碼重疊，可以將網(wǎng)頁格式代碼簡化，但它會將代碼的外部樣式保存在瀏覽器的緩存中，導(dǎo)致網(wǎng)頁的頁面過大，容易造成網(wǎng)頁下載顯示速度下降，導(dǎo)致網(wǎng)頁瀏覽的時間過長，在未來的CSS 樣式設(shè)計中，需要提升網(wǎng)頁的下載速度，將樣式的定義保存緩存屬性中，這樣用戶就能非常輕松的對網(wǎng)頁的樣式進行修改與管理，提高網(wǎng)頁設(shè)計的效率。

1.3 JavaScript技術(shù)

JavaScript 屬于一種直譯式腳本語言，它以事件驅(qū)動為基礎(chǔ)，從而能夠?qū)崿F(xiàn)網(wǎng)頁設(shè)計的多種形態(tài)，包括動態(tài)類型、弱類型、基于原型，JavaScript 作為一種腳本語言，可以忽略Web 服務(wù)器的限制，直接嵌入到HTML設(shè)計的網(wǎng)頁語言中，對用戶的輸入要求作出響應(yīng)，從而能提升動態(tài)網(wǎng)頁的交互性要求，而且JavaScript 語言對HTML網(wǎng)頁開發(fā)的環(huán)境依賴性要求較低，這樣JavaScript 能夠非常廣泛的應(yīng)用于現(xiàn)代Web 前端開發(fā)中，可以同瀏覽器來實現(xiàn)不同平臺之間的數(shù)據(jù)交換，方便用戶進行操作，并以最后的頁面呈現(xiàn)給用戶。

1.4 DOM技術(shù)

DOM 技術(shù)主要功能是為Web 頁面的設(shè)計提供標(biāo)準(zhǔn)的API，在Web 前端開發(fā)的過程中，具有十分重要的作用，它能將XML 文檔中的功能抽象為不同的節(jié)點，使之形成樹狀的結(jié)構(gòu)，然后將其進行分析，提高Web 頁面的交互性效果，也能夠?qū)崿F(xiàn)對網(wǎng)頁中的其他標(biāo)準(zhǔn)組件訪問，也能實現(xiàn)跨平臺之間的異構(gòu)頁面的訪問，通過設(shè)計對象OMG，來實現(xiàn)對網(wǎng)頁中的文檔對象與表示對象之間的定義與訪問分析。

1.5 AJAX技術(shù)

AJAX 技術(shù)是網(wǎng)頁設(shè)計中的動態(tài)交互與相互交互的關(guān)鍵技術(shù)，根據(jù)DOM 訪問的要求，來解決網(wǎng)頁頁面數(shù)據(jù)與服務(wù)器之間的關(guān)系，真正實現(xiàn)動態(tài)網(wǎng)頁的效果，而且利用AJAX 技術(shù)可以降低后臺與服務(wù)器之間的交互量，從而能夠使得網(wǎng)絡(luò)速度更快、更穩(wěn)定的進行更新，提高用戶的體驗效果。

1.6 flutter技術(shù)

在對HTML5 頁面進行渲染時，采用的應(yīng)用內(nèi)嵌瀏覽器控件WebView 的方式進行，雖然這種方法擴展了Web 渲染功能，但由于HTML5 頁面的渲染需要經(jīng)歷瀏覽器控件的加載、解析和渲染三大過程，對系統(tǒng)的內(nèi)存消耗比較大，在跨平臺使用時，受到了嚴(yán)重的限制。Flutter 采用跨平臺的UI 設(shè)計框架，從平臺的渲染邏輯、開發(fā)語言等進行融合，以減少平臺之間的差異，同時保持和原生開發(fā)一樣的高性能，提高Web 頁面的使用范圍，同時flutter 借助先進的工具鏈和編譯器，提高了Web 頁面的編輯效率，同時支持JIT 和AOT 的語言，在頁面設(shè)計完成后，可以快速的發(fā)布，而且頁面的執(zhí)行性能較好，在代碼執(zhí)行效率上可以媲關(guān)原生APP，在web 前端技術(shù)中得到了廣泛的應(yīng)用。

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

2.1 改善開發(fā)

改善網(wǎng)頁設(shè)計的開發(fā)環(huán)境，對促進Web 前端技術(shù)的發(fā)展十分重要，利用可以采用SEO 技術(shù)改進Web 網(wǎng)頁前端的頁面運行時間管理的方法，進而能降低Web 前端頁面的大小，從而降低頁面的反應(yīng)時間，提高網(wǎng)絡(luò)帶寬的使用效率，進而能夠節(jié)省網(wǎng)頁的調(diào)用時間，還能夠降低電腦的存儲空間，提高Web 頁面文件的加載速度。還可以運用SEI(附加增強信息Supplemental Enhancement Information)技術(shù)，對Web 前端的程序設(shè)計進行優(yōu)化，減少頁面加載過程中容易出現(xiàn)的無關(guān)影響因素，將HTML 請求和URL 的訪問進行簡化處理，從而能夠提高網(wǎng)頁調(diào)用的效率。

2.2 多項開發(fā)

利用多項開發(fā)技術(shù)可以對Web 前端運用的性能進行優(yōu)化處理，例如能夠提高Web 前端頁面的開發(fā)與運行機制，改善Web 前端通信運行的網(wǎng)絡(luò)協(xié)議、IP 地址和DNS 網(wǎng)址通信協(xié)議等輸入，在默認(rèn)DNS 網(wǎng)址服務(wù)的同時，并用戶的IP 地址進行分析，從而能減少Web 前端頁面的運行時間，提高用戶與網(wǎng)絡(luò)服務(wù)器之間的通信效率，提高整個網(wǎng)絡(luò)的運行速度，優(yōu)化Web 前端設(shè)計效果。

2.3 兼容開發(fā)設(shè)計

由于在不同的網(wǎng)絡(luò)環(huán)境中，往往需要Web 網(wǎng)頁的跨平臺操作，對于Web 前端的兼容性開發(fā)，目標(biāo)是解決不同服務(wù)器、瀏覽器不能兼容的問題，如果用戶在工作時，同時打開多個瀏覽器，就會增加Web 前端的運行壓力，就會導(dǎo)致網(wǎng)頁下載的速度過慢，影響網(wǎng)頁的加載速度，也會導(dǎo)致在不同的瀏覽器之間切換時，影響網(wǎng)頁的應(yīng)用效果。為了改善瀏覽器無法兼容的情況，在具體的設(shè)計中，需要采用兼容性設(shè)計的方法來提高網(wǎng)頁瀏覽的效果。

（1）采用CSS 樣式技術(shù)，對Web 前端的運行程序進行改善，并對網(wǎng)頁的運行速度進行優(yōu)化處理；

（2）運用HTML 技術(shù)在Web 前端的運行程序內(nèi)設(shè)立多個相互關(guān)聯(lián)的反應(yīng)控制程序，利用寬帶的占用量縮小網(wǎng)頁瀏覽中的時間差異，對多個瀏覽器進行處理，采用這種方面能夠提高Web 前端網(wǎng)頁設(shè)計的效率，提高網(wǎng)頁應(yīng)用的廣泛性。

3 Web前端技術(shù)優(yōu)化策略

由于動態(tài)網(wǎng)頁設(shè)計需要滿足用戶多元化的需求與交互操作的要求，提高用戶的體驗，同時還要降低網(wǎng)頁的大小，能夠快速響應(yīng)用戶的要求，提高網(wǎng)絡(luò)通信的效率，這就需要對Web 前端技術(shù)進行優(yōu)化，以滿足用戶的需求。

3.1 在優(yōu)化HTML頁面的設(shè)計

HTML、CSS、JavaScript 是Web 前端設(shè)計的關(guān)鍵技術(shù)，在對其進行優(yōu)化時，必須要提高幾種語言的應(yīng)用，HTML 作為前端的組織框架，必須要保證頁面的架構(gòu)清晰、代碼簡化，盡可能的減少一些空屬性的問題，并減少頁面文檔對象模型的節(jié)點，提高頁面的渲染與運行速度，對CSS 進行優(yōu)化只要是避免代碼的重復(fù)，減少總體的代碼量，盡量避免使用CSS 符層級，采用CSS 的重疊性，可以將CSS 放在頂部，利用瀏覽器的先完全加載信息，后在進行內(nèi)容渲染的特性，可以達(dá)到對CSS 優(yōu)化的目標(biāo)。在前端開發(fā)具有多元化的動態(tài)特性，在程序調(diào)用時，盡量減少全局變量的使用，為避免重復(fù)調(diào)用程序，盡量不使用function、with、eval 等功能，并刪除重復(fù)的JS，提高程序的調(diào)用效率，同時在Web 頁面設(shè)計時，將JavaScript 放在底部，防止頁面腳本加載時間過長，而導(dǎo)致頁面阻塞的問題，降低頁面加載總量。

3.2 在減小文件大小方面

如果動態(tài)網(wǎng)頁設(shè)計的內(nèi)容過多，容量過大，就會影響網(wǎng)頁的下載速度，而且網(wǎng)頁的文件越大，網(wǎng)頁的加載速度越慢，為了提供網(wǎng)絡(luò)帶寬的利用效率，需要對網(wǎng)頁的設(shè)計邏輯、功能等進行組件化的設(shè)計，在需要時可以隨時調(diào)用，例如，在頁面制作倒計時工具時，可以利用if 語句、動畫、路徑功能等做成組件，提高單個設(shè)計結(jié)構(gòu)的可移植性，便于后期進行設(shè)計優(yōu)化與調(diào)用，在具體的設(shè)計中需要做好代碼的核心功能保護，以免誤刪或者遺失。目前，主要采用JavaScript 應(yīng)用程序來開發(fā)組件，并利用CSS 樣式技術(shù)對文件代碼進行壓縮，從而達(dá)到減少文件的目的。例如，可以通過優(yōu)化Cookie，減少不必要的Cookie，防止Cookie 存儲的信息量過大，增加網(wǎng)頁的加載速度，提升網(wǎng)頁的響應(yīng)速度，可以通過設(shè)計過期時間，退出刪除Cookie，這就可以有效的避免在下次打開網(wǎng)頁時，相關(guān)存儲的信息發(fā)送給服務(wù)器。

3.3 在減少HTTP請求方面

在動態(tài)網(wǎng)頁設(shè)計的過程中，有的工作人員為了達(dá)到良好的視覺效果，在設(shè)計過程中添加了一些繁瑣的操作步驟，如何不能有效的對這些繁瑣的步驟進行刪減，就會造成HTTP 在頁面請求的時間過長，也會導(dǎo)致HTTP 請求時間過長，給網(wǎng)站的運行承受了更大的負(fù)荷，而在有時還會出現(xiàn)一些不必要的窗口，影響著網(wǎng)頁加載的速度。為了提高網(wǎng)頁加載的速度，在Web 頁面設(shè)計的過程中，需要設(shè)計人員能夠轉(zhuǎn)變思路，采用組件加載的方法來提高網(wǎng)頁的設(shè)計效果，保證網(wǎng)頁的功能能夠齊全，提高網(wǎng)頁操作的效果。

3.4 在縮短DNS查詢次數(shù)與時間方面

DNS 對網(wǎng)頁的加載速度影響十分明顯，在目前的Web 設(shè)計運行過程中，DNS 在網(wǎng)頁加載影響十分明顯，有的甚至經(jīng)過了很長時間的加載也不能進入網(wǎng)站，影響著用戶的體驗效果，也降低了網(wǎng)頁的用戶訪問量，這對企業(yè)網(wǎng)站的瀏覽量的提升帶來了不利的影響。由于大部分用戶在等待時間過長之后，不能順利的加載網(wǎng)頁，也就放棄等待，這樣就會減少網(wǎng)頁的整體訪問效果與瀏覽量，阻礙網(wǎng)站的進一步發(fā)展。因此，在Web 網(wǎng)頁設(shè)計時，需要采用相應(yīng)的措施來縮短DNS 的查詢時間與次數(shù)，例如使用Keep-Live 和較少的域名提高瀏覽效果，減少DNS 查找，提高網(wǎng)頁的加載速度，使用戶獲得更好的體驗效果，增加網(wǎng)頁的瀏覽量。

3.5 在加強頁面優(yōu)化設(shè)計方面

大部分Web 網(wǎng)頁設(shè)計為了提高瀏覽量，提升網(wǎng)站的熱度，都設(shè)計良好的頁面布局，提升用戶的體驗效果。但是，在具體的設(shè)計中，有很多Web 網(wǎng)頁的設(shè)計難以起到吸引用戶的效果，主要原因在于設(shè)計人員設(shè)計理念沒有結(jié)合用戶體驗的要求，創(chuàng)新水平受到了網(wǎng)頁固定設(shè)計的影響，或者在設(shè)計Web 網(wǎng)頁時注重頁面的視覺效果，忽視了網(wǎng)頁的實用性效果，導(dǎo)致Web 網(wǎng)頁的整體設(shè)計沒有體現(xiàn)出良好的效果。為了達(dá)到Web 網(wǎng)頁優(yōu)化的效果，在設(shè)計時，需要綜合考慮網(wǎng)站的實用性效果，認(rèn)真分析用戶的心理效果，吸收現(xiàn)代文化元素，對Web 網(wǎng)頁的設(shè)計框架進行創(chuàng)新，提高網(wǎng)頁服務(wù)性，將網(wǎng)站的內(nèi)容進行精簡與濃縮，提高用戶的體驗效果，達(dá)到網(wǎng)頁設(shè)計優(yōu)化的效果。

4 結(jié)束語

隨著移動技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用，如何有效的提高Web 網(wǎng)頁的瀏覽效果，需要設(shè)計者能夠用戶體驗的角度出發(fā)，加強對Web前端開發(fā)技術(shù)的應(yīng)用進行研究與分析，在具體的設(shè)計過程中，需要充分了解JavaScript、HTML、CSS 等設(shè)計語言的關(guān)鍵應(yīng)用，切實掌握了解各種及時的應(yīng)用特性，進而才能有效地應(yīng)對當(dāng)前Web 前端開發(fā)遇到的問題，而且在Web 網(wǎng)頁設(shè)計的過程中，要將現(xiàn)代文化元素融入到網(wǎng)頁設(shè)計中，并且注意不斷提升設(shè)計開發(fā)人員的專業(yè)素質(zhì)，從而能夠達(dá)到Web 優(yōu)化設(shè)計的目標(biāo)。