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

胡穎航

在Web 1.0時代只有網(wǎng)頁制作，網(wǎng)站的內(nèi)容還只是靜態(tài)的，用戶上網(wǎng)也只是為了獲取信息。在2005年以后，Web2.0時代來臨，網(wǎng)頁制作發(fā)展為Web前端開發(fā)，主要是網(wǎng)站開發(fā)、優(yōu)化以及完善的工作，通過運(yùn)用HTML、CSS等技術(shù)讓網(wǎng)站呈現(xiàn)的頁面更加的美觀，網(wǎng)站功能更加強(qiáng)大。各種IT企業(yè)例如騰訊、淘寶等都因此進(jìn)行了網(wǎng)站重構(gòu)，由前端技術(shù)驅(qū)動代替數(shù)據(jù)展現(xiàn)驅(qū)動，網(wǎng)站重構(gòu)的影響力正以驚人的速度增長。

一、Web前端開發(fā)技術(shù)

進(jìn)行Web前端開發(fā)技術(shù)時主要運(yùn)用HTML、CSS、Ajax以及文檔對象模型等。其中，HTML，CSS，JavaScript是最主要的。這三種語言相互之間有著密切的聯(lián)系，但是又有各自不同的特點(diǎn)，對于代碼的質(zhì)量要求也不同。

1.HTML和HTML5

HTML是網(wǎng)頁制作必備的一種標(biāo)記語言，也是一種規(guī)范，一種標(biāo)準(zhǔn)。HTML是通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分，也是網(wǎng)頁的本質(zhì)，它通過結(jié)合使用其他的包括腳本語言、公共網(wǎng)關(guān)接口等Web技術(shù)可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，我們說HTML是Web編程的基礎(chǔ)。HTML有以下幾個特點(diǎn)：第一，簡易性。因?yàn)樗捎玫氖浅绞剑栽赪eb前端開發(fā)中會更加的靈活方便;其次，擴(kuò)展性。HTML的應(yīng)用帶來了加強(qiáng)的功能，增加了標(biāo)識符等要求，為系統(tǒng)擴(kuò)展帶來了保證;第三，通用性。正是因?yàn)檫@些特點(diǎn)，HTML才成為Web前端開發(fā)技術(shù)。

而HTML5是Web中核心語言HTML的規(guī)范。通過HTML5生成的網(wǎng)頁相比較而言，更便于管理，在結(jié)構(gòu)上更加的清楚和明確，它在結(jié)構(gòu)上取消了一些過時的標(biāo)記，分離了一些內(nèi)容和展示，整個頁面更加的干凈，提高了用戶的體驗(yàn)感。同時在如今的互聯(lián)網(wǎng)時代，移動設(shè)備端成為了主流，HTML5在移動設(shè)備端中的優(yōu)勢更加明顯，更加有利于Web的前端開發(fā)。

2. 層疊樣式表

層疊樣式表也就是CSS，英文全稱是Cascading Style Sheets CSS，是第一個含有“層疊”豐意的樣式表語言，這種層疊的方式可以加入設(shè)計(jì)者甚至用戶的想法，在設(shè)計(jì)時具有獨(dú)特性和豐富性。CSS主要有以下幾個優(yōu)點(diǎn)：（1）減少頁面代碼，提高頁面瀏覽的速度;（2）強(qiáng)大的字體控制能力和排版能力。（3）更好的控制頁面布局，表現(xiàn)和內(nèi)容相分離，可以減少未來網(wǎng)頁無效的可能。（4）更方便搜索引擎的搜索。（5）縮短改版時間，降低維護(hù)費(fèi)用。（6）可以一次設(shè)計(jì)隨處發(fā)布。

3.JavaScript

在1995年，由Netscape公司在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。JavaScript的出現(xiàn)讓信息與用戶之間的關(guān)系發(fā)生了變化，用戶不再只是瀏覽信息，而是可以進(jìn)行實(shí)時的互動，能夠自己發(fā)布信息，進(jìn)行可交式的表達(dá)。同時，它可以被嵌入到HTML文件中去，在用戶瀏覽網(wǎng)站時不需要經(jīng)過Web服務(wù)器，就可以直接快速的作出響應(yīng)，減少了服務(wù)器端的壓力，也減少了用戶等待的時間，大大提高了效率。

二、Web前端開發(fā)技術(shù)的優(yōu)化分析

一個網(wǎng)站想要取得成功需要具備三個要素：能夠吸引用戶的美觀的頁面設(shè)計(jì)，能夠讓用戶滿意的服務(wù)功能以及完善的性能與功能。其中，最關(guān)鍵的就是網(wǎng)站的性能與功能。為此，本文就性能方面提出幾個前端優(yōu)化的途徑。

1.減少HTTP請求

HTTP請求是一個漫長而且復(fù)雜的過程，從DNS尋址到服務(wù)器的建立和連接，從數(shù)據(jù)的發(fā)送到服務(wù)器的響應(yīng)以及數(shù)據(jù)的接收，這些都會消耗很多時間。同時每一個請求都是攜帶數(shù)據(jù)的，一個瀏覽器的請求數(shù)量也有上限，因此，整個HTTP請求的效率低下，會占用用戶大量的時間，從而影響用戶的體驗(yàn)。因此，減少HTTP請求是最重要也是最有效的一條策略，有以下幾個途徑：（1）合并文件;（2）圖片地圖;（3）內(nèi)聯(lián)圖像;（4）CSS Sprites;（5）gzip壓縮資源;（6）合并內(nèi)容型網(wǎng)頁的靜態(tài)資源;（7）合理設(shè)置緩存;（8）將復(fù)用率低的css和js文件直接寫在頁面中;（9）對于不易改變的靜態(tài)文件嗎，可將其expires時間設(shè)置的較大，將資源的MD5值作為其路徑后綴。

2.減少文件的大小

減少文件大小有兩個途徑：（1）通過壓縮JavaScript和CSS文件。（2）去除贅余的HTML標(biāo)簽。（3）進(jìn)行CSS代碼優(yōu)化和內(nèi)聯(lián)式優(yōu)化

3.改變樣式表和script的位置

層疊式樣式表中的“層疊”的意思就是一個覆蓋一個，在CSS中后面的會覆蓋前面的，高級別會覆蓋低級別的，將樣式表放在頂部可以提高CSS的加載速度。所以在用戶進(jìn)入一個網(wǎng)站時，我們應(yīng)該盡快將CSS加載完畢，避免屏幕出現(xiàn)空白，讓用戶可以快速瀏覽到頁面信息。

而在運(yùn)行過程中，script腳本的執(zhí)行會影響頁面的下載，因此將script放在底部，可以避免這個現(xiàn)象，從而提高頁面組件的下載，提高網(wǎng)站的性能。

4.避免重定向

重定向就是將各種網(wǎng)絡(luò)請求重新定個方向轉(zhuǎn)到其它位置，而每增加一個重定向都會增加一次Web請求，這個工程同樣會消耗掉一部分時間。在Web前端技術(shù)開發(fā)時，減少甚至避免網(wǎng)頁的重定向是一個有效且簡單的策略，例如在Web的子目錄后面加一個“/”就能避免一次重定向，節(jié)約一次時間了。

5.減少“404”錯誤

我相信我們在瀏覽網(wǎng)頁時最常碰到的一個問題就是加載了許久，頁面上出來一個“404”，于是對于這個網(wǎng)頁好感度盡失。這個“404”的出現(xiàn)是因?yàn)闉g覽器未找到文件，為了減少這個現(xiàn)象的出現(xiàn)，我們需要對頁面的鏈接多次進(jìn)行測試，對Web服務(wù)器進(jìn)行日常跟蹤;檢查url是否對應(yīng)，服務(wù)器端口號，映射的url，參數(shù)是否對應(yīng);檢查容器是否初始化，如：注解是否正確，配置文件是否掃描到;檢查配置文件，如：web.xml，關(guān)鍵詞是否對應(yīng)，或者有沒有寫;檢查虛擬機(jī)，查看ip地址是否正確，以及虛擬機(jī)是否開啟等這些措施都能夠有效的減少“404”錯誤，提高用戶好感。

結(jié)語

互聯(lián)網(wǎng)絡(luò)的發(fā)展是離不開Web的，而Web前端技術(shù)開發(fā)也一直在發(fā)展與創(chuàng)新的道路上，例如HTML5，XHTML這一系列新的技術(shù)。未來系統(tǒng)Web運(yùn)行環(huán)境將成為新的標(biāo)準(zhǔn)化應(yīng)用承載平臺，與原有應(yīng)用進(jìn)行取其精華，去其槽粕，共同構(gòu)成一個全興的應(yīng)用生態(tài)系統(tǒng)，促進(jìn)移動互聯(lián)網(wǎng)的發(fā)展。

參考文獻(xiàn)

[1]陳月，秦福建. Web前端開發(fā)技術(shù)以及優(yōu)化方向探究[J].信息與電腦（理論版），2016（4）：35-35.

[2]陳鯡. Web前端開發(fā)技術(shù)以及優(yōu)化方向分析[J].新媒體研究，2015（3）：39-40.

[3]許舟鴻. Web前端開發(fā)技術(shù)以及優(yōu)化方向探究[J].信息與電腦（理論版），2017（8）：33-34.