Web2.0時代網站前端開發大師研究分析

任 勇

（武漢職業技術學院，湖北 武漢 430074）

Web2.0時代網站前端開發大師研究分析

任 勇

（武漢職業技術學院，湖北 武漢 430074）

隨著Web 2.0時代的到來，互聯網進入千家萬戶，各種應用以Web的形式展現在人們眼前，對網站前端設計師的需求也越來越多。文章闡述了網站前端的概念、發展現狀、發展趨勢以及如何成為一個好的前端設計師以及所需要的基本技能。

網站前端；前端開發；Web 2.0

1 網站前端的概念

所謂網站前端是一個綜合的概念，前端簡單來說就是來做網站前端的，具體就是采用Web標準化，根據需求設計出來的具有很強的美學意義頁面，以文字、圖片、多媒體等形式承載一定的信息提供給用戶。前端頁面文檔構成在元素上可以分為行為、結構和表現3個層次，元素行為主要是由DOM，Javascript等腳本語言來實現；結構主要是由HTML，XHTML和XML語言來實現；表現主要是由CSS語言來實現。也就是Web用戶可以看得見碰得著的東西，如通過瀏覽器可以看頁面新聞，可以看視頻直播等。

2 網站前端的發展現狀

隨著網站在互聯網的的數量和規模方面的快速發展和網民數量的日益龐大，Web應用已經深入到人們生活和工作的每一個角落，成了必不可少的媒介，這樣也直接導致網民對網站前端的設計要求越來越多樣化，要求也越來越高，對設計師的技能要求也越來越高。

早期網站前端設計使用表格來定位和排版網頁風靡一時，通過嵌套大量的表格保證網頁內容不錯位，導致了維護和更新非常困難，工作量大，產生了大量冗余的代碼，不利于網站的優化，因此表格制作網頁的時代逐漸消退。隨之而來的是CSS+DIV—當前網頁布局的主流技術。CSS+DIV最核心的優點是實現了網頁的內容、表現和行為的分離，減少了冗余的代碼，提高了網頁訪問速度，使得頁面的改版更加靈活方便。從前端人才的數量跟結構上來說也有很大的缺口，很多人把網頁設計師理解為前端開發，這個是不對的，前端開發需要更多的知識結構與經驗。

3 網站前端的發展趨勢

現在網站前端的開發越來越進步，以前一個可以全部設計開發出來慢慢地被取代，隨著JS，jQuery，SEO，Ajax等技術的不斷發展變革，用戶制作個性的網站跟頁面越來越多樣化。這就需要前端設計師充分考慮編碼的規范性、代碼的安全性、頁面性能優化、SEO的優化這些問題，以此來提高網站前端的性能。網站前端設計方面未來更趨向于HTML5和CSS3的結合。HTML5以HTML4為基礎，對HTML4進行了大量的修改，HTML5規范是基于用戶優先原則編寫，宗旨是“用戶即上帝”。CSS3把以前很多需要圖片和JS結合才能實現的效果，用幾行代碼就實現了，不僅能簡化前端開發工作人員的設計過程，還能加快頁面載入速度。特別現在隨著智能手機、各種平板等終端的普及，網站前端的展示方式不僅僅是計算機的瀏覽器，各種移動終端都可以與用戶進行信息展示，需要考慮跨平臺兼容，注意與用戶的交互性和瀏覽的舒適性。這些用戶與終端的增加也給前端的發展帶來更多的機遇。

4 網站前端設計師需要的基本知識

想要成為一名前端工程師的大牛，必須有豐富的知識儲備并且掌握各種開發軟件的使用。

（1）計算機基礎知識儲備。編譯原理、計算機網絡、操作系統、算法原理、軟件工程、軟件測試原理。對這個課程知識有基本的了解掌握，是計算機入門的基礎。

（2）頁面切圖。所需要的知識H T M L，CSS和PhotoShop。HTML是超文本標記語言，由很多的標記組成，通過標記來規范頁面元素，制作出的網頁文件可以在各種瀏覽器中打開，前端設計師需要掌握HTML基本網頁標記的使用。CSS層疊新式表可以提供豐富的樣式，通過標記的屬性可以控制標記中的內容按照指定的CSS樣式來表現。通過HTTML的DIV標簽和CSS的結合使用進行頁面布局，可以使頁面內容和行為分離，緩解Web服務器的壓力，減少頁面的冗余代碼，提高站點頁面的加載速度，實現頁面表現的多樣性，提升網站改版的便捷度和頁面的安全性，有了這個基礎可以通過PhotoShop切片功能，得到所需要的網頁布局素材，也可以通過PhotoShop進行個別素材的修改。

（3）掌握前端標準和規范。所涉及的知識包括：W3C，DOM，BOM，XHTML，XML，JSON，HTML5，CSS3，ECMAScript，CommonJS，HTTP1.1。其中W3C最重要的一項工作就是發展Web規范，規定Web的通信協議和一些構建模塊，如HTML規范，HTML5的規范等，前端設計師必須掌握這些規范并按照規范來進行設計；DOM文檔對象模型，是W3C組織推薦的處理可擴展標志語言的標準編程接口，DOM技術可以使頁面的交互性大大增強；BOM是瀏覽器的對象模型，可以用來獲取或設置瀏覽器的屬性、行為；XHTML是一種可擴展的標記語言，主要是實現HTML向XML的過渡，Web標準就是基于XHTML的應用；XML可擴展標記語言主要用來傳輸和存儲數據。JSON （JavaScript Object Notation） 是一種輕量級的數據交換格式。它基于ECMAScript的一個子集，也是JavaScript 對象表示語法的子集；HTML5和CSS3未來前端發展的趨勢；CommonJS API定義很多普通應用程序（主要指非瀏覽器的應用）使用的API，從而填補了這個空白。它的終極目標是提供一個類似Python，Ruby和Java標準庫；HTTP1.1超文本傳輸協議版本1.1，可以使瀏覽器更加高效，網絡傳輸減少YUI。

（4）前端框架和庫。所涉及的知識包括：jQuery，YUI3，Prototype，Mootools，ExtJS，Smart，Django，Zend，QUnit，Jasmine，前端MVC。其中掌握必須的JS框架如jQuery，YUI3，Prototype，Mootools，ExtJS等。JS框架主要是javaScript庫，能使用戶更方便地處理HTML documents，events，方便實現交互；Web開發框架Django；前端必須掌握MVC框架，MVC是一種使用模型、視圖和控制器設計創建Web應用程序的模式，Model表示應用程序核心如數據庫記錄表，View顯示數據，Controller處理輸入數據。

（5）移動終端的知識。所涉及的知識包括：jQueryMobile，HTML5，CSS3，iPhone，iPad，iOs，Android，responsive UI Design。其中jQuery Mobile是jQuery框架的一個組件（而非jQuery的移動版本）。jQuery Mobile不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile可以讓開發人員開發出真正的移動Web網站。需要對移動終端iphone手機使用跟了解，iPad平板電腦的使用跟了解，對iOs系統的掌握，對Android系統的掌握，才能實現移動終端UI設計。

（6）編程語言。所涉及的知識JavaScript，PHP，Python，Perl，Ruby，BashShell，NodeJS，FlashAS。其中基本的JS，JS框架知識，PHP網站設計是最流行的通用開源腳本語言，它的語法兼顧了C語言、Java語言和Perl的優點，上手快，使用廣泛，適合Web開發領HTML標記的CI域，PHP將程序語言嵌入到HTML文檔中，執行的效率要比生成HTML標記的CGI高許多。

（7）瀏覽器的兼容性。所涉及的瀏覽器IE6，IE7，IE8，IE9，Firefox3.6，Firefox4，Firefox5，Firefox6，Firefox7，Firefox8，Chrome，Opera，Safari。在對頁面進行布局時必須掌握CSS的屬性值在各個瀏覽器中的效果，使用必要的CSShack來兼容不同的瀏覽器，避免同樣的布局在不同的瀏覽器中顯示混亂，這也是使用DIV+CSS布局必須考慮的內容。

（8）頁面性能優化。所涉及的知識包括：WebPageTest，ShowSlow，YSlow，34Rule，PageSpeed，HttpWatch，DynaTrace’s Ajax。通過http請求優化，利用客戶端的緩存對網站進行優化，使用壓縮技術加快頁面傳輸，對頁面元素進行優化，在頁面中使用Ajax技術優化應用。可以使用其中的ShowSlow，YSlow工具搭建環境對頁面性能進行測試查看優化的結果。

（9）調試工具。所涉及的知識包括：Firebug，Firebuglite，Web Inspector，YSlow，Smushit，IEDeveloperToolBar，IETester，SuperPreview，JsBeautifier，Fiddler，WireShark，tcpdum。其中可以使用Web Inspector工具對網頁進行審查；使用Firebug檢查調試頁面的JavaScript；使用IETester測試頁面在各種版本瀏覽器下的運行情況，使用WireShark測試網絡封等。

5 結語

想要成一名網站前端大師并非短時間內就可以練成，需要不斷地積累知識和實踐，當然上面所提到的知識技能并不是要把所有的都掌握了才可以，同一類型的掌握一到兩個就行。在實際前端開發的時候并非將所有的知識都用上，有時只需要其中一部分，所以在這個大師之路上需要先掌握必須知識，再不斷擴充知識面，然后融會貫通、靈活運用、不斷學習，最后才能成為大師。

[1]鄭逸凡.高并發網站的前端優化技術研究[J].通化師范學院學報，2015（8）：4-6.

[2]張曉紅.網站前端模塊化開發策略研究[J].計算機時代，2013（2）：38-39.

[3]周志堅.高職院校網站前端設計課程教學模塊的選擇思路[J].科技風，2015（22）：245-254.

Study and analysis of the front end master in Web 2.0 era

Ren Yong
（Wuhan Polytechnic, Wuhan 430074, China）

With the arrival of the era of Web 2.0, the Internet has been popular with thousands of households, a variety of applications appears in front of people in the form of Web, there are more and more demands for website designer. This paper expounds the concept of Web front-end development status, development trend and how to become a good designer and basic skills required.

front end of the website; front end development; Web 2.0

任勇（1984— ），男，湖北襄樊。