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

鐘琨

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

關鍵詞：網站制作;web前段開發(fā);技術優(yōu)化

中圖分類號：TP393.09 文獻標識碼：A 文章編號：1007-9416（2020）01-0058-01

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

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

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

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

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

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

2.1 減少HTTP請求數量

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

2.2 cookie優(yōu)化

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

2.3 CDN內容分發(fā)網絡

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

2.4 DNS解析優(yōu)化

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

3 結語

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

參考文獻

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