基于網(wǎng)站制作的Web前端開發(fā)技術(shù)與優(yōu)化

所謂Web就是全球廣域網(wǎng)，它標(biāo)志著信息時代的到來，是科技信息發(fā)展的產(chǎn)物。Web前端開發(fā)的前身是網(wǎng)頁制作，初始的網(wǎng)站設(shè)計通常以靜態(tài)為主，網(wǎng)站用戶主要在網(wǎng)站上進行信息瀏覽。其后Web不斷的發(fā)展和進步，數(shù)據(jù)的交互開始不斷刷新，網(wǎng)頁跳轉(zhuǎn)的次數(shù)也逐漸變少。面臨著數(shù)據(jù)信息時代，Web前端開發(fā)技術(shù)還需要不斷優(yōu)化和發(fā)展，以此來滿足更多人的信息需求。本文主要就網(wǎng)站制作的Web前段開發(fā)技術(shù)進行了相關(guān)闡述，并且分析了它的優(yōu)化方向。

【關(guān)鍵詞】網(wǎng)站制作 Web前端開發(fā) 技術(shù)優(yōu)化

網(wǎng)站制作包含的內(nèi)容十分廣泛，其不僅要進行圖片的處理、合理的布局，還要建設(shè)合理的數(shù)據(jù)庫等等。隨著時代與技術(shù)的進步，網(wǎng)站制作越來越豐富多樣，不同的網(wǎng)站滿足了不同人群的信息需求。其中，Web前端開發(fā)技術(shù)占據(jù)了十分重要的地位，出現(xiàn)了諸多桌面軟件的Web，網(wǎng)站網(wǎng)頁也不僅僅只是圖片和文字的載體，網(wǎng)頁的內(nèi)容變動變得更加豐富和生動，為瀏覽用戶提供了更加舒適的體驗，滿足了用戶的需求。然而，時代在進步，技術(shù)在發(fā)展，大量前端工程師相繼涌現(xiàn)，從而促使Web前端開發(fā)技術(shù)的革新和改進。

1 簡述Web前端開發(fā)技術(shù)

在Web前端開發(fā)技術(shù)之中有三個關(guān)鍵因素，分別是：HTML、JavaScript、CSS。這三種語言分別具有不同的特點和職能，執(zhí)行標(biāo)準(zhǔn)也各有不同，但是彼此之間又存在著一定的合作關(guān)系，在Web前端開發(fā)的過程中這三個因素缺一不可。為了確保Web前端開發(fā)技術(shù)的優(yōu)化和提升，完善開發(fā)工作中的各項細節(jié)是必不可少的，并以此為基礎(chǔ)不斷改善和提升。

目前，B/S結(jié)構(gòu)是最常見的一種網(wǎng)絡(luò)環(huán)境，從現(xiàn)如今的網(wǎng)絡(luò)環(huán)境技術(shù)來看，對客戶端的瀏覽器展開分析是一種符合時代技術(shù)特征的方式。瀏覽用戶要先進行網(wǎng)址輸入，然后向URL發(fā)出請求，服務(wù)器會分析域名，然后獲取相應(yīng)的IP地址，最終實現(xiàn)計算機對該地址的訪問和瀏覽。在此基礎(chǔ)上，打開瀏覽器的客戶端會發(fā)送HITP到服務(wù)器中，收到請求的服務(wù)器會根據(jù)URL的請求進行文件的確認。確認后的文件通常會呈現(xiàn)為一個網(wǎng)絡(luò)地址的形態(tài)，例如ASP、JSP文件等等。在這個過程之中，Web服務(wù)器主要負責(zé)根據(jù)文件的內(nèi)容和URL的參數(shù)進行資源的調(diào)用，從而有效進行數(shù)據(jù)的組織并且生成HTML頁面。在文件生成之后，HTTP的請求會由服務(wù)器來完成，并且把生成后的HTML文件傳輸?shù)綖g覽器之中，瀏覽器負責(zé)文件的接收。在接收之后進行文件的分析，然后請求服務(wù)器發(fā)送鏈接資源文件。例如內(nèi)嵌網(wǎng)頁、CSS等等。服務(wù)器接到請求之后，會通過網(wǎng)絡(luò)將要求的資源文件發(fā)送給瀏覽器。資源文件成功發(fā)送到瀏覽器之后，瀏覽器要對數(shù)據(jù)進行整理，然后將其展示在頁面之上，并且對資源的展示進行合理的排版。在這個過程中，瀏覽器會按照上至下的順序進行HTML文件的執(zhí)行，如果與對應(yīng)的頁面腳本相遇，就直接分析腳本，并且執(zhí)行相應(yīng)代碼。腳本的執(zhí)行會對鏈接文件的加載產(chǎn)生影響。

2 基于網(wǎng)頁設(shè)計Web前端開發(fā)技術(shù)的優(yōu)化

網(wǎng)頁的存在意義在于信息的呈現(xiàn)和傳遞，從而使用戶的需求得到滿足。在互聯(lián)網(wǎng)環(huán)境的影響下，不論是信息獲取時間過程還是呈現(xiàn)效果不佳都會對用戶的瀏覽體驗產(chǎn)生影響。從提供信息的方面來看，信息本身的價值并沒有得以實現(xiàn)。但是在獲取信息的角度來看，上述狀態(tài)會對信息對稱環(huán)境產(chǎn)生影響，甚至對社會行為產(chǎn)生影響。所以Web前端開發(fā)技術(shù)的優(yōu)化是必不可少的，它可以從以下幾個方面著手。

2.1 優(yōu)化HTTP的請求

根據(jù)相應(yīng)的HTTP請求進行技術(shù)的優(yōu)化，對請求內(nèi)容進行篩選，選擇必要的請求，從根本上提升前端開發(fā)技術(shù)的整體水平。完整的HTTP請求涵蓋的內(nèi)容有很多，例如數(shù)據(jù)的發(fā)送、服務(wù)器和瀏覽器鏈接的建立等等。不同的環(huán)境的請求會占用相應(yīng)的時間，多個時間進行累計就會導(dǎo)致時間成本的大幅增加，并且浪費大量的寬帶資源。所以，要在時間的使用上進行優(yōu)化，控制請求的數(shù)量是不可或缺的。通常可以采用文件合并的方式進行時間的節(jié)省，在第二次請求中可以一次性完成；圖片可以采用不同鏈接映射在不同區(qū)域的方式。如果是內(nèi)聯(lián)圖像，一定要確保文本和圖像的同時下載。

2.2 優(yōu)化文件規(guī)模

文件規(guī)模的優(yōu)化是一項十分瑣碎的工作，它不僅要優(yōu)化CSS文件、JavaScript文件，還要對相應(yīng)的代碼進行優(yōu)化。重點優(yōu)化內(nèi)容是HTML標(biāo)簽的合理剔除，避免內(nèi)聯(lián)式的出現(xiàn)。此外，優(yōu)化CSS代碼也是十分重要的工作。

2.3 優(yōu)化內(nèi)容

內(nèi)容優(yōu)化的考慮角度主要有兩個，也就是在樣式表置于頂部的時候，script可以置于底部。CSS具備覆蓋疊成的特殊性，所以瀏覽器在加載完成后會進行渲染工作，如果要優(yōu)化Web，就一定要著手實現(xiàn)CSS加載的優(yōu)化。將script置于底部，主要是避免腳本在執(zhí)行的過程中影響頁面下載，進而導(dǎo)致組建下載速度過慢，延長頁面加載的時間，使網(wǎng)站網(wǎng)頁的工作效率變低。

2.4 優(yōu)化DNS的查詢次數(shù)

DNS也是導(dǎo)致時間成本增加的一個重要原因，如果DNS每解析一次需要20-120毫秒，那么如果解析請求過于頻繁，就會直接導(dǎo)致信息傳輸速度或呈現(xiàn)速度減緩。不僅如此，它是瀏覽器工作的基礎(chǔ)內(nèi)容，在查詢完成之前，該域名中的所有內(nèi)容瀏覽器都不會進行下載，所以對DNS的查詢次數(shù)進行優(yōu)化和控制是Web前端開發(fā)技術(shù)優(yōu)化的一個重要環(huán)節(jié)。

除上述之外，重定向也是導(dǎo)致等待時間延長的原因之一，它受到各種不同因素的影響，總的來看，重定向增加一次Web請求就會增加一次。所以，添加“/”在站點目錄之后可以在一定程度上避免重定向目標(biāo)的重復(fù)出現(xiàn)。

3 結(jié)語

綜上所述，Web前端開發(fā)技術(shù)的優(yōu)化需要從多個方面著手，它對用戶的瀏覽體驗有非常直接的影響，是網(wǎng)站制作水平提升的技術(shù)保障。

參考文獻

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

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

[3]王赫.Web前端開發(fā)技術(shù)以及優(yōu)化方向分析[J].科技傳播，2016（08）.

作者簡介

周文君（1983-），女，湖南省祁東縣人。碩士學(xué)位。講師。主要研究方向為數(shù)據(jù)庫技術(shù)、計算機應(yīng)用技術(shù)。

作者單位

湖南安全技術(shù)職業(yè)學(xué)院 湖南省長沙市 410151