一篇文章搞定前端開(kāi)發(fā)

前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶的過(guò)程，通過(guò)HTML、CSS及JavaScript以及衍生出來(lái)的各種技術(shù)、框架、解決方案，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。

前端開(kāi)發(fā)從網(wǎng)頁(yè)制作演變而來(lái)，早期網(wǎng)站主要內(nèi)容都是靜態(tài)，以圖片和文字為主，用戶使用網(wǎng)站的行為也以瀏覽為主。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展和HTML5、CSS3的應(yīng)用，現(xiàn)代網(wǎng)頁(yè)更加美觀，交互效果顯著，功能更加強(qiáng)大。

一、發(fā)展歷程

2005年以后，互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，網(wǎng)頁(yè)上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁(yè)，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無(wú)論是開(kāi)發(fā)難度上，還是開(kāi)發(fā)方式上，現(xiàn)在的網(wǎng)頁(yè)制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開(kāi)發(fā)，所以現(xiàn)在不再叫網(wǎng)頁(yè)制作，而是叫Web前端開(kāi)發(fā)。Web前端開(kāi)發(fā)在產(chǎn)品開(kāi)發(fā)環(huán)節(jié)中的作用變得越來(lái)越重要，而且需要專業(yè)的前端工程師才能做好，這方面的專業(yè)人才近幾年來(lái)備受青睞。Web前端開(kāi)發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識(shí)面非常廣，既有具體的技術(shù)，又有抽象的理念。簡(jiǎn)單地說(shuō)，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。

二、核心技術(shù)

必須掌握基本的Web前端開(kāi)發(fā)技術(shù)，其中包括：CSS、HTML、DOM、javascript、Ajax等，在掌握這些技術(shù)的同時(shí)，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。

在一名合格的前端工程師的知識(shí)結(jié)構(gòu)中，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)也是必須掌握的。

會(huì)運(yùn)用各種工具進(jìn)行輔助開(kāi)發(fā)。比如：處理IE系列瀏覽器兼容性問(wèn)題的IEtester、FF排錯(cuò)用的Firebug、FlashFirebug、JavaScript Debugger等。

除了要掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持，等等。

掌握HTML是網(wǎng)頁(yè)的核心，是一種制作萬(wàn)維網(wǎng)頁(yè)面的標(biāo)準(zhǔn)語(yǔ)言，是萬(wàn)維網(wǎng)瀏覽器使用的一種語(yǔ)言，它消除了不同計(jì)算機(jī)之間信息交流的障礙。因此，它是網(wǎng)絡(luò)上應(yīng)用*為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言，學(xué)好HTML是成為Web開(kāi)發(fā)人員的基本條件。

學(xué)好CSS是網(wǎng)頁(yè)外觀的重要一點(diǎn)，CSS可以幫助把網(wǎng)頁(yè)外觀做得更加美觀。

學(xué)習(xí)JavaScript的基本語(yǔ)法，以及如何使用JavaScript編程將會(huì)提高開(kāi)發(fā)人員的個(gè)人技能。

了解Unix和Linux的基本知識(shí)雖然這兩點(diǎn)很基礎(chǔ)，但是開(kāi)發(fā)人員了解Unix和Linux的基本知識(shí)是有益無(wú)害的。

了解Web服務(wù)器當(dāng)你對(duì)Apache的基本配置，htaccess配置技巧有一些掌握的話，將來(lái)必定受益，而且這方面的知識(shí)學(xué)起來(lái)也相對(duì)容易。

需要熟練掌握的技能

熟悉版本控制系統(tǒng)的用法熟悉使用一種優(yōu)秀的版本控制系統(tǒng)，你在實(shí)際工作中就會(huì)發(fā)現(xiàn)精通一種版本控制系統(tǒng)是很幸福的事情。

學(xué)好Web框架當(dāng)你掌握了HTML，服務(wù)器端腳本語(yǔ)言，CSS和JavaScript后，就應(yīng)該找一個(gè)Web框架加快你的Web開(kāi)發(fā)速度，使用框架可以節(jié)約你很多時(shí)間，如果你使用PHP，可選的框架有CakePHP，CodeIgniter，Zend等，Python程序員喜歡使用Django和 webpy，Ruby程序員喜歡使用RoR。

對(duì)于初學(xué)開(kāi)發(fā)人員來(lái)說(shuō)，以上知識(shí)是不是看起來(lái)很復(fù)雜，其實(shí)，當(dāng)你一步步學(xué)習(xí)并為企業(yè)開(kāi)發(fā)成功案例時(shí)，你會(huì)發(fā)現(xiàn)一切都是有意義的付出。

三、較強(qiáng)的視覺(jué)設(shè)計(jì)

前端技術(shù)包括4個(gè)部分：前端美工、瀏覽器兼容、CSS、HTML“傳統(tǒng)”技術(shù)與Adobe AIR、Google Gears,以及概念性較強(qiáng)的交互式設(shè)計(jì),藝術(shù)性較強(qiáng)的視覺(jué)設(shè)計(jì)等等.

根據(jù)該詞可以做這樣的理解,用互聯(lián)網(wǎng)來(lái)做比喻,凡是通過(guò)瀏覽器到用戶端計(jì)算機(jī)的統(tǒng)稱為前端技術(shù).相反存貯于服務(wù)器端的統(tǒng)稱為后端技術(shù).

四、Web前端優(yōu)化

盡量減少HTTP請(qǐng)求 (Make Fewer HTTP Requests)

減少 DNS 查找 (Reduce DNS Lookups)

避免重定向 (Avoid Redirects)

使得 Ajax 可緩存 (Make Ajax Cacheable)

延遲載入組件 (Post-load Components)

預(yù)載入組件 (Preload Components)

減少 DOM 元素?cái)?shù)量 (Reduce the Number of DOM Elements)

切分組件到多個(gè)域 (Split Components Across Domains)

最小化 iframe 的數(shù)量 (Minimize the Number of iframes)

杜絕 http 404 錯(cuò)誤 (No 404s)

以上10條涵蓋了Web前端開(kāi)發(fā)中遇到的各種頁(yè)面處理技術(shù)，讓前端開(kāi)發(fā)人員能夠準(zhǔn)確和快速地把握整個(gè)網(wǎng)頁(yè)的架構(gòu)，從而達(dá)到減少開(kāi)發(fā)成本和頁(yè)面美化目的.

五、Web前端開(kāi)發(fā)的職責(zé)是什么

1、使用Div+css并結(jié)合Javascript負(fù)責(zé)產(chǎn)品的前端開(kāi)發(fā)和頁(yè)面制作；[2]

2、熟悉W3C標(biāo)準(zhǔn)和各主流瀏覽器在前端開(kāi)發(fā)中的差異，能熟練運(yùn)用DIV+CSS，提供針對(duì)不同瀏覽器的前端頁(yè)面解決方案；

3、負(fù)責(zé)相關(guān)產(chǎn)品的需求以及前端程序的實(shí)現(xiàn)，提供合理的前端架構(gòu)；

4、與產(chǎn)品、后臺(tái)開(kāi)發(fā)人員保持良好溝通，能快速理解、消化各方需求，并落實(shí)為具體的開(kāi)發(fā)工作；

5、了解服務(wù)器端的相關(guān)工作，在交互體驗(yàn)、產(chǎn)品設(shè)計(jì)等方面有自己的見(jiàn)解。

*文章內(nèi)容和圖片均來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。