淺談Web前端開發(fā)技術(shù)以及優(yōu)化

高慧

當(dāng)今世界是一個(gè)信息化時(shí)代，互聯(lián)網(wǎng)的發(fā)展程度能夠在一定程度上體現(xiàn)人類的自動(dòng)化生產(chǎn)和數(shù)字化水平，因此各個(gè)國家也在全力提高本國的信息化技術(shù)創(chuàng)新水平。此外，隨著電子商務(wù)行業(yè)的迅速發(fā)展，Web前端開發(fā)技術(shù)的改良可以更好的為用戶服務(wù)。所以，相關(guān)信息技術(shù)專業(yè)人才也在不斷加強(qiáng)對(duì)Web前端開發(fā)技術(shù)的研究與優(yōu)化。

一、Web 前端開發(fā)技術(shù)的大致情況

（一）瀏覽器兼容問題

通過市場(chǎng)調(diào)查發(fā)現(xiàn)，當(dāng)前我國互聯(lián)網(wǎng)用戶使用頻率較高的瀏覽器主要有4個(gè)，分別是IE、百度、360和火狐瀏覽器，但由于技術(shù)缺陷，幾個(gè)瀏覽器之間經(jīng)常存在兼容的問題，這是目前我們亟需解決的。除此之外，由于互聯(lián)網(wǎng)的快速發(fā)展，瀏覽器的種類也隨之增多，且因?yàn)闊o法兼容，所以即使是同一代碼，不同瀏覽器會(huì)呈現(xiàn)出大相徑庭的解析結(jié)果。為了暫時(shí)解決這一問題，很多瀏覽器只能具體問題具體分析，對(duì)各個(gè)不同瀏覽器進(jìn)行研發(fā)和調(diào)試。因此，究竟怎樣才能在Web前端研發(fā)中徹底解決這一問題，成了困擾很多程序開發(fā)者的難題。

（二）Web 前端開發(fā)語言

通常情況下，Web 前端開發(fā)技術(shù)擁有3種比較重要的支柱型語言，它們分別是JavaScript、HTML和CSS，它們分工明確，各有各的開發(fā)任務(wù)。JavaScript的作用主要是在語言匯編時(shí)精確地把內(nèi)容和代碼完全分隔開，通過這樣的方式規(guī)避兼容問題的發(fā)生；HTML則負(fù)責(zé)對(duì)各類圖形進(jìn)行適當(dāng)?shù)男拚驼{(diào)整，這種語言在不久的將來很有可能取代flash；CSS主要負(fù)責(zé)的是網(wǎng)頁的外觀，我們?cè)跒g覽網(wǎng)頁過程中經(jīng)常看到的陰影、透明特效等炫酷的效果都是通過這種技術(shù)實(shí)現(xiàn)的。

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

隨著技術(shù)的進(jìn)步和發(fā)展，互聯(lián)網(wǎng)用戶對(duì)網(wǎng)絡(luò)的使用要求也隨之不斷提高，因此，程序員必須針對(duì)用戶的具體要求對(duì)信息技術(shù)進(jìn)行優(yōu)化，這樣做的最終目的就是為用戶提供更優(yōu)質(zhì)的體驗(yàn)。為了達(dá)到最佳體驗(yàn)效果，網(wǎng)絡(luò)技術(shù)開發(fā)人員通常會(huì)采用更先進(jìn)、更成熟的技術(shù)，而不是在原有基礎(chǔ)上進(jìn)行簡單的改良。通常情況下，優(yōu)化技術(shù)主要有以下幾種：

（一）縮減文件的大小

互聯(lián)網(wǎng)的加載速度在一定程度上取決于文件的大小，兩者之間呈正相關(guān)關(guān)系。所以，如果暫時(shí)不考慮更換寬帶，那么要想加快網(wǎng)速就不得不縮減文件的大小。實(shí)際上，這種方法就是對(duì)現(xiàn)有的代碼進(jìn)行簡單的刪減和進(jìn)一步的整合。在這個(gè)過程中一定要盡可能地避免破壞核心工程，否則會(huì)使用戶的體驗(yàn)更差。目前認(rèn)可度較高的是通過JavaScript應(yīng)用程序亦或是CSS文件對(duì)這些代碼壓縮，除此之外，信息技術(shù)工作者也可以從專業(yè)的角度對(duì)這些代碼進(jìn)行二次刪減，從根本上避免出現(xiàn)內(nèi)聯(lián)式樣式，真正縮減文件的大小。

（二）縮減 HTTP 請(qǐng)求

造成網(wǎng)頁加載速度慢的原因很多，一是程序設(shè)計(jì)工作人員在網(wǎng)頁開發(fā)過程中一味追求視覺體現(xiàn)，并且不注重代碼的優(yōu)化，這就使得HTTP的請(qǐng)求數(shù)量不斷增多，其次是程序設(shè)計(jì)工作人員的經(jīng)驗(yàn)不足，無法進(jìn)一步優(yōu)化相應(yīng)的代碼。在這樣的情況下，用戶要想到達(dá)目標(biāo)網(wǎng)頁，就必須經(jīng)過多次繁瑣的跳轉(zhuǎn)，這在很大程度上減緩了網(wǎng)頁的加載速度。要想避免此類問題的發(fā)生，就必須加強(qiáng)對(duì)程序員的培訓(xùn)，轉(zhuǎn)變其思路，讓其在設(shè)計(jì)過程中盡量做到精簡，從而設(shè)計(jì)出簡單流暢的網(wǎng)頁。

（三）AJAX的工作原理及開發(fā)

第一，工作原理。通過和傳統(tǒng)的Web應(yīng)用進(jìn)行深入的對(duì)比可以發(fā)現(xiàn)，當(dāng)前比較受歡迎的AJAX的Web應(yīng)用選用的方式屬于“異步交互”，使用者可以通過一定的方法在客戶端中導(dǎo)入先進(jìn)的AJAX引擎，通過這樣的方式使用戶的操作不需要再頻繁的向終端傳導(dǎo)，只要將相應(yīng)的搜索內(nèi)容輸入到AJAX中即可，這樣可以大大提升網(wǎng)頁的運(yùn)行速度，使得運(yùn)行環(huán)境可以獲得進(jìn)一步調(diào)整和優(yōu)化。

第二，開發(fā)過程。憑借著簡單的程序和操作，AJAX技術(shù)逐漸獲得越來越多人的認(rèn)可，國家各有關(guān)部門也全力支持其發(fā)展。絕大多數(shù)程序員不必投入較多時(shí)間便可以完全掌握AJAX，通常情況下AJAX客戶終端會(huì)通過內(nèi)部程序自行將請(qǐng)求發(fā)送到瀏覽器，并在此過程中與Visual Studio的研發(fā)環(huán)境快速銜接，完成數(shù)據(jù)收集、編譯等一系列過程。

三、優(yōu)化Web前端技術(shù)的方式方法

（一）優(yōu)化HTHL頁面

總的來說，一個(gè)瀏覽器的典型特點(diǎn)可以通過HTHL頁面反映出來，它既能夠讓用戶獲得最佳的視覺體驗(yàn)，同時(shí)也可以在一定程度上保障網(wǎng)頁的基本性能。在對(duì)HTHL頁面進(jìn)行優(yōu)化的過程中，要進(jìn)行多方面綜合考慮，既要確保單一頁面能夠呈現(xiàn)出高質(zhì)量的內(nèi)容，同時(shí)也要考慮要所有頁面的內(nèi)容是一個(gè)統(tǒng)一的整體。盡可能地確保用戶能夠被頁面的設(shè)計(jì)和內(nèi)容所吸引，避免用戶看到一半便覺得乏味無趣而離開。

（二）縮減文件大小

互聯(lián)網(wǎng)的加載速度在一定程度上取決于文件的大小，兩者之間呈正相關(guān)關(guān)系。所以，如果暫時(shí)不考慮更換寬帶，那么要想加快網(wǎng)速就不得不縮減文件的大小。實(shí)際上，這種方法就是對(duì)現(xiàn)有的代碼進(jìn)行簡單的刪減和進(jìn)一步的整合。但在這個(gè)過程中一定要盡可能地避免破壞核心工程，否則會(huì)因?yàn)橐恍┎徽_的操作而致使文件無法打開。目前認(rèn)可度較高的是通過JavaScript應(yīng)用程序亦或是CSS文件對(duì)這些代碼壓縮，在這個(gè)過程中也可以適當(dāng)?shù)膭h除一些多余的代碼，從根本真正縮減文件的大小。

（三）縮減HTTP請(qǐng)求

HTTP 請(qǐng)求之所以多，最核心的原因還是程序設(shè)計(jì)人員在設(shè)計(jì)網(wǎng)頁時(shí)為了追求視覺效果而添加的一些繁瑣的操作，但是由于經(jīng)驗(yàn)不足，無法對(duì)這些步驟進(jìn)行精簡，從而給網(wǎng)站帶來更大的負(fù)荷和壓力，總在不必要時(shí)彈出一些可有可無的窗口，從而直接導(dǎo)致網(wǎng)頁的加載速度過慢。為了避免類似情況一再出現(xiàn)，就必須加強(qiáng)對(duì)程序員的培訓(xùn)，轉(zhuǎn)變其思路，讓其在設(shè)計(jì)過程中盡量做到精簡，從而設(shè)計(jì)出簡單流暢的網(wǎng)頁。

（四）縮短DNS的查詢時(shí)間

通過調(diào)查發(fā)現(xiàn)，DNS的查詢時(shí)間通常比較長，有時(shí)即便是通過長時(shí)間的加載依然無法順利進(jìn)入網(wǎng)站，很多用戶會(huì)由于長時(shí)間的等待而放棄進(jìn)入網(wǎng)頁，這樣一來就會(huì)大大減少網(wǎng)頁的整體訪問量，阻礙網(wǎng)站的進(jìn)一步發(fā)展。因此，假如通過一系列的措施和方法能夠減短DNS的查詢時(shí)間，這樣會(huì)使得用戶的體驗(yàn)效果更佳，更愿意訪問相關(guān)網(wǎng)站。

（五）優(yōu)化頁面設(shè)計(jì)

一個(gè)網(wǎng)站的網(wǎng)頁就好比是一家店鋪的裝修，好的布局往往會(huì)吸引大量用戶的點(diǎn)擊和瀏覽，提升用戶的使用效果。但遺憾的是，當(dāng)前絕大多數(shù)網(wǎng)站都無法很好的進(jìn)行網(wǎng)頁設(shè)計(jì)，很多設(shè)計(jì)人員缺乏創(chuàng)新，無法改變傳統(tǒng)的想法和理念，在規(guī)劃時(shí)只是單純的追求視覺效果，而忽視了網(wǎng)站的實(shí)用性，這是不可取的。我們?cè)谶M(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)既要抓住用戶的心理，假如一些吸引人的元素，但同樣要注重網(wǎng)站的實(shí)用性，始終將為客戶服務(wù)放在第一位，從客戶的角度出發(fā)，根據(jù)實(shí)際需求設(shè)計(jì)網(wǎng)頁。最簡單易行的方法就是做到簡單、精致，讓客戶能快速找到自己需要的內(nèi)容，從而獲得良好的使用體驗(yàn)。

四、結(jié)束語

總而言之，互聯(lián)網(wǎng)的快速發(fā)展是一種趨勢(shì)，人們的生產(chǎn)生活終將離不開網(wǎng)絡(luò)，因此，對(duì)Web前端的進(jìn)一步開發(fā)和研究是十分必要的。在正式進(jìn)行研發(fā)前，應(yīng)當(dāng)對(duì)JavaScript 、HTML、CSS等3種語言進(jìn)行全方位的了解，只有掌握了它們的特征，才能游刃有余的解決開發(fā)時(shí)可能遇到的各種各樣讓人措手不及的問題，從而達(dá)到縮減文件大小、縮減HTTP 請(qǐng)求、優(yōu)化頁面設(shè)計(jì)的終極目標(biāo)。除此之外，程序設(shè)計(jì)者也要始終遵循終身學(xué)習(xí)的態(tài)度，積極主動(dòng)的提升自身綜合素質(zhì)，摸索更多有利于Web 前端開發(fā)的方法和策略。

作者單位：南京萊斯信息技術(shù)股份有限公司