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

魏鵬娟

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

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

在前端技術(shù)發(fā)展與應(yīng)用中，有HTML、CSS、JavaScript 三種關(guān)鍵的技術(shù)，不同的語言代表著不同的使用環(huán)境，三者在代碼的編寫與使用的過程中，都會(huì)存在著不同的需求與差別，而隨著技術(shù)的發(fā)展，根據(jù)具體開發(fā)環(huán)境的要求，可以將三者聯(lián)合起來進(jì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 語言進(jìn)行翻譯，方便用戶能在網(wǎng)頁中閱讀。XHTML 是對(duì)HTML 語言的更新，將W3C 標(biāo)準(zhǔn)作為開發(fā)的標(biāo)準(zhǔn)，從而增強(qiáng)了網(wǎng)頁的互動(dòng)性，增強(qiáng)了用戶的體驗(yàn)效果，帶分頁的超文本格式(HTMLS)是HTML 進(jìn)行更新之后的新一代標(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ā)中具有更強(qiáng)的功能，實(shí)現(xiàn)了網(wǎng)頁開發(fā)的更加簡潔與方便。而且，在現(xiàn)代移動(dòng)設(shè)備上，利用HTMLS 可以輕易的實(shí)現(xiàn)移動(dòng)網(wǎng)頁的設(shè)計(jì)與開發(fā)，采用HTML 語言很難滿足動(dòng)態(tài)、移動(dòng)的效果。通過具體的應(yīng)用設(shè)計(jì)中，可以發(fā)現(xiàn)HTMLS 具有更大的優(yōu)點(diǎn)，也能適合Web 操作的RIA 應(yīng)用前端開發(fā)。在的設(shè)計(jì)中，XHTML 擁有HTML 和HTMLS 之間的穿插性和通用性，而利用HLMLS 更能實(shí)現(xiàn)多元化的網(wǎng)頁設(shè)計(jì)效果。

1.2 CSS技術(shù)

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

1.3 JavaScript技術(shù)

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

1.4 DOM技術(shù)

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

1.5 AJAX技術(shù)

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

1.6 flutter技術(shù)

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

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

2.1 改善開發(fā)

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

2.2 多項(xiàng)開發(fā)

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

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

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

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

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

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

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

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

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

3.2 在減小文件大小方面

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

3.3 在減少HTTP請(qǐng)求方面

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

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

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

3.5 在加強(qiáng)頁面優(yōu)化設(shè)計(jì)方面

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

4 結(jié)束語

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