高慧
摘 要:Web前端開發(fā)技術(shù)可以影響網(wǎng)站性能,影響服務(wù)質(zhì)量。本文首先闡述了Web前端開發(fā)技術(shù)的有關(guān)概念,然后探討了Web前端開發(fā)技術(shù)如何影響網(wǎng)站性能,分析了Web前端開發(fā)技術(shù)的實(shí)施策略。當(dāng)前,人們要不斷優(yōu)化網(wǎng)站前端開發(fā)技術(shù),以提升網(wǎng)站性能。
關(guān)鍵詞:前端開發(fā)技術(shù);網(wǎng)站;Web;計(jì)算機(jī)
中圖分類號:TP393.092 文獻(xiàn)標(biāo)識碼:A 文章編號:1003-5168(2019)28-0047-03
Talking about Web Front-end Development Technology
and Its Influence on Website Performance
GAO Hui
(Nanjing Rice Information Technology Co., Ltd.,Nanjing Jiangsu 210001)
Abstract: Web front-end development technology can affect website performance and affect service quality. This paper first expounds the related concepts of Web front-end technology, and then discusses how Web front-end development technology affects website performance and analyzes the implementation strategy of Web front-end development technology. Currently, people must constantly optimize the Web front-end development technology to improve the performance of the website.
Keywords: front-end development technology;website;Web;computer
當(dāng)前,信息技術(shù)的發(fā)展速度是有目共睹的,人們的生產(chǎn)、生活都很難離開互聯(lián)網(wǎng)。只有具備強(qiáng)大的性能,在大量用戶訪問網(wǎng)頁時(shí),網(wǎng)站才能穩(wěn)定地向用戶提供優(yōu)質(zhì)的服務(wù)。針對這一需求,人們必須從Web前端開發(fā)技術(shù)角度出發(fā),進(jìn)一步提升網(wǎng)站性能。當(dāng)前,Web前端開發(fā)擁有3種比較重要的支柱性語言,它們分別是HTML、CSS以及客戶腳本語言,網(wǎng)站性能的好壞在很大程度上受到它們的影響,因此必須在Web前端開發(fā)過程中對其進(jìn)行深入的研究和剖析。為了保證研發(fā)工作能夠真正達(dá)到預(yù)期效果,本文分析了這些技術(shù)的概念及其具體特征。
1 Web前端開發(fā)技術(shù)概述
1.1 HTML
HTML是指超文本標(biāo)記語言,一般來說,此種語言是一個(gè)網(wǎng)頁的重要組成部分。通常情況下,該種語言的主要作用是通過各種類型的標(biāo)記,進(jìn)一步區(qū)分網(wǎng)頁中不同類型的內(nèi)容,最后系統(tǒng)終端會對HTML的請求進(jìn)行解析,并根據(jù)需求向用戶顯示相應(yīng)的網(wǎng)頁內(nèi)容。
1.2 CSS
CSS翻譯為中文的意思是“層疊樣式表”,它是由一些不同的屬性構(gòu)成的,在多種屬性的共同影響下,Web中相應(yīng)的頁面元素會根據(jù)實(shí)際情況自動進(jìn)行格式化,并且根據(jù)不同的格式會顯示出不同的網(wǎng)頁內(nèi)容。在網(wǎng)頁運(yùn)行過程中,CSS一般具有三種添加方式:一是簡單直接地添加到各類相應(yīng)的標(biāo)記中;二是有選擇性地在STYLE標(biāo)記中添加;三是在外部樣式表文件中進(jìn)行添加。
1.3 客戶端腳本語言
簡單來說,腳本語言在一定程度上決定了網(wǎng)頁的實(shí)現(xiàn)和用戶交互,上文提到的HTML和CSS通常都是靜態(tài)的,它們的功能比較單一,僅僅只能通過一種已經(jīng)提前選擇好的格式來顯示出相應(yīng)的網(wǎng)頁內(nèi)容,有時(shí)不能很好地呈現(xiàn)出預(yù)期效果,但是腳本語言可以解決這些問題。概括來說,腳本語言實(shí)際上是一段完全獨(dú)立于其他內(nèi)容的簡單程序。目前,行業(yè)內(nèi)認(rèn)可度最高的腳本語言要數(shù)JavaScript(簡稱“JS”),它的自動化程度比較高,可以隨著用戶操作的改變,顯示出不同類型的內(nèi)容,其被稱為動態(tài)效果。和上文提到的CSS一樣,JavaScript一般具有三種嵌入方式:一是簡單直接地添加到各類相應(yīng)的標(biāo)記中;二是有選擇性地在STYLE標(biāo)記中添加;三是在外部樣式表文件中進(jìn)行添加。圖1是HTML、CSS、JavaScript三種語言的相互關(guān)系。
2 Web前端開發(fā)技術(shù)對網(wǎng)站性能的影響
2.1 HTML對網(wǎng)站性能的影響
互聯(lián)網(wǎng)的加載速度取決于HTML文件的大小,一般來說,采用HTML編寫的網(wǎng)頁后面都有一個(gè)統(tǒng)一的后綴,即.html,當(dāng)互聯(lián)網(wǎng)輸入網(wǎng)址后,終端服務(wù)器會根據(jù)指令需求把文件下載下來,并通過客戶端顯示出來[1]。因此,文件越小,網(wǎng)頁的加載速度越快,反之則越慢。要想提升網(wǎng)站的性能,人們必須考慮到網(wǎng)頁的響應(yīng)速度。
另外,網(wǎng)頁中圖片數(shù)量的多少也會影響網(wǎng)站的加載速度。需要注意的是,當(dāng)用戶輸入網(wǎng)址后,網(wǎng)頁中的HTML文檔和圖片并不是同時(shí)被下載下來的,而是通過分別下載的方式進(jìn)行加載,每個(gè)文件在下載時(shí)都要和HTTP建立一個(gè)連接,因此圖片的增多會導(dǎo)致HTTP的連接數(shù)增多,使得網(wǎng)站加載速度變慢[2]。當(dāng)然,這些圖能夠被系統(tǒng)識別自動保存到客戶端中,也就是說,當(dāng)用戶再一次訪問該網(wǎng)頁時(shí),就不需要再重新加載這些圖片,那么網(wǎng)頁加載速度也會變快。
2.2 CSS對網(wǎng)站性能的影響
與前者相似,文檔中的樣式表在網(wǎng)頁加載過程中也要與HTTP分別建立不同的連接,這樣一來,網(wǎng)頁的加載速度也會隨著連接的增多而變慢,從而影響整個(gè)網(wǎng)站的性能。當(dāng)然,這些CSS樣式表是能夠被系統(tǒng)識別并自動保存到客戶端的,也就是說,當(dāng)用戶再一次訪問該網(wǎng)頁時(shí),就不需要重新加載這些樣式表,那么網(wǎng)頁加載速度也會變快。
除此之外,樣式表文件的位置也或多或少影響網(wǎng)站性能。假如樣式表文件根據(jù)相關(guān)要求被放置于HTML文檔的最前端,這樣各個(gè)網(wǎng)頁會按照順序依次出現(xiàn),防止網(wǎng)頁中間突然出現(xiàn)空白頁[3]。相反,網(wǎng)頁很難在加載過程中按序依次出現(xiàn),這樣就會使用戶誤以為頁面的加載時(shí)間增長。
2.3 客戶端腳本語言如何影響網(wǎng)站性能
腳本文件的多少同樣會影響網(wǎng)頁加載速度。和上文提到的圖片、CSS文件相同,腳本文件也能夠被系統(tǒng)識別并自動保存到客戶端,也就是說,當(dāng)用戶再一次訪問該網(wǎng)頁時(shí),就不需要重新加載這些腳本文件,網(wǎng)頁加載速度會變快。此外,腳本文件的位置也會或多或少影響網(wǎng)站性能。假如腳本文件根據(jù)相關(guān)要求被放置于HTML文檔的最前端,這樣各個(gè)網(wǎng)頁會按照順序依次出現(xiàn),防止網(wǎng)頁中間突然出現(xiàn)空白頁。相反,網(wǎng)頁就很難在加載過程中按序依次出現(xiàn),這樣就會使用戶誤以為頁面的加載時(shí)間增長[4]。
3 Web前端開發(fā)技術(shù)在具體研發(fā)過程中的運(yùn)用策略
3.1 HTML語言應(yīng)當(dāng)遵守技術(shù)標(biāo)準(zhǔn)
3.1.1 縮減HTML文檔。通過前文的分析可以看出,Web前端的性能會隨著HTML文檔的縮小而變好,文檔越小,加載速度越快。自HTTP1.1起,各個(gè)網(wǎng)站的瀏覽器和服務(wù)器都可以根據(jù)需要進(jìn)行壓縮,使用頻率最高的方法要數(shù)gzip[5]。
3.1.2 減少圖片。Web前端的性能會隨著圖片數(shù)量的減少而變好。為了加快網(wǎng)站加載速度,設(shè)計(jì)者可以采用合并圖片的方式來減少圖片數(shù)量。目前行業(yè)內(nèi)認(rèn)可度較高的方式主要有圖片地圖以及CSS Sprites。
3.1.3 自動緩存網(wǎng)頁圖片。研究發(fā)現(xiàn),在第一次訪問網(wǎng)頁時(shí),絕大多數(shù)網(wǎng)站的圖片都夠被系統(tǒng)識別并自動保存到客戶端,也就是說,當(dāng)用戶再一次訪問該網(wǎng)頁時(shí),就不需要重新加載這些圖片[6]。在網(wǎng)站服務(wù)器中,人們可以通過Expires指令設(shè)定圖片保存時(shí)間,在保存有效期內(nèi),用戶再次訪問網(wǎng)站可以不用重新下載圖片。
3.2 CSS樣式表應(yīng)當(dāng)遵守技術(shù)標(biāo)準(zhǔn)
3.2.1 縮減樣式表文件。樣式表文件的多少會影響網(wǎng)站的性能,樣式表文件越少,加載速度越快,因此設(shè)計(jì)者可以采用合并樣式表的方式來減少其數(shù)量,從而提升網(wǎng)站的性能。
3.2.2 自動緩存樣式表文件。絕大多數(shù)網(wǎng)站中的樣式表在第一次訪問網(wǎng)頁時(shí)都能被系統(tǒng)識別并自動保存到客戶端,也就是說,當(dāng)用戶再一次訪問該網(wǎng)頁時(shí),就不需要重新加載這些樣式表[7]。在網(wǎng)站服務(wù)器中,人們可以通過Expires指令設(shè)定樣式表的保存時(shí)間,在保存有效期內(nèi),用戶再次訪問網(wǎng)站可以不用重新下載這些樣式表文件。
3.2.3 將樣式表文件放置于網(wǎng)站最前端。網(wǎng)頁按照客戶指定的順序依次出現(xiàn)能夠防止顯示屏出現(xiàn)空白,客戶能夠根據(jù)需求依次看到相應(yīng)的內(nèi)容,使客戶認(rèn)為網(wǎng)頁速度并不慢。所以,樣式表文件應(yīng)當(dāng)放置于網(wǎng)站最前端,確保網(wǎng)頁能夠依次出現(xiàn)。
3.2.4 盡量不使用CSS表達(dá)式。通常,CSS表達(dá)式的再一次求值會自然而然地導(dǎo)致Web前端性能降低,所以不到迫不得已,人們應(yīng)當(dāng)盡量不使用CSS表達(dá)式,必要時(shí)應(yīng)當(dāng)采用一次性表達(dá)式或事件處理器來替代[8]。
3.3 客戶端腳本方面應(yīng)當(dāng)遵守技術(shù)標(biāo)準(zhǔn)
3.3.1 減少腳本文件。腳本文件的多少會影響網(wǎng)站性能,腳本文件越少,加載速度越快,因此設(shè)計(jì)者可以采用合并腳本文件的方式來減少其數(shù)量,從而提升網(wǎng)站性能。
3.3.2 自動緩存腳本文件。在第一次訪問網(wǎng)頁時(shí),絕大多數(shù)網(wǎng)站中的腳本文件都能被系統(tǒng)識別并自動保存到客戶端,也就是說,當(dāng)用戶再一次訪問該網(wǎng)頁時(shí),就不需要重新加載這些腳本文件。在網(wǎng)站服務(wù)器中,人們可以通過Expires指令設(shè)定腳本文件的保存時(shí)間,在保存有效期內(nèi),用戶再次訪問網(wǎng)站不用重新下載這些腳本文件。
3.3.3 將腳本文件放置于網(wǎng)站最底部。與前兩者不同的是,腳本文件應(yīng)當(dāng)放置于網(wǎng)站最底部,防止腳本阻止網(wǎng)頁組建的并行下載,確保網(wǎng)頁能夠按序依次出現(xiàn),縮減網(wǎng)頁加載時(shí)間,進(jìn)一步提高網(wǎng)站性能[9]。
3.3.4 精簡JavaScript。通常情況下,程序設(shè)計(jì)者會采用精簡的方法來刪除代碼中一些可有可無的注釋和字符,從而縮減JavaScript文件,確保網(wǎng)站的性能得以提升。
4 結(jié)語
本文主要深入剖析了HTML、CSS、客戶端腳本語言三種重要語言,并且從專業(yè)角度提出建議,總結(jié)出提升網(wǎng)站性能的具體方法。在今后的研發(fā)中,有關(guān)工作人員和企業(yè)依然要重視網(wǎng)站性能的研究,盡可能地從多種角度采用多種方式提升網(wǎng)站性能,滿足各類用戶的不同需求。
參考文獻(xiàn):
[1]袁婷.淺談Web前端開發(fā)[J].無線互聯(lián)科技,2017(2):35-36.
[2]張鑫,于涌,王典,等.Web前端技術(shù)開發(fā)的優(yōu)化與研究[J].產(chǎn)業(yè)與科技論壇,2018(24):55-56.
[3]白曉.Web前端開發(fā)技術(shù)以及優(yōu)化方向探究[J].無線互聯(lián)科技,2019(7):156-158.
[4]霍福華.Web前端開發(fā)技術(shù)以及優(yōu)化方向[J].晉城職業(yè)技術(shù)學(xué)院學(xué)報(bào),2017(2):59-62.
[5]李強(qiáng).Web前端開發(fā)技術(shù)與學(xué)習(xí)探討[J].長治學(xué)院學(xué)報(bào),2016(2):75-77.
[6]李鑫.Web前端的開發(fā)技術(shù)與優(yōu)化研究[J].電腦知識與技術(shù),2017(5):56-57.
[7]李響.Web前端安全[J].科技創(chuàng)新與應(yīng)用,2016(23):92.
[8]張萃.Web前端開發(fā)技術(shù)與優(yōu)化措施[J].中國管理信息化,2017(22):153-154.
[9]邵英安.Web前端課程的教學(xué)探討[J].電腦迷,2016(8):139.