什么是前端撼班？什么是后端揭措？二者是如何配合運(yùn)轉(zhuǎn)的？

前 后端的劃分肌蜻，可以簡(jiǎn)單地理解為凡是運(yùn)行在用戶設(shè)備上的技術(shù)都可以稱為前端技術(shù)（ 比如 HTML / CSS / JS，甚至移動(dòng)設(shè)備的 Obj-C / Swift ）必尼；而后端的作用就是負(fù)責(zé)將這些東西封裝在 HTTP 的數(shù)據(jù)包中然后通過(guò)網(wǎng)絡(luò)傳送到前端蒋搜。當(dāng)然除了這些前端文件，后端還有一個(gè)更重要的職能判莉，即保存和提供用戶數(shù)據(jù)豆挽，比如移動(dòng)端常見(jiàn)的 JSON 就是目前最流行的在后端和前端之間傳輸?shù)囊粋€(gè)文件格式。

前端與后端是如何配合的券盅？如上圖帮哈，以 Web 端為例，在瀏覽器輸入一個(gè)網(wǎng)址后锰镀，瀏覽器向服務(wù)器發(fā)送了一個(gè) HTTP 請(qǐng)求娘侍；服務(wù)器通過(guò)一個(gè) HTTP 響應(yīng)，把顯示這個(gè)網(wǎng)頁(yè)所需要的資源傳回給了瀏覽器泳炉。而需要在瀏覽器中執(zhí)行的技術(shù)憾筏，HTML / CSS / Javascript 等就叫做前端；需要在服務(wù)器端執(zhí)行的胡桃、通常我們看不到技術(shù)就叫做后端踩叭。

Web 前端的運(yùn)行邏輯

假設(shè)我們要訪問(wèn) Google磕潮，從我們?cè)跒g覽器輸入 Google.com 到最后這個(gè)頁(yè)面出現(xiàn)在眼前翠胰，這其中涉及許多前端的技術(shù)反應(yīng)和代碼組合，總體而言可以簡(jiǎn)化為兩步：

1/ 瀏覽器向 Google 的服務(wù)器發(fā)送了一個(gè)請(qǐng)求自脯。

2/ 服務(wù)器收到了一個(gè) HTTP 響應(yīng)之景，這個(gè)響應(yīng)中就包含了執(zhí)行這個(gè)命令所需要的所有資源（注：可以通過(guò) Chrome 瀏覽器的開(kāi)發(fā)者工具來(lái)進(jìn)一步觀察 HTTP 協(xié)議的運(yùn)行情況；下圖為 Google 的 HTTP 協(xié)議運(yùn)行情況）膏潮。

上圖這個(gè)界面看起來(lái)很復(fù)雜锻狗，但對(duì)于非程序員而言，HTTP 協(xié)議運(yùn)行情況只要關(guān)注其中的幾個(gè)關(guān)鍵部分：第一列焕参，即資源的 URL轻纪；第四列是這個(gè)資源的類型。在第一個(gè)請(qǐng)求和后續(xù)的請(qǐng)求之間有一根藍(lán)線叠纷，即進(jìn)度條刻帚。而 HTTP 協(xié)議中運(yùn)行的項(xiàng)目越少，瀏覽器加載的速度越快涩嚣。圖中 Google 就處理得很好崇众，只有 10 個(gè)左右的請(qǐng)求掂僵。

Web 前端技術(shù)語(yǔ)言介紹

HTML 和帶樣式的 HTML

HTML 就是一組標(biāo)簽和文本的組合，是一個(gè)最基本的網(wǎng)頁(yè)顷歌。它已經(jīng)包含了網(wǎng)頁(yè)常見(jiàn)的元素锰蓬，實(shí)際上在 Web 早期的很長(zhǎng)一段時(shí)期內(nèi)，網(wǎng)頁(yè)都是這個(gè)樣子眯漩。后來(lái)隨著使用網(wǎng)絡(luò)的人群越來(lái)越廣泛芹扭，在 HTML3.0 中引入了對(duì)網(wǎng)頁(yè)樣式的定義，某種程度上可以說(shuō)坤塞，也是從這個(gè)時(shí)候開(kāi)始產(chǎn)生了網(wǎng)頁(yè)設(shè)計(jì)師的角色冯勉。

CSS

帶 樣式的 HTML 也擁有一個(gè)缺點(diǎn)，它需要為每個(gè)標(biāo)題和文字都設(shè)定樣式摹芙，工作量非常龐大灼狰。 CSS 就是在這樣的情況下誕生了。CSS 浮禾，又稱疊層樣式表交胚，簡(jiǎn)言之是一種用來(lái)表現(xiàn) HTML 文件樣式的樣式設(shè)計(jì)語(yǔ)言。CSS 能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制盈电，實(shí)現(xiàn)基礎(chǔ)的靜態(tài)的交互設(shè)計(jì)蝴簇；而CSS 目前的最新版本 CSS3 能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離。

Javascript

差 不多在 CSS 誕生的同一時(shí)間匆帚，大家開(kāi)始覺(jué)得這樣靜態(tài)的網(wǎng)頁(yè)似乎略顯無(wú)聊熬词，能不能給網(wǎng)頁(yè)加入一些可以動(dòng)起來(lái)的元素？比如點(diǎn)擊一個(gè)按鈕之后變個(gè)顏色吸重。當(dāng)時(shí)網(wǎng)景公司的工程師 Brendan Eich 就給他們自家的瀏覽器引入了這種實(shí)現(xiàn)動(dòng)態(tài)效果的腳本語(yǔ)言互拾，這就是 Javascript（簡(jiǎn)稱 JS）的誕生。所以通俗來(lái)說(shuō)嚎幸，Javascript 就是用來(lái)給 HTML 網(wǎng)頁(yè)增加動(dòng)態(tài)功能颜矿，實(shí)現(xiàn)更炫酷的交互。

提 到 Javascript 嫉晶，就得提一下 jQuery 骑疆。 jQuery 是一個(gè)優(yōu)秀的 Javascript 庫(kù)。jQuery 使用戶能更方便地處理 HTML 替废，它能夠使用戶的 HTML 頁(yè)面保持代碼和 HTML 內(nèi)容分離,通過(guò) jQuery 箍铭，可以不用在 HTML 里面插入一堆 JS 來(lái)調(diào)用命令，只需要定義 ID 即可椎镣。此外诈火，由 Twitter 設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開(kāi)發(fā)的 Bootstrap 也是一個(gè)受歡迎的前端框架。

HTML5 簡(jiǎn)史和響應(yīng)式設(shè)計(jì)

HTML 在剛誕生的前 10 年發(fā)展是非常迅速的衣陶，在 1999 年柄瑰，我們現(xiàn)在常說(shuō)的 HTML5 的上一個(gè)版本 HTML4.0.1 就已經(jīng)發(fā)布了闸氮，那么為什么從 4.0 到 5.0 會(huì)拖了 15 年之久？

首 先教沾，HTML4 的發(fā)布時(shí)間和門戶時(shí)代（即 Web 1.0 時(shí)代）是基本吻合的蒲跨，也就是說(shuō) HTML4 實(shí)際上是為門戶型網(wǎng)站設(shè)計(jì)的。在門戶網(wǎng)站經(jīng)歷的 4授翻，5 的年發(fā)展之后或悲，大家開(kāi)始覺(jué)得只是單一接受信息的互聯(lián)網(wǎng)太過(guò)無(wú)聊枯燥了，差不多 2004堪唐、2005 年開(kāi)始巡语，大家希望在網(wǎng)頁(yè)中加入更多的互動(dòng)元素，也就是我們常說(shuō)的 Web 2.0淮菠。

但是這個(gè)時(shí)候大家就發(fā)現(xiàn)男公，為 Web 1.0 設(shè)計(jì)的 HTML4 無(wú)法勝任這個(gè)工作，但是有另外一個(gè)技術(shù)卻非常適合合陵，那就是 Flash枢赔。所以在 Web 2.0 的早期，當(dāng)時(shí)最炫酷的網(wǎng)站有很多是完全用 Flash 開(kāi)發(fā)的拥知，在以后的很長(zhǎng)一段時(shí)間里踏拜，有很多網(wǎng)站都是 HTML 和 Flash 的混合式網(wǎng)站。所以在 2005 – 2010 年這段時(shí)間低剔，HTML5 中的新標(biāo)準(zhǔn)主要是為了取代 Flash速梗。

剛剛搞定了 Flash，又進(jìn)入了移動(dòng)開(kāi)發(fā)時(shí)代襟齿，所以 HTML5 又花了 5 年時(shí)間制定各種針對(duì)移動(dòng)平臺(tái)的標(biāo)準(zhǔn)姻锁。但是到目前為止，雖然 HTML5 已定定稿蕊唐，但是對(duì)移動(dòng)平臺(tái)的適應(yīng)其實(shí)還在進(jìn)行中屋摔，所以在未來(lái)很長(zhǎng)一段時(shí)間內(nèi)烁设，就像當(dāng)初的 Flash 一樣替梨，我們會(huì)看到越來(lái)越多的混合式應(yīng)用。

在 iPhone 出現(xiàn)之前装黑，大家訪問(wèn) Web 的主要方式還是通過(guò)桌面瀏覽器副瀑，所以設(shè)計(jì)網(wǎng)頁(yè)時(shí)只要考慮桌面瀏覽器的顯示效果就足夠了。但是在 iPhone 和 iPad 出現(xiàn)之后恋谭，就需要考慮同一個(gè)網(wǎng)頁(yè)在不同設(shè)備上的顯示效果糠睡，第一個(gè)問(wèn)題的答案就是響應(yīng)式，響應(yīng)式的核心就是讓同一個(gè)網(wǎng)頁(yè)可以在不同設(shè)備上呈現(xiàn)出不同的顯示效 果疚颊，主要是通過(guò)CSS來(lái)實(shí)現(xiàn)的狈孔。

除了響應(yīng)式設(shè)計(jì)信认，HTML 在移動(dòng)端遇到的另外兩個(gè)問(wèn)題就是如何利用移動(dòng)設(shè)備的各種傳感器，比如 GPS均抽，攝像頭等等嫁赏；以及性能問(wèn)題。為了解決這些問(wèn)題油挥，HTML5中添加了地理位置潦蝇，拍照，3D 動(dòng)畫加速等等 API深寥，可以部分的利用手機(jī)設(shè)備的一些新硬件攘乒，并且新的 API 還在不斷的加入進(jìn)來(lái)，這也是為什么現(xiàn)在的 HTML5 應(yīng)用可以越來(lái)越炫酷的原因惋鹅。但是则酝，HTML5 并不是專為移動(dòng)設(shè)備設(shè)計(jì)的，它是由 HTML5闰集，CSS3 以及大量的 Javascript API 共同組成的一個(gè)標(biāo)準(zhǔn)合集堤魁，微信中的 HTML5 應(yīng)用只是 HTML5 應(yīng)用場(chǎng)景中的很小一部分。

如何判斷一個(gè)前端的能力返十？

關(guān)于前端妥泉，可以簡(jiǎn)單的把它理解為，凡是在我們的電腦洞坑，手機(jī)上運(yùn)行的技術(shù)盲链，HTML，CSS迟杂，Javascript刽沾，這些都屬于前端技術(shù)，使用這些技術(shù)的我們就稱為前端工程師排拷。如何判斷一個(gè)前端的能力呢侧漓？下面是一個(gè)簡(jiǎn)單的前端能力鏈：

1/ 只會(huì) HTML/CSS 的，這種我們俗稱切圖的监氢，基本上就是淘寶幾十塊切一張圖的布蔗；

2/ 懂一些簡(jiǎn)單的 Javascript，主要是使用一些現(xiàn)成的框架浪腐，比如 jQuery纵揍，bootstrap 等等；

3/ 知道 jQuery 和 Bootstrap 的局限议街，必要時(shí)能寫一些原生的 JS/CSS 代碼泽谨；

4/ 對(duì)JS/CSS非常了解，執(zhí)著于使用瀏覽器的各種最新特性來(lái)實(shí)現(xiàn)各種炫酷效果，這種我們成為炫技派吧雹；

5/ 可以自己寫出類似 jQuery / Bootstrap 這樣的前端框架供其他人使用骨杂。

前端學(xué)習(xí)資料

http://www.w3schools.com

http://onemonth.com

http://www.codecademy.com/

https://github.com/alex/what-happens-when

https://qdan.me/list/VNBugw7ObupFRdlE

大 家可能比較關(guān)心如果我要開(kāi)發(fā)一個(gè)網(wǎng)站需要多少時(shí)間？這個(gè)問(wèn)題雖然很難回答雄卷，元一還是來(lái)試著回答了±巴眩現(xiàn)在前端有了 jQuery，bootstrap 這樣的框架龙亲，后端又有了 Ruby on Rails 這樣的快速 Web 開(kāi)發(fā)框架陕凹，如果從頭學(xué)的話，像是一個(gè)簡(jiǎn)易的 Pinterest鳄炉，大概一個(gè)月就可以了杜耙。如果是一個(gè)有經(jīng)驗(yàn)的程序員，可能 1 個(gè)星期就可以開(kāi)發(fā)出一個(gè)大概的原型出來(lái)拂盯。

后端服務(wù)器

后端的任務(wù)實(shí)際上就是向前端提供需要顯示網(wǎng)頁(yè)和 APP 內(nèi)容的數(shù)據(jù)佑女，可能是 HTML，也可能是JSON 數(shù)據(jù)谈竿，也可以是音視頻或者 PDF 文件团驱。簡(jiǎn)單的來(lái)劃分，一個(gè)服務(wù)器包含3個(gè)部分：

1/ HTTP 服務(wù)器

2/ 應(yīng)用服務(wù)器

3/ 數(shù)據(jù)庫(kù)

HTTP 服務(wù)器的唯一任務(wù)就是把需要返回給客戶端的資源文件封裝在 HTTP 數(shù)據(jù)包里空凸，這個(gè)資源有可能是它后面的應(yīng)用服務(wù)器動(dòng)態(tài)生成的嚎花，也有可能是保存在硬盤上的靜態(tài)文件。這是所有后端程序都必須有的呀洲，也是直接和我們的瀏覽器通 信紊选，返回給我們數(shù)據(jù)的程序。它的作用就是把它后面的編程語(yǔ)言生成的各種 HTML/CSS/Javascript道逗，打包成一個(gè) HTTP 請(qǐng)求兵罢，然后再封裝到一個(gè) TCP/IP 的數(shù)據(jù)包里發(fā)回給我們。而最常用的兩個(gè) HTTP 服務(wù)器叫做 Apach 和 Nginx滓窍。

應(yīng)用服務(wù)器就是通常意義上所說(shuō)的碼農(nóng)負(fù)責(zé)的部分卖词。他們的職責(zé)就是生成前端需要的HTML/CSS/JS 交給瀏覽器。

后端語(yǔ)言

1/ .net/java

龐大吏夯，復(fù)雜此蜈。但 Java 的優(yōu)點(diǎn)就是適合處理特別大的數(shù)據(jù)量，如果你的項(xiàng)目會(huì)很快實(shí)現(xiàn)大爆發(fā)锦亦，需要處理海量的請(qǐng)求舶替，那么 Java 是一個(gè)不錯(cuò)的選擇令境。

2/ PHP

可以快速上手杠园，相比其他語(yǔ)言，可以更快的為應(yīng)用添加各種新功能舔庶。當(dāng)然抛蚁，可維護(hù)性就另當(dāng)別論了陈醒。

3/ Ruby

非 常接近自然語(yǔ)言，基本上即使不懂編程瞧甩，也能看明白 70% 或 80%钉跷。04 年出現(xiàn)了一個(gè)用 Ruby 編寫的 Web 開(kāi)發(fā)框架 Ruby on Rails，當(dāng)時(shí)的效果是非常震撼的肚逸，以前需要一個(gè)團(tuán)隊(duì)才能搞定的事情爷辙，使用 Ruby on Rails 后 1 個(gè)人就可以勝任了，所以 Ruby on Rails 在極短的時(shí)間內(nèi)就成為了 Ruby 的代名詞朦促，也成為了新手學(xué)習(xí) Web 開(kāi)發(fā)的不二選擇膝晾，但是 Ruby 語(yǔ)言也并非十全十美，快的同時(shí)务冕，他的最大短板就是性能血当。Twitter 最早就是使用 Ruby on Rails 開(kāi)發(fā)的，但是隨著用戶數(shù)的逐步增長(zhǎng)禀忆，Twitter 的宕機(jī)開(kāi)始變得非常頻繁臊旭，后來(lái)他們迫不得已將整個(gè)系統(tǒng)從 Ruby 遷移到到了一個(gè)從 Java 派生出來(lái)的語(yǔ)言 Scala。

4/ node.js

簡(jiǎn)單來(lái)說(shuō)箩退，可以把 node.js 理解為跑在服務(wù)器上的 javascript离熏，再直白一點(diǎn)，就是一個(gè)跑在服務(wù)器上的瀏覽器戴涝，因?yàn)?node.js 最早就是從 chrome 瀏覽器的Javascript 引擎 V8 中剝離出來(lái)的撤奸。相比 Ruby，Node.js 程序可以獲得更高的并發(fā)性能喊括，這在一些高并發(fā)的場(chǎng)景下（比如群聊胧瓜，多人協(xié)作等）會(huì)很有優(yōu)勢(shì)。

5/ 其它（python郑什，closure 等）

6/ 無(wú)后端（leancloud）

無(wú) 后端編程是最近的一個(gè)新趨勢(shì)府喳，但她并非說(shuō)是真的沒(méi)有后端，而只是把后端交給一些第三方的云平臺(tái)蘑拯，比如 Leancloud钝满，F(xiàn)irebase 等。如果你開(kāi)發(fā)一個(gè)手機(jī) App申窘，這樣的好處就是你可以在早期沒(méi)有后端程序員的情況下快速開(kāi)工弯蚜，像Leancloud 這樣的云平臺(tái)已經(jīng)可以勝任大部分的應(yīng)用場(chǎng)景，如果后期業(yè)務(wù)邏輯復(fù)雜之后再尋找合適的后端工程師遷移也不遲剃法。

7/ 最強(qiáng)編程語(yǔ)言 Lisp

如 果要評(píng)選一個(gè)最強(qiáng)的編程語(yǔ)言碎捺，該是哪個(gè)呢？答案就是Lisp。為什么是 Lisp收厨？Lisp 的作者在很早以前就從數(shù)學(xué)的層面總結(jié)了一個(gè)完美的編程語(yǔ)言應(yīng)該具備的 9 種能力晋柱，而 Lisp 就是為了配合他的這個(gè)理論而產(chǎn)生出來(lái)的語(yǔ)言。Hacker News 是由 YC 的創(chuàng)始人 Paul Graham 開(kāi)發(fā)的诵叁，而 Paul Graham 本身就是一個(gè) Lisp 程序員雁竞，他為了開(kāi)發(fā) Hacker News，專門發(fā)明了一種新語(yǔ)言叫做 Arc拧额，但因?yàn)樗腔?Lisp 的碑诉，所以也被歸為了 Lisp 的方言之一。

數(shù)據(jù)庫(kù)

我們平常訪問(wèn)的大部分網(wǎng)站都是需要登錄操作的侥锦，登錄之后我們看到的就是只和自己相關(guān)的那部分內(nèi)容联贩。這些用戶信息是保存在什么地方的呢？這就需要用到數(shù)據(jù)庫(kù)捎拯。關(guān)于數(shù)據(jù)庫(kù)泪幌，代表性的有兩個(gè)：

1/ MySQL

2/ MongoDB

MySQL 是最常用的結(jié)構(gòu)化數(shù)據(jù)庫(kù)，也是大多數(shù)創(chuàng)業(yè)公司的選擇署照。為什么是結(jié)構(gòu)化的祸泪？就是說(shuō)它的表的結(jié)構(gòu)是固定的，比如我們常見(jiàn)的 User 表在 MySQL 中就是這樣的：

如果我們需要取得一條用戶記錄來(lái)檢查他輸入的密碼是否正確建芙，這時(shí)我們就需要使用 SQL没隘，SQL 就是結(jié)構(gòu)化查詢語(yǔ)言。

簡(jiǎn) 單來(lái)說(shuō)禁荸，SQL 數(shù)據(jù)庫(kù)保存的是結(jié)構(gòu)化數(shù)據(jù)右蒲，NOSQL 數(shù)據(jù)庫(kù)則可以保存非結(jié)構(gòu)化數(shù)據(jù)。舉個(gè)例子赶熟，還拿上面的用戶表來(lái)舉例瑰妄，如果我們現(xiàn)在想要給產(chǎn)品集小妹增加一些額外的屬性，比如她給某個(gè)產(chǎn)品點(diǎn)贊可以效果 x2映砖，那么如果是 SQL 數(shù)據(jù)庫(kù)间坐，我們就需要給數(shù)據(jù)庫(kù)增加一個(gè)新的字段來(lái)保存這個(gè)屬性：

但是如果是 MongoDB 這樣的 NOSQL 數(shù)據(jù)庫(kù)，我們就不需要給所有用戶都增加一個(gè)x2的屬性邑退，只需要給產(chǎn)品集小妹單獨(dú)增加就可以了竹宋，NOSQL 中保存到數(shù)據(jù)是如下這個(gè)樣子的：

Cookie 和 Session

服 務(wù)器要處理成千上萬(wàn)用戶的請(qǐng)求，那么他是如何區(qū)分每個(gè)用戶地技，并返回給每個(gè)用戶他所需要的內(nèi)容的 蜈七？這就要涉及到 Cookie 和 Session。我們可以將 Cookie 理解為是服務(wù)器給每個(gè)用戶分配的唯一 ID莫矗，這個(gè) ID 由用戶瀏覽器保存飒硅，而 Session 則是服務(wù)器為了維護(hù)這個(gè)會(huì)話在服務(wù)器端保存的與 cookie 對(duì)應(yīng)的用戶數(shù)據(jù)砂缩。

移動(dòng)端開(kāi)發(fā)

移 動(dòng)端和瀏覽器的區(qū)別就在于，大部分 App狡相，我們打開(kāi)的一瞬間梯轻，就已經(jīng)看到了它的界面食磕，而不用再去向服務(wù)器來(lái)拿顯示界面的 HTML 等文件尽棕。所以移動(dòng)端，開(kāi)發(fā)原生應(yīng)用所運(yùn)用到的技術(shù)（比如 Objective C彬伦，swift）就相當(dāng)于前端的 HTML滔悉，只不過(guò)它是直接保存在應(yīng)用本地的。這樣就產(chǎn)生了一個(gè)問(wèn)題：如何來(lái)獲取應(yīng)用數(shù)據(jù)单绑？如果是網(wǎng)頁(yè)應(yīng)用回官，我們可以直接將數(shù)據(jù)包含在HTML 中一并反饋給瀏覽器；但是對(duì)于移動(dòng)應(yīng)用就需要有一個(gè)專門的協(xié)議來(lái)傳送應(yīng)用需要的數(shù)據(jù)搂橙，這就是 JSON歉提。

移動(dòng)應(yīng)用的前端技術(shù)，目前來(lái)說(shuō)主要有以下三種：

1/ 原生

2/ 混合式

3/ HTML5

HTML5 必經(jīng)要經(jīng)過(guò)瀏覽器這個(gè)中間層区转，所以在性能上多少會(huì)有些損失苔巨，所以如果你的應(yīng)用對(duì)性能特別敏感，原生就會(huì)是比較好的選擇废离；對(duì)于普通的性能要求沒(méi)那么嚴(yán)格的應(yīng) 用來(lái)說(shuō)侄泽，HTML5是完全可以滿足的。而如果已經(jīng)有了一個(gè)移動(dòng)端的網(wǎng)站蜻韭，這種情況下混合式就會(huì)是一個(gè)比較好的選擇悼尾，它可以最大程度的利用已有的資源。如果 說(shuō)你是從頭開(kāi)發(fā)一個(gè)移動(dòng)應(yīng)用肖方，并且這個(gè)應(yīng)用對(duì)用戶體驗(yàn)的要求也不是特別嚴(yán)格闺魏，那么 HTML5 就會(huì)是一個(gè)很好的選擇，HTML5 移動(dòng)應(yīng)用比較顯著的應(yīng)用就是 Dailycost 俯画。

如果說(shuō)開(kāi)發(fā)一個(gè)原生應(yīng)用需要 4-6 周舷胜，那么同樣功能的應(yīng)用如果我們把其中的一部分用 HTML來(lái)實(shí)現(xiàn)，那么可能就只需要 3-4 周的時(shí)間活翩，但是如果我們?nèi)渴褂?HTML 烹骨，可能就只需要1-2周。