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

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

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

一、發(fā)展歷程

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

二、核心技術

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

在一名合格的前端工程師的知識結構中，網站性能優(yōu)化、SEO和服務器端的基礎知識也是必須掌握的。

會運用各種工具進行輔助開發(fā)。比如：處理IE系列瀏覽器兼容性問題的IEtester、FF排錯用的Firebug、FlashFirebug、JavaScript Debugger等。

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

掌握HTML是網頁的核心，是一種制作萬維網頁面的標準語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間信息交流的障礙。因此，它是網絡上應用*為廣泛的語言，也是構成網頁文檔的主要語言，學好HTML是成為Web開發(fā)人員的基本條件。

學好CSS是網頁外觀的重要一點，CSS可以幫助把網頁外觀做得更加美觀。

學習JavaScript的基本語法，以及如何使用JavaScript編程將會提高開發(fā)人員的個人技能。

了解Unix和Linux的基本知識雖然這兩點很基礎，但是開發(fā)人員了解Unix和Linux的基本知識是有益無害的。

了解Web服務器當你對Apache的基本配置，htaccess配置技巧有一些掌握的話，將來必定受益，而且這方面的知識學起來也相對容易。

需要熟練掌握的技能

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

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

對于初學開發(fā)人員來說，以上知識是不是看起來很復雜，其實，當你一步步學習并為企業(yè)開發(fā)成功案例時，你會發(fā)現(xiàn)一切都是有意義的付出。

三、較強的視覺設計

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

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

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

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

減少 DNS 查找 (Reduce DNS Lookups)

避免重定向 (Avoid Redirects)

使得 Ajax 可緩存 (Make Ajax Cacheable)

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

預載入組件 (Preload Components)

減少 DOM 元素數(shù)量 (Reduce the Number of DOM Elements)

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

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

杜絕 http 404 錯誤 (No 404s)

以上10條涵蓋了Web前端開發(fā)中遇到的各種頁面處理技術，讓前端開發(fā)人員能夠準確和快速地把握整個網頁的架構，從而達到減少開發(fā)成本和頁面美化目的.

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

1、使用Div+css并結合Javascript負責產品的前端開發(fā)和頁面制作；[2]

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

3、負責相關產品的需求以及前端程序的實現(xiàn)，提供合理的前端架構；

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

5、了解服務器端的相關工作，在交互體驗、產品設計等方面有自己的見解。

*文章內容和圖片均來源于網絡，如有侵權，請聯(lián)系刪除。