Web前端開發技術以及優化分析

胡穎航

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

一、Web前端開發技術

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

1.HTML和HTML5

HTML是網頁制作必備的一種標記語言，也是一種規范，一種標準。HTML是通過標記符號來標記要顯示的網頁中的各個部分，也是網頁的本質，它通過結合使用其他的包括腳本語言、公共網關接口等Web技術可以創造出功能強大的網頁。因而，我們說HTML是Web編程的基礎。HTML有以下幾個特點：第一，簡易性。因為它采用的是超集方式，所以在Web前端開發中會更加的靈活方便;其次，擴展性。HTML的應用帶來了加強的功能，增加了標識符等要求，為系統擴展帶來了保證;第三，通用性。正是因為這些特點，HTML才成為Web前端開發技術。

而HTML5是Web中核心語言HTML的規范。通過HTML5生成的網頁相比較而言，更便于管理，在結構上更加的清楚和明確，它在結構上取消了一些過時的標記，分離了一些內容和展示，整個頁面更加的干凈，提高了用戶的體驗感。同時在如今的互聯網時代，移動設備端成為了主流，HTML5在移動設備端中的優勢更加明顯，更加有利于Web的前端開發。

2. 層疊樣式表

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

3.JavaScript

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

二、Web前端開發技術的優化分析

一個網站想要取得成功需要具備三個要素：能夠吸引用戶的美觀的頁面設計，能夠讓用戶滿意的服務功能以及完善的性能與功能。其中，最關鍵的就是網站的性能與功能。為此，本文就性能方面提出幾個前端優化的途徑。

1.減少HTTP請求

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

2.減少文件的大小

減少文件大小有兩個途徑：（1）通過壓縮JavaScript和CSS文件。（2）去除贅余的HTML標簽。（3）進行CSS代碼優化和內聯式優化

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

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

而在運行過程中，script腳本的執行會影響頁面的下載，因此將script放在底部，可以避免這個現象，從而提高頁面組件的下載，提高網站的性能。

4.避免重定向

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

5.減少“404”錯誤

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

結語

互聯網絡的發展是離不開Web的，而Web前端技術開發也一直在發展與創新的道路上，例如HTML5，XHTML這一系列新的技術。未來系統Web運行環境將成為新的標準化應用承載平臺，與原有應用進行取其精華，去其槽粕，共同構成一個全興的應用生態系統，促進移動互聯網的發展。

參考文獻

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

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

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