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

鐘琨

摘要：Web是全球廣域網(wǎng)的簡(jiǎn)稱，它是一種全球性的、動(dòng)態(tài)交互分布式圖形信息系統(tǒng)。Web前端開發(fā)技術(shù)主要是以網(wǎng)頁(yè)制作為基礎(chǔ)發(fā)展而來。本文簡(jiǎn)要探討網(wǎng)站制作的Web前端開發(fā)技術(shù)和相關(guān)優(yōu)化措施，希望予以相關(guān)人員以借鑒意義。

關(guān)鍵詞：網(wǎng)站制作;web前段開發(fā);技術(shù)優(yōu)化

中圖分類號(hào)：TP393.09 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2020）01-0058-01

在早期階段網(wǎng)站的設(shè)計(jì)主要以靜態(tài)界面為主，主要作用是為用戶提供簡(jiǎn)單的信息及圖片瀏覽功能，在后來一段時(shí)間內(nèi)技術(shù)逐漸發(fā)展使得數(shù)據(jù)交互能力不斷提升，網(wǎng)頁(yè)所必須的跳轉(zhuǎn)次數(shù)降低。在技術(shù)不斷更新的信息化時(shí)代，Web前端開發(fā)技術(shù)需要不斷的推陳出新，從而應(yīng)對(duì)日益增加的需求。網(wǎng)站制作所涉及的內(nèi)容十分廣泛，不只限于簡(jiǎn)單的圖像處理以及文字布局等問題，還需要在數(shù)據(jù)庫(kù)建設(shè)方面不斷深化。由于相關(guān)技術(shù)的不斷更替，目前階段網(wǎng)站制作的形式逐漸呈現(xiàn)多樣化的發(fā)展趨勢(shì)，在Web前端技術(shù)的發(fā)展歷程中，出現(xiàn)了很多桌面軟件的Web，在網(wǎng)頁(yè)內(nèi)容上逐漸出現(xiàn)了更多的信息表現(xiàn)形式，例如：視頻，flash動(dòng)畫等，這些多樣化的信息表現(xiàn)形式提升了用戶的信息瀏覽觀感。由于現(xiàn)代網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，越來越多的人投入到前端工作中來，因此Web前端開發(fā)技術(shù)也會(huì)不斷的發(fā)展和革新。

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

Web前端開發(fā)通常創(chuàng)建Web頁(yè)面并展示給用戶進(jìn)行瀏覽的過程，主要通過：HTML、CSS、JavaScript等技術(shù)來實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。這三種語(yǔ)言中HTML是網(wǎng)頁(yè)的核心，它是萬(wàn)維網(wǎng)瀏覽器的一種基礎(chǔ)語(yǔ)言，可以實(shí)現(xiàn)計(jì)算機(jī)之間的信息交流，是網(wǎng)頁(yè)文檔的基礎(chǔ)結(jié)構(gòu)語(yǔ)言。CSS主要涉及到網(wǎng)頁(yè)外觀制作，熟練的掌握CSS可以使得網(wǎng)頁(yè)在外觀上更加吸引人。JavaScript則是用于Web應(yīng)用開發(fā)，可以為用戶提供更加順暢的瀏覽效果。

由于Web技術(shù)不斷成熟，B/S軟件體系結(jié)構(gòu)誕生了，并且隨著技術(shù)的不斷發(fā)展使得B/S結(jié)構(gòu)的功能逐漸趨于完整，這種結(jié)構(gòu)可以對(duì)信息進(jìn)行分布式處理，從而減少資源損耗，提升整體系統(tǒng)性能。用戶要進(jìn)行信息瀏覽需要輸入網(wǎng)頁(yè)地址，之后向服務(wù)器發(fā)出訪問請(qǐng)求，之后服務(wù)器會(huì)分析域名，并尋找IP地址，從將計(jì)算機(jī)引導(dǎo)到預(yù)定網(wǎng)頁(yè)頁(yè)面中。在客戶端發(fā)送HTTP到服務(wù)器中，接受請(qǐng)求服務(wù)器會(huì)對(duì)文件內(nèi)容進(jìn)行確認(rèn)。確認(rèn)后的文件通常表現(xiàn)為確定的網(wǎng)絡(luò)地址。在此階段中，Web服務(wù)器主要調(diào)取文件內(nèi)的內(nèi)容和URL參數(shù)，并依據(jù)數(shù)據(jù)顯示出HTML頁(yè)面。當(dāng)文件生成完畢后，服務(wù)器會(huì)完成HTTP請(qǐng)求，此時(shí)瀏覽器就可以接收到HTML文件信息，并進(jìn)行文件內(nèi)容分析，之后要求服務(wù)器傳輸相關(guān)資源文件，當(dāng)服務(wù)器對(duì)請(qǐng)求作出響應(yīng)之后，會(huì)通過網(wǎng)絡(luò)將所需的資源文件傳輸?shù)綖g覽器之中。當(dāng)瀏覽器接收到資源文件后，瀏覽器要對(duì)接收到的數(shù)據(jù)進(jìn)行相關(guān)整理，并將數(shù)據(jù)顯示在主頁(yè)面上，并依據(jù)設(shè)定的排版結(jié)構(gòu)進(jìn)行排版。在這一階段中，瀏覽器會(huì)依據(jù)HTML文件的內(nèi)容進(jìn)行執(zhí)行工作。

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

要實(shí)現(xiàn)Web前端開發(fā)的優(yōu)化并不是一件十分容易的事，因?yàn)閮?yōu)化原則中提出的要求會(huì)與工程原理出現(xiàn)相悖的情況，例如：將css放在頭部與js放在尾部這兩條原則，主管不能要求工程在寫樣式和腳本引用時(shí)頻繁的修改相同頁(yè)面，這會(huì)導(dǎo)致團(tuán)隊(duì)的效率嚴(yán)重降低，因此性能優(yōu)化工作就需要周期性的進(jìn)行。Web前段開發(fā)技術(shù)的優(yōu)化可以從以下幾個(gè)方面進(jìn)行。

2.1 減少HTTP請(qǐng)求數(shù)量

要提升用戶體驗(yàn)就需要在前端優(yōu)化上做文章，銀錢前端的問題可能會(huì)消耗掉整體時(shí)間的絕大部分。性能黃金法則表明只有10%—20%的最終用戶響應(yīng)時(shí)間花在接受請(qǐng)求的HTML文檔中，而絕大部分時(shí)間都用在了HTML文檔引用的組件進(jìn)行的HTTP請(qǐng)求上。所以要想提升響應(yīng)速度就必須要減少組件數(shù)量，從而降低HTTP請(qǐng)求數(shù)量。通常的解決方法之一是利用CSS Sprite將網(wǎng)頁(yè)中比較小的圖片進(jìn)行整合，從而得到一張圖片文件，并利用CSS的background—image屬性插入圖片，之后利用background-position屬性對(duì)圖片中所需要的部分進(jìn)行精確定位，從而減少服務(wù)器的請(qǐng)求次數(shù)。

2.2 cookie優(yōu)化

由于HTTP請(qǐng)求都會(huì)在硬盤上產(chǎn)生跟這個(gè)域名有關(guān)的cookie信息，當(dāng)cookie信息越來越多時(shí)，會(huì)出現(xiàn)請(qǐng)求頭逐漸增大的問題，并拖慢相應(yīng)時(shí)間。進(jìn)行cookie優(yōu)化可以從以下幾個(gè)方面來進(jìn)行：（1）去除沒有必要的cookie，如果網(wǎng)頁(yè)不需要cookie就可以完全禁止。（2）將cookie降至最小，由于cookie在訪問域名內(nèi)的資源時(shí)會(huì)以HTTP請(qǐng)求發(fā)送到服務(wù)器中，因此減小cookie可以減小HTTP請(qǐng)求報(bào)文的大小，從而提升整體響應(yīng)速度。（3）要設(shè)定一個(gè)過期時(shí)間，給cookie添加一個(gè)過期時(shí)間，cookie信息會(huì)在硬盤上進(jìn)行儲(chǔ)存，如果瀏覽器退出cookie仍然會(huì)存留在硬盤上，因此當(dāng)再次進(jìn)行訪問時(shí)cookie就會(huì)在訪問對(duì)應(yīng)域名是發(fā)送給服務(wù)器。（4）以不同的domain降低cookie的使用，在訪問某些資源時(shí)，例如：js、css以及圖片時(shí)，多數(shù)的cookie是多余的，所以可以運(yùn)用不同的domain來儲(chǔ)存靜態(tài)資源，從而在訪問資源時(shí)避免發(fā)送多余的cookie數(shù)據(jù)，從而加快響應(yīng)速度。

2.3 CDN內(nèi)容分發(fā)網(wǎng)絡(luò)

瀏覽器是根據(jù)域來緩存內(nèi)容資源的，只要域不一樣，即使是用一個(gè)資源，仍然需要重復(fù)下載，并使用同樣的方式緩存起來，這就需要占用網(wǎng)絡(luò)帶寬以及本地緩存空間。要將CDN用于前端性能優(yōu)化可以通過下列方法進(jìn)行：第一，將靜態(tài)資源緩存到距離用戶很近的相同網(wǎng)絡(luò)運(yùn)營(yíng)商CDN節(jié)點(diǎn)上，不同位置的用戶在訪問同一個(gè)域名時(shí)得到不同的CDN節(jié)點(diǎn)的IP地址，通過智能DNS服務(wù)獲取最近的運(yùn)營(yíng)商CDN節(jié)點(diǎn)IP地址后，不同用戶會(huì)向最近的運(yùn)營(yíng)商發(fā)送CDN節(jié)點(diǎn)請(qǐng)求，CDN節(jié)點(diǎn)會(huì)判斷自己的內(nèi)容緩存是否有效，當(dāng)一個(gè)區(qū)域內(nèi)某個(gè)用戶預(yù)先加載資源后，就會(huì)在CDN中建立緩存，從而方便后續(xù)用戶直接讀取。

2.4 DNS解析優(yōu)化

DNS查詢的過程需要20毫秒左右，當(dāng)進(jìn)行DNS查詢時(shí)，瀏覽器處于等待狀態(tài)，如果DNS查詢請(qǐng)求較多，網(wǎng)頁(yè)的整體性能會(huì)受到很大的影響，所以需要進(jìn)行DNS緩存。另外還可以減少DNS查詢的次數(shù)，由于DNS查詢也會(huì)消耗時(shí)間，因此如果網(wǎng)頁(yè)內(nèi)容來著不同的域，則客戶端第一次解析這些域的時(shí)候就會(huì)消耗一定的時(shí)間，但是由于DNS的查詢結(jié)果會(huì)在本地系統(tǒng)及瀏覽區(qū)中存在一段時(shí)間，因此DNS查詢通常只在首次訪問時(shí)會(huì)對(duì)速度產(chǎn)生影響，減少DNS查詢次數(shù)需要減少不同域的請(qǐng)求數(shù)量，例如盡量將外部域的對(duì)象下載到本地服務(wù)器上。

3 結(jié)語(yǔ)

前端優(yōu)化是一個(gè)系統(tǒng)性的工程，需要從多方面進(jìn)行并行工作，前端優(yōu)化工作關(guān)系到用戶瀏覽的質(zhì)量，因此在網(wǎng)站制作的過程中必要要周期性的進(jìn)行前段優(yōu)化，以保證用戶瀏覽體驗(yàn)。

參考文獻(xiàn)

[1] 陳捷.基于網(wǎng)站制作的Web前端開發(fā)技術(shù)與優(yōu)化[J].現(xiàn)代信息科技，2019，3（08）：111-112.