一志笼、什么是前端讯蒲？什么是后端痊土？
前端和后端，通俗的說法就是：在手機(jī)（電腦）上跑的代碼是前端墨林，在機(jī)房里跑的代碼是后端赁酝。
用專業(yè)術(shù)語來說就是，現(xiàn)在的網(wǎng)站都是MVC（Model View Controller）架構(gòu)旭等，就是業(yè)務(wù)模型(model)－用戶界面(view)－控制器(controller)酌呆。這三個層次共同組建了一個網(wǎng)站。
MVC（業(yè)務(wù)模型-用戶界面-控制器）
業(yè)務(wù)模型（model）指的是數(shù)據(jù)和業(yè)務(wù)規(guī)則搔耕，就是在數(shù)據(jù)庫中存儲這些數(shù)據(jù)隙袁，并處理這些數(shù)據(jù)間的邏輯。
用戶界面（view）指的是呈現(xiàn)在用戶眼前的這些界面弃榨，標(biāo)題在什么位置菩收，用什么字體，右下角要放個什么圖片之類的鲸睛。
控制器（controller）指的是處理用戶交互娜饵，從界面（view）讀取數(shù)據(jù)，向業(yè)務(wù)模（model）發(fā)送數(shù)據(jù)官辈。
前端工程師箱舞，一般負(fù)責(zé)VC的部分；后端工程師拳亿，則負(fù)責(zé)M的部分晴股。但各個公司對前端和后端的工作劃分并不完全一致，有些工作前后端都可以做风瘦。
二队魏、前端
1.WEB前端的運(yùn)行邏輯
假設(shè)我們要訪問 Google，從我們在瀏覽器輸入 Google.com 到最后這個頁面出現(xiàn)在眼前万搔，這其中涉及許多前端的技術(shù)反應(yīng)和代碼組合胡桨，總體而言可以簡化為兩步：
1）瀏覽器向 Google 的服務(wù)器發(fā)送了一個請求。
2）服務(wù)器收到了一個 HTTP 響應(yīng)瞬雹，這個響應(yīng)中就包含了執(zhí)行這個命令所需要的所有資源（注：可以通過 Chrome 瀏覽器的開發(fā)者工具來進(jìn)一步觀察 HTTP 協(xié)議的運(yùn)行情況昧谊；下圖為 Google 的 HTTP 協(xié)議運(yùn)行情況）。
上圖這個界面看起來很復(fù)雜酗捌，但對于非程序員而言呢诬，HTTP 協(xié)議運(yùn)行情況只要關(guān)注其中的幾個關(guān)鍵部分：
第一列涌哲，即資源的URL；第四列是這個資源的類型尚镰。在第一個請求和后續(xù)的請求之間有一根藍(lán)線阀圾，即進(jìn)度條。而 HTTP 協(xié)議中運(yùn)行的項(xiàng)目越少狗唉，瀏覽器加載的速度越快初烘。圖中Google 就處理得很好，只有 10 個左右的請求分俯。
2. 前端使用的主要語言
1）HTML 和帶樣式的 HTML ：全稱Hyper Text Markup Language肾筐，搭建網(wǎng)頁的基礎(chǔ)語言。就是一組標(biāo)簽和文本的組合缸剪，是一個最基本的網(wǎng)頁吗铐。它已經(jīng)包含了網(wǎng)頁常見的元素，實(shí)際上在 Web早期的很長一段時期內(nèi)杏节，網(wǎng)頁都是這個樣子唬渗。后來隨著使用網(wǎng)絡(luò)的人群越來越廣泛，在HTML3.0中引入了對網(wǎng)頁樣式的定義拢锹，某種程度上可以說谣妻，也是從這個時候開始產(chǎn)生了網(wǎng)頁設(shè)計(jì)師的角色。
2）CSS：想要網(wǎng)頁更精美更酷炫卒稳，就需要用到CSS語言了。CSS能夠?qū)W(wǎng)頁中對象的位置排版進(jìn)行像素級的精確控制他巨，支持幾乎所有的字體字號樣式充坑，擁有對網(wǎng)頁對象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)染突，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言捻爷。由于帶樣式的 HTML 擁有一個缺點(diǎn)，它需要為每個標(biāo)題和文字都設(shè)定樣式份企，工作量非常龐大也榄。 CSS 就是在這樣的情況下誕生了。CSS司志，又稱疊層樣式表甜紫，簡言之是一種用來表現(xiàn) HTML 文件樣式的樣式設(shè)計(jì)語言。CSS 目前的最新版本 CSS3 能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離骂远。
3）Java Script（JS）：差 不多在 CSS誕生的同一時間囚霸，大家開始覺得這樣靜態(tài)的網(wǎng)頁似乎略顯無聊，能不能給網(wǎng)頁加入一些可以動起來的元素激才？比如點(diǎn)擊一個按鈕之后變個顏色拓型。當(dāng)時網(wǎng)景公司的工程師Brendan Eich 就給他們自家的瀏覽器引入了這種實(shí)現(xiàn)動態(tài)效果的腳本語言额嘿，這就是 Javascript（簡稱JS）的誕生。所以通俗來說劣挫，Javascript 就是用來給 HTML 網(wǎng)頁增加動態(tài)功能册养，實(shí)現(xiàn)更炫酷的交互。提 到 Javascript 压固，就得提一下 jQuery 球拦。 jQuery 是一個優(yōu)秀的Javascript 庫。jQuery使用戶能更方便地處理 HTML 邓夕，它能夠使用戶的 HTML 頁面保持代碼和 HTML 內(nèi)容分離,通過 jQuery 刘莹，可以不用在 HTML里面插入一堆 JS 來調(diào)用命令，只需要定義 ID 即可焚刚。此外点弯，由 Twitter 設(shè)計(jì)師 Mark Otto 和 Jacob Thornton合作開發(fā)的 Bootstrap 也是一個受歡迎的前端框架。
如果想要網(wǎng)頁有更酷炫的交互矿咕，就要用到Javascript抢肛。它是通過嵌入到html中來實(shí)現(xiàn)自身功能，主要用于添加交互行為碳柱，可以在多平臺下運(yùn)行（如Windows捡絮、Linux、Mac莲镣、Android福稳、iOS等）,還可以控制cookies。
4）jQuery：這是一個時下最流行的Javascript庫瑞侮，主要面向查詢（Query）的圆。簡單理解，就是javascript里面那些需要用一行行代碼實(shí)現(xiàn)的體力活半火，在jQuery里面可以直接打包成模塊越妈，調(diào)取對應(yīng)的接口使用，解放了開發(fā)者更多的時間钮糖。這種模塊化的使用方式讓開發(fā)者可以很快就開發(fā)出酷炫的頁面梅掠。
5）Bootstrap：Bootstrap也是對Javascript進(jìn)行封裝，它在jQuery的基礎(chǔ)上進(jìn)行更加人性化的完善店归，其實(shí)就是更方便了阎抒。它有很多現(xiàn)成的組件，比如導(dǎo)航欄娱节、下拉菜單挠蛉、按鈕，都定義好了樣式和交互肄满，直接成套拿來用就行了谴古。
這么看上去质涛，前端語言的內(nèi)在關(guān)系就比較好理解了，舉個栗子：好比一個互聯(lián)網(wǎng)產(chǎn)品就是一個妹紙掰担，html是搭建了她的身體汇陆，這個是基礎(chǔ)（要先有個妹紙）；CSS是給她穿上漂亮衣服带饱；Javascript是教會她化妝毡代，先隔離后粉底，先眼線后睫毛勺疼；jQuery是把化妝進(jìn)行整合教寂，主要負(fù)責(zé)實(shí)現(xiàn)“一個步驟無瑕底妝”；Bootstrap也是對化妝進(jìn)行整合执庐，主要負(fù)責(zé)實(shí)現(xiàn)“一個步驟清純大眼妝”和“一個步驟性感唇妝”酪耕，漸漸地，html搭建出來的妹紙就變成女神了……
3.HTML簡史及響應(yīng)式設(shè)計(jì)
HTML 在剛誕生的前 10 年發(fā)展是非常迅速的轨淌，在 1999 年迂烁，我們現(xiàn)在常說的 HTML5 的上一個版本 HTML4.0.1 就已經(jīng)發(fā)布了，那么為什么從 4.0 到 5.0 會拖了 15 年之久递鹉？
首 先盟步，HTML4 的發(fā)布時間和門戶時代（即 Web 1.0 時代）是基本吻合的，也就是說 HTML4實(shí)際上是為門戶型網(wǎng)站設(shè)計(jì)的躏结。在門戶網(wǎng)站經(jīng)歷的 4却盘，5 的年發(fā)展之后，大家開始覺得只是單一接受信息的互聯(lián)網(wǎng)太過無聊枯燥了媳拴，差不多2004谷炸、2005 年開始，大家希望在網(wǎng)頁中加入更多的互動元素禀挫，也就是我們常說的 Web 2.0。
但是這個時候大家就發(fā)現(xiàn)拓颓，為 Web 1.0 設(shè)計(jì)的 HTML4 無法勝任這個工作语婴，但是有另外一個技術(shù)卻非常適合，那就是 Flash驶睦。所以在Web 2.0 的早期砰左，當(dāng)時最炫酷的網(wǎng)站有很多是完全用 Flash 開發(fā)的，在以后的很長一段時間里场航，有很多網(wǎng)站都是 HTML 和 Flash的混合式網(wǎng)站缠导。所以在 2005 – 2010 年這段時間，HTML5 中的新標(biāo)準(zhǔn)主要是為了取代 Flash溉痢。
剛剛搞定了 Flash僻造，又進(jìn)入了移動開發(fā)時代憋他，所以 HTML5 又花了 5 年時間制定各種針對移動平臺的標(biāo)準(zhǔn)。但是到目前為止髓削，雖然HTML5 已定定稿竹挡，但是對移動平臺的適應(yīng)其實(shí)還在進(jìn)行中，所以在未來很長一段時間內(nèi)立膛，就像當(dāng)初的 Flash一樣揪罕，我們會看到越來越多的混合式應(yīng)用。
在 iPhone 出現(xiàn)之前宝泵，大家訪問 Web 的主要方式還是通過桌面瀏覽器好啰，所以設(shè)計(jì)網(wǎng)頁時只要考慮桌面瀏覽器的顯示效果就足夠了。但是在iPhone 和 iPad出現(xiàn)之后儿奶，就需要考慮同一個網(wǎng)頁在不同設(shè)備上的顯示效果筹麸，第一個問題的答案就是響應(yīng)式，響應(yīng)式的核心就是讓同一個網(wǎng)頁可以在不同設(shè)備上呈現(xiàn)出不同的顯示效果淋袖，主要是通過CSS來實(shí)現(xiàn)的婴削。
除了響應(yīng)式設(shè)計(jì)，HTML 在移動端遇到的另外兩個問題就是如何利用移動設(shè)備的各種傳感器隙券，比如GPS男应，攝像頭等等；以及性能問題娱仔。為了解決這些問題沐飘，HTML5中添加了地理位置，拍照牲迫，3D 動畫加速等等API耐朴，可以部分的利用手機(jī)設(shè)備的一些新硬件，并且新的 API 還在不斷的加入進(jìn)來盹憎，這也是為什么現(xiàn)在的 HTML5應(yīng)用可以越來越炫酷的原因筛峭。但是，HTML5 并不是專為移動設(shè)備設(shè)計(jì)的陪每，它是由 HTML5影晓，CSS3 以及大量的 Javascript API共同組成的一個標(biāo)準(zhǔn)合集，微信中的 HTML5 應(yīng)用只是 HTML5 應(yīng)用場景中的很小一部分檩禾。
4.如何評估前端工程師的能力挂签？
前端從初階到高階分別為：
?只會基本的HTML/CSS, 可以將設(shè)計(jì)圖轉(zhuǎn)化為HTML/CSS, 俗稱切圖；
?懂一些Javascript盼产，主要是使用現(xiàn)成的框架饵婆，jQuery，Bootstrap等等戏售；
?知道jQuery侨核，Bootstrap的局限草穆，在需要時可以直接編寫原生JS/CSS；
?對JS/CSS非常了解芹关，熱衷于利用瀏覽器的各種最新特性實(shí)現(xiàn)各種炫酷效果续挟；
?可以根據(jù)需要寫出封裝良好的JS類庫或者開發(fā)框架；
5.前端學(xué)習(xí)資料
http://www.w3school.com.cn/html/
https://github.com/alex/what-happens-when
https://qdan.me/list/VNBugw7ObupFRdlE
大 家可能比較關(guān)心如果我要開發(fā)一個網(wǎng)站需要多少時間侥衬？這個問題雖然很難回答诗祸，元一還是來試著回答了。現(xiàn)在前端有了jQuery轴总，bootstrap 這樣的框架直颅，后端又有了 Ruby on Rails 這樣的快速 Web開發(fā)框架，如果從頭學(xué)的話怀樟，像是一個簡易的 Pinterest功偿，大概一個月就可以了。如果是一個有經(jīng)驗(yàn)的程序員往堡，可能 1個星期就可以開發(fā)出一個大概的原型出來械荷。
三、后端
1.后端服務(wù)器
后端的任務(wù)實(shí)際上就是向前端提供需要顯示網(wǎng)頁和 APP 內(nèi)容的數(shù)據(jù)虑灰，可能是 HTML吨瞎，也可能是JSON 數(shù)據(jù)，也可以是音視頻或者 PDF 文件穆咐。簡單的來劃分颤诀，一個服務(wù)器包含3個部分：
1) HTTP 服務(wù)器
2)應(yīng)用服務(wù)器
3 ）數(shù)據(jù)庫
HTTP 服務(wù)器的唯一任務(wù)就是把需要返回給客戶端的資源文件封裝在 HTTP數(shù)據(jù)包里，這個資源有可能是它后面的應(yīng)用服務(wù)器動態(tài)生成的对湃，也有可能是保存在硬盤上的靜態(tài)文件崖叫。這是所有后端程序都必須有的，也是直接和我們的瀏覽器通信拍柒，返回給我們數(shù)據(jù)的程序心傀。它的作用就是把它后面的編程語言生成的各種 HTML/CSS/Javascript，打包成一個 HTTP請求拆讯，然后再封裝到一個 TCP/IP 的數(shù)據(jù)包里發(fā)回給我們剧包。而最常用的兩個 HTTP 服務(wù)器叫做 Apach 和 Nginx。
應(yīng)用服務(wù)器就是通常意義上所說的碼農(nóng)負(fù)責(zé)的部分往果。他們的職責(zé)就是生成前端需要HTML/CSS/JS 交給瀏覽器。
2.后端語言
1） C#/Java：這兩者都是名聲顯赫的程序設(shè)計(jì)語言一铅，功能強(qiáng)大且完善陕贮。但入門難度也比較高，復(fù)雜潘飘。 Java 的優(yōu)點(diǎn)就是適合處理特別大的數(shù)據(jù)量肮之，如果你的項(xiàng)目會很快實(shí)現(xiàn)大爆發(fā)掉缺，需要處理海量的請求，那么 Java 是一個不錯的選擇戈擒。
2）PHP：PHP最早是Personal Home Page的縮寫（就是這么直白眶明！任性！）筐高，后來更名為Hypertext Preprocessor搜囱，就是超文本預(yù)處理器。PHP的優(yōu)勢是可以被嵌入html語言柑土，所以實(shí)用性強(qiáng)蜀肘、入門簡單、容易上手稽屏，但缺點(diǎn)同樣很多扮宠，因?yàn)槭情_源沒有標(biāo)準(zhǔn)框架，等等吧狐榔。
3）Ruby：Ruby是一種面向開發(fā)者的語言坛增，語法簡單（“懂英語的人都能學(xué)會”——張?jiān)唬⒅厝诵曰∧澹皇且晃稄臋C(jī)器的角度著想收捣。所以Ruby的優(yōu)點(diǎn)就是易懂易上手，開發(fā)效率高被廓，但數(shù)據(jù)量大時性能不足坏晦。
04 年出現(xiàn)了一個用 Ruby 編寫的 Web 開發(fā)框架 Ruby onRails，當(dāng)時的效果是非常震撼的嫁乘，以前需要一個團(tuán)隊(duì)才能搞定的事情昆婿，使用 Ruby on Rails 后 1 個人就可以勝任了，所以 Rubyon Rails 在極短的時間內(nèi)就成為了 Ruby 的代名詞蜓斧，也成為了新手學(xué)習(xí) Web 開發(fā)的不二選擇仓蛆，但是 Ruby語言也并非十全十美，快的同時挎春，他的最大短板就是性能看疙。Twitter 最早就是使用 Ruby on Rails開發(fā)的，但是隨著用戶數(shù)的逐步增長直奋，Twitter 的宕機(jī)開始變得非常頻繁能庆，后來他們迫不得已將整個系統(tǒng)從 Ruby 遷移到到了一個從 Java派生出來的語言 Scala。
4）Node.js：這是基于Javascript的一種語言脚线，適合有前端基礎(chǔ)的人進(jìn)入后端使用搁胆；采用異步編程模型，處理高并發(fā)時有性能優(yōu)勢。簡單來說渠旁，可以把 node.js 理解為跑在服務(wù)器上的 javascript攀例，再直白一點(diǎn)，就是一個跑在服務(wù)器上的瀏覽器顾腊，因?yàn)?node.js最早就是從 chrome 瀏覽器的Javascript 引擎 V8 中剝離出來的粤铭。相比 Ruby，Node.js程序可以獲得更高的并發(fā)性能杂靶，這在一些高并發(fā)的場景下（比如群聊梆惯，多人協(xié)作等）會很有優(yōu)勢。
5）Lisp：號稱業(yè)界最強(qiáng)的編程語言沒有之一伪煤，更多是Geek和科學(xué)家們的鐘愛加袋。Lisp 的作者在很早以前就從數(shù)學(xué)的層面總結(jié)了一個完美的編程語言應(yīng)該具備的 9 種能力，而 Lisp就是為了配合他的這個理論而產(chǎn)生出來的語言抱既。Hacker News 是由 YC 的創(chuàng)始人 Paul Graham 開發(fā)的职烧，而 PaulGraham 本身就是一個 Lisp 程序員，他為了開發(fā) Hacker News防泵，專門發(fā)明了一種新語言叫做 Arc蚀之，但因?yàn)樗腔?Lisp的，所以也被歸為了 Lisp 的方言之一捷泞。
6）無后端：一些移動應(yīng)用初期可以沒有后端足删，實(shí)現(xiàn)項(xiàng)目的快速啟動。無后端（noBackend）致力于讓構(gòu)建一個應(yīng)用的過程變得更簡單锁右，實(shí)際上是通過前端代碼抽象成后端接口失受。可用的工具有FacebookParse, Google Firebase以及國內(nèi)的LeanCloud咏瑟。
無后端編程是最近的一個新趨勢拂到，但她并非說是真的沒有后端，而只是把后端交給一些第三方的云平臺码泞，比如 Leancloud兄旬，F(xiàn)irebase等。如果你開發(fā)一個手機(jī) App余寥，這樣的好處就是你可以在早期沒有后端程序員的情況下快速開工领铐，像Leancloud這樣的云平臺已經(jīng)可以勝任大部分的應(yīng)用場景，如果后期業(yè)務(wù)邏輯復(fù)雜之后再尋找合適的后端工程師遷移也不遲宋舷。
7）其他（python绪撵，closure 等）
2.數(shù)據(jù)庫
數(shù)據(jù)庫是按照數(shù)據(jù)結(jié)構(gòu)對數(shù)據(jù)進(jìn)行存儲、組織和管理的庫祝蝠。你可以簡單地把數(shù)據(jù)庫想象成公司的文件柜莲兢，每個柜子里放不同的文件汹来，通過柜子編號可以找到你要的資料；把資料放進(jìn)去時改艇，也放到對應(yīng)編號的柜子里去。而在數(shù)據(jù)庫中坟岔，還涉及到數(shù)據(jù)的不同類型谒兄、數(shù)據(jù)間的映射關(guān)系等等的信息。
數(shù)據(jù)庫有很多種類型社付，常見的有ORACLE承疲、DB2、SQL Server鸥咖、Sybase燕鸽、Informix、MySQL啼辣、VF啊研、Access等等（是的，這些都是不同類型的數(shù)據(jù)庫）鸥拧，這里主要介紹的時MySQL和MongoDB党远。
1）MySQL：MySQL是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。什么是關(guān)系型富弦？就是說有關(guān)聯(lián)的數(shù)據(jù)是保存在同一個表內(nèi)沟娱，而不是把所有數(shù)據(jù)堆在一起，這樣查起來就很方便腕柜。MySQL的優(yōu)點(diǎn)是體積小济似、速度快、成本低盏缤，是很多中小型網(wǎng)站的首選砰蠢。但是，關(guān)系型數(shù)據(jù)庫的缺點(diǎn)是在海量訪問并發(fā)和海量數(shù)據(jù)管理時的力不從心蛾找，而且對數(shù)據(jù)庫的升級和擴(kuò)展很麻煩娩脾，往往需要停機(jī)維護(hù)和數(shù)據(jù)遷移。這是令人難以忍受的打毛。
MySQL 是最常用的結(jié)構(gòu)化數(shù)據(jù)庫柿赊，也是大多數(shù)創(chuàng)業(yè)公司的選擇。為什么是結(jié)構(gòu)化的幻枉？就是說它的表的結(jié)構(gòu)是固定的碰声，比如我們常見的 User 表在 MySQL 中就是這樣的：
如果我們需要取得一條用戶記錄來檢查他輸入的密碼是否正確，這時我們就需要使用 SQL熬甫，SQL 就是結(jié)構(gòu)化查詢語言胰挑。
簡單來說，SQL 數(shù)據(jù)庫保存的是結(jié)構(gòu)化數(shù)據(jù)，NOSQL數(shù)據(jù)庫則可以保存非結(jié)構(gòu)化數(shù)據(jù)瞻颂。舉個例子豺谈，還拿上面的用戶表來舉例，如果我們現(xiàn)在想要給產(chǎn)品小妹增加一些額外的屬性贡这，比如她給某個產(chǎn)品點(diǎn)贊可以效果x2茬末，那么如果是 SQL 數(shù)據(jù)庫，我們就需要給數(shù)據(jù)庫增加一個新的字段來保存這個屬性：
但是如果是 MongoDB 這樣的 NOSQL 數(shù)據(jù)庫盖矫，我們就不需要給所有用戶都增加一個x2的屬性丽惭，只需要給產(chǎn)品集小妹單獨(dú)增加就可以了，NOSQL 中保存到數(shù)據(jù)是如下這個樣子的：
2）MongoDB：MongoDB是一個基于分布式文檔存儲的數(shù)據(jù)庫辈双，介于關(guān)系型數(shù)據(jù)庫和非關(guān)系型數(shù)據(jù)庫之間责掏，他可以支持很松散的數(shù)據(jù)結(jié)構(gòu)，所以能夠支持較復(fù)雜的數(shù)據(jù)類型湃望；同時又能支持關(guān)系型數(shù)據(jù)庫表單查詢的大部分功能换衬，所以在一定程度上集成了兩者的優(yōu)點(diǎn)。
3.服務(wù)器如何辨別用戶是誰喜爷？
服務(wù)器辨別用戶是通過Cookie和Session實(shí)現(xiàn)的冗疮。
1）Cookie：Cookie是一種數(shù)據(jù)，它由服務(wù)器生成檩帐，發(fā)送到你的瀏覽器术幔，然后由瀏覽器保存到本地的某個文件夾里，等你下次再登陸這個網(wǎng)站時湃密，瀏覽器就會把你的Cookie發(fā)送給服務(wù)器诅挑，這時服務(wù)器就知道了“啊原來又是你丫”。一條Cookie的生命一般是一個輪回泛源，就是當(dāng)你第二次登錄網(wǎng)站時拔妥，第一次登陸的那條Cookie會被覆蓋；但也可以指定周期达箍，比如“一個月內(nèi)自動登陸”這種情況……
2）Session：Session實(shí)際上是一種時間的概念没龙，就是你打開一個網(wǎng)站到關(guān)閉這個網(wǎng)站之間的時間。這段時間里缎玫，你在網(wǎng)站上的動作都被當(dāng)做Session保存在服務(wù)器中硬纤，比如說“返回上一個瀏覽頁面”這種動作，就是由Session實(shí)現(xiàn)的赃磨。Session保存在服務(wù)器上筝家，關(guān)閉了網(wǎng)站怎么辦？你的Session會被編上號邻辉，以SessionID的形式發(fā)送到瀏覽器溪王，以Cookie的形式保存在本地腮鞍，這就是Cookie和Session的親密合作。
當(dāng)然各個網(wǎng)站的策略不太一致莹菱，下次瀏覽某網(wǎng)站時移国，可以留意下自己的操作行為是如何被記錄的。
4.移動開發(fā)
開發(fā)移動應(yīng)用程序主要分為以下三種情況：
1）原生：指的是完全基于移動平臺寫代碼（比如iOS平臺支持Xcode和Objective-C道伟，安卓平臺支持Eclipse和Java）桥狡，看上去外觀最好，用起來性能最佳皱卓，實(shí)現(xiàn)的功能最多，當(dāng)然也就比較費(fèi)工夫部逮。適合對速度娜汁、性能特別敏感的應(yīng)用，如拍照兄朋、視頻類掐禁，通常開發(fā)周期為4-6周；
2）HTML5：使用標(biāo)準(zhǔn)的Web技術(shù)（通常是HTML5颅和、JavaScript和CSS）傅事，可以只編寫一次就跨平臺運(yùn)行，更快做跨屏適配峡扩，效果很酷炫蹭越，但也有一些功能的局限，通常開發(fā)周期為1-2周教届；
3）混合式：就是將HTML5嵌入到原生器中响鹃，集成了以上兩者的優(yōu)點(diǎn)和缺點(diǎn)。適合已有web端產(chǎn)品案训，想以最低成本遷移到移動端买置，通常開發(fā)周期為3-4周。
四强霎、web建站技術(shù)
1. 首先網(wǎng)站訪問是一個什么過程忿项？
假設(shè)你在瀏覽器地址欄輸入這個問題的地址
http://www.zhihu.com/question/22689579?訪問過程和下圖差不多。
2.HTML與CSS
你家電腦拿到一個 html （就是上圖 HTTP 響應(yīng)的 body 里的內(nèi)容）之后城舞，就會對它進(jìn)行解析渲染轩触。HTML 就是一種標(biāo)記語言。類比一下椿争，大家在論壇上經(jīng)常會用一些代碼來添加富文本內(nèi)容怕膛，舉一些栗子：
[img]圖片地址[/img]?用來貼圖
[url]超鏈接[/url]?用來貼地址
[del]呵呵[/del]?表示標(biāo)簽里的文字應(yīng)該被刪掉（默認(rèn)添加刪除線效果）
這種論壇代碼也是一種標(biāo)記語言，HTML 的作用就和它差不多秦踪。服務(wù)器返回給你的html文件里面褐捻，寫的是一些代碼掸茅，大概是這樣的：
瀏覽器拿到這些代碼之后，分析一下給你渲染好頁面顯示出來柠逞，如果不用css昧狮，效果是這樣的，按照瀏覽器默認(rèn)的樣式顯示出列表板壮、圖片逗鸣、超鏈接、輸入框绰精、按鈕等等：
是不是覺得默認(rèn)樣式有點(diǎn)看瞎狗眼呢……所以很多時候我們需要自定義樣式撒璧，現(xiàn)行通用的規(guī)定樣式的語言是CSS，我們可以用它寫一些定義樣式的代碼笨使，然后在html 文件里用一個標(biāo)簽把這些規(guī)定樣式的 CSS 代碼與表達(dá)內(nèi)容語義的 HTML代碼關(guān)聯(lián)起來卿樱，然后你就能看到一個符合人類正常審美的頁面了:
CSS 代碼的格式基本是：
第一個屬性對應(yīng)的代碼翻譯成人話，就是它的位置（position）應(yīng)該是不動（fixed）的硫椰，瀏覽器會兢兢業(yè)業(yè)地去實(shí)現(xiàn)這段代碼要求實(shí)現(xiàn)的效果繁调， 所以你在頁面上翻來翻去頂上那個導(dǎo)航條都會死死地黏在窗口頂部不跟著滾動。
再拿里面的其他幾個屬性做例子解釋一下就是：
left 和 top 為零指明這個導(dǎo)航條要緊貼著窗口的左上角靶草；
width 和 height 指定這個導(dǎo)航條的寬和高蹄胰；
background 指明這個導(dǎo)航條的背景是一種漸變的藍(lán)色；
瀏覽器就會根據(jù)這些 CSS 代碼奕翔，“畫”出對應(yīng)的樣式裕寨。
3.hHTML5與XHTML
像人的語言一樣，網(wǎng)絡(luò)上的網(wǎng)頁里的 HTML代碼也不一定是標(biāo)準(zhǔn)的糠悯，好比有時候你發(fā)音不太標(biāo)準(zhǔn)帮坚，別人會去猜測你說的到底是什么一樣，有些時候前端程序猿不小心寫錯了
HTML互艾，瀏覽器也會試圖猜測他們原來想寫的是什么试和，做對應(yīng)的渲染，而猜是要有一個常識做依據(jù)的纫普。加上有些瀏覽器支持一些標(biāo)簽阅悍，有一些又不支持，以及其他混亂的情況昨稼，為了防止大家雞同鴨講节视，我們需要對HTML 代碼里能有什么標(biāo)簽，標(biāo)簽怎么寫假栓，標(biāo)簽可以有什么屬性這些東西有一定的共識寻行，建立一個通行的標(biāo)準(zhǔn)，HTML5就是其中一個比較新的標(biāo)準(zhǔn)匾荆。這個標(biāo)準(zhǔn)新加了很多可以用的標(biāo)簽和屬性拌蜘，然后各大瀏覽器也吭哧吭哧按這個標(biāo)準(zhǔn)去實(shí)現(xiàn)了很多這些新加的標(biāo)簽和屬性杆烁，本來前端程序員要寫一堆代碼去實(shí)現(xiàn)的效果，現(xiàn)在瀏覽器都給你實(shí)現(xiàn)好了简卧，只要寫兩三行兔魂，調(diào)用一下瀏覽器給你實(shí)現(xiàn)的部分就能搞定，簡單愉快举娩，所以很多人都在熱情地推廣這個標(biāo)準(zhǔn)~（當(dāng)然新標(biāo)準(zhǔn)也不可能是完美的析校，總會有一些問題，怕跑題這里按下不表~）
至于 XHTML铜涉，就是 HTML 的近親 XML 和 HTML 自己的雜交品種智玻，對語法要求比較嚴(yán)格，并且為了兼容 XML芙代，在語法上與 HTML 有一些不同~
4.JavaScript與瀏覽器腳本
有了表示內(nèi)容和語義的 HTML尚困，規(guī)定樣式的 CSS，得到的是一個靜態(tài)的頁面链蕊，沒什么動畫（其實(shí)用 CSS還是可以有一些動畫的，不過這個跑題了）谬泌，按 F5 才會刷新數(shù)據(jù)滔韵，都21世紀(jì)了，這么呆板單調(diào)的網(wǎng)頁怎么能展現(xiàn)我大智人種族的創(chuàng)造性口胡掌实！于是我們有了 Javascript（JS）來給頁面添加一些動態(tài)的效果陪蜻，比如知乎問題的標(biāo)簽，鼠標(biāo)移上去會彈出一個小窗口贱鼻，這個就是 JS 實(shí)現(xiàn)的效果啦宴卖。
瀏覽器都會幫你實(shí)現(xiàn)一些 JS 可以用的工具（函數(shù)，對象什么的）邻悬，你只要寫一些 JS 的代碼症昏，保存在 xxx.js 里，在 html 文件中用 關(guān)聯(lián)進(jìn)來就可以用了父丰，像上圖這個效果應(yīng)該就包括了鼠標(biāo)懸停到標(biāo)簽上時創(chuàng)建一個新的小窗口用 JS 向知乎服務(wù)器發(fā)送一個請求肝谭，得到這個小窗口應(yīng)該顯示的數(shù)據(jù)，放在這個小窗口里（這就是所謂的AJAX蛾扇，不用刷新就能與服務(wù)器進(jìn)行交互攘烛，更新頁面的一小部分~）
瀏覽器拿到這樣的代碼，就會解析并實(shí)現(xiàn)出相應(yīng)的效果镀首，樓主問的瀏覽器腳本坟漱，指的就是這樣子的代碼。其實(shí)用來寫瀏覽器腳本的更哄，也不是非得JavaScript 不可芋齿，當(dāng)年還為到底用什么語言寫這種代碼有過一段戰(zhàn)火紛飛的時期腥寇，但現(xiàn)在塵埃落定，各大瀏覽器都默認(rèn)了：請用 JS 寫這些動態(tài)效果的代碼給我解析~
5.Web? Server與Web? Services
瀏覽器給服務(wù)器發(fā)一個請求沟突，服務(wù)器不是一看就知道怎么響應(yīng)的花颗。首先這些請求和響應(yīng)要有一個通用的寫法，也就是要有一個協(xié)議惠拭，常用的是 HTTP 協(xié)議扩劝。
像最前面的圖，服務(wù)器的響應(yīng)寫了一個狀態(tài)碼 200 OK 职辅，是 HTTP 協(xié)議里約定俗成的一個東西棒呛，服務(wù)器寫 200 OK 在響應(yīng)里，表示“你請求的這個東西我有”域携，如果是404 Not Found簇秒，就是“你請求的這個東西我這里沒有”。
HTTP 響應(yīng)里還包括很多東西秀鞭，比如 Content-type表示服務(wù)器發(fā)過來的文件類型是什么（文本趋观？動畫？圖片锋边？音頻皱坛？），這樣發(fā)過去了人家瀏覽器好知道怎么展示給用戶看豆巨。人家服務(wù)器怎么知道按協(xié)議要寫什么東西進(jìn)去呢剩辟，這就是Web Server 干活的時候了。
形象化一下HTTP響應(yīng)往扔，大概就長這樣：
再上個錘子贩猎，瀏覽器和服務(wù)器之間請求響應(yīng)的過程大致是長這樣的，右下角的那些東西就是由 Web Server 生成的（服務(wù)器腳本可以做一些改動萍膛，但這些一般是 Web Server 的份內(nèi)活）：
再比如說很多時候你訪問一個網(wǎng)站吭服，瀏覽器里輸?shù)牡刂凡]有寫明你請求的文件，比如這個問題的地址是：http://www.zhihu.com/question/2268957
但知乎的服務(wù)器其實(shí)返回了一個html給你蝗罗，服務(wù)器怎么知道這個地址對應(yīng)要返回什么樣的 html 代碼給你的噪馏？也是 Web Server 干的活。除了瀏覽器輸?shù)刂非没剀囘@種赤裸裸的訪問绿饵，客戶端與服務(wù)器的交互還有很多種欠肾，比如：前面提到的用 JS 完成的 AJAX，有點(diǎn)像瀏覽器和服務(wù)器之間的悄悄話~還有其他應(yīng)用軟件與服務(wù)器的交互拟赊，比如：
微信刺桃、QQ 與騰訊的服務(wù)器的交互
網(wǎng)游客戶端與網(wǎng)游公司服務(wù)器的交互
搜索引擎用來搜集網(wǎng)頁信息的程序（爬蟲）與各種各樣的網(wǎng)站服務(wù)器的交互
只要你知道用什么地址訪問、怎樣訪問人家的服務(wù)器吸祟，并且有相應(yīng)權(quán)限瑟慈，你也可以自己寫一些程序去和他們的服務(wù)器交互（比如用微博API – 新浪微博API獲取微博桃移，開發(fā)第三方應(yīng)用或者做數(shù)據(jù)分析）。
從這些栗子里可以看出葛碧，客戶端與服務(wù)器的交互的主體借杰、客體、載體是五花八門的：
服務(wù)器可以是大型機(jī)也可以是個人電腦进泼，只要能跑相應(yīng)的程序就行.
客戶端像前面舉的栗子里一樣蔗衡，可以是各種軟件，而且這些軟件不一定運(yùn)行在個人電腦上乳绕，也可以是手機(jī)绞惦、平板、智能穿戴設(shè)備等等洋措。
有時候不是傳生成好的 HTML 或者其他服務(wù)器上已經(jīng)有的文件济蝉，而是傳輸經(jīng)過一定邏輯處理后生成的字符串或者其他各種封裝好的數(shù)據(jù)。
像前面提到的 HTML需要有一定標(biāo)準(zhǔn)一樣菠发，為了防止混亂和雞同鴨講王滤，我們又需要先對這些機(jī)器需要怎么交互達(dá)成一定共識，再讓它們進(jìn)行交流滓鸠。人與人之間通信淑仆，需要先有一種大家都認(rèn)識的寫法（比如簡體字/繁體字）和一種彼此都懂的語言（比如普通話/廣東話）。要讓這些形形色色的機(jī)器能夠通過網(wǎng)絡(luò)進(jìn)行交互哥力，我們就需要指明一種協(xié)議（比如HTTP/HTTPS）和一種數(shù)據(jù)封裝格式（比如 HTML/XML），Web Server 提供的 WebService墩弯，指的就是這種協(xié)議+格式的交流體系吩跋。不過 Web Service 的生態(tài)系統(tǒng)和 HTML的標(biāo)準(zhǔn)不一樣，用戶可以選擇的協(xié)議和數(shù)據(jù)封裝格式更多渔工，普通的網(wǎng)站訪問用的 HTTP + HTML只是其中一種锌钮，一些封閉系統(tǒng)內(nèi)的交流還可以自己定義一個協(xié)議和格式來用（比如 QQ）。
Web Service 傳輸?shù)臄?shù)據(jù)再經(jīng)由本地客戶端（瀏覽器引矩、QQ/微信梁丘，網(wǎng)游客戶端等）的分析渲染，就能夠以普通人能夠理解的形式展現(xiàn)出來旺韭。此外還有一些 Web Service 并不是為普通用戶設(shè)計(jì)的氛谜，像前面提到的微博API，是用來給程序猿進(jìn)行二次開發(fā)的~
除了提供 Web Service区端， Web Server還會兼顧很多功能值漫，包括提供緩存，平衡負(fù)載织盼，這樣在訪問量比較大的時候能有有條不紊地接客杨何。常見的現(xiàn)成的 Web Server 有開源的Apache酱塔、Nginx和微軟的IIS，你也可以用一些工具（比如 Node.js ）自己定制一個危虱。因?yàn)?Web Server需要比較好的性能羊娃，所以投產(chǎn)時用的 Web Server通常是C/C++/Java寫的，但是其實(shí)很多語言都可以寫埃跷，而且配合上語言底層的優(yōu)化和好的模型蕊玷，其他語言寫的 WebServer也可以有不錯的表現(xiàn)。
6.PHP,服務(wù)器腳本捌蚊，Web Framework
開頭那張圖里服務(wù)器接到請求之后可以給訪客發(fā)送對應(yīng)的文件集畅，但21世紀(jì)的服務(wù)器怎么可能只會“接請求-發(fā)文件”這么弱智的一招呢，人家還可以處理你上傳來的文件的缅糟！還可以接受你發(fā)過來的各種請求挺智，去操作服務(wù)器本地的文件or數(shù)據(jù)庫的！要干這些事窗宦，自然服務(wù)器那邊也少不了要有代碼了赦颇，這些代碼就是服務(wù)器腳本。前面說的Web Service 傳輸?shù)臄?shù)據(jù)赴涵，主要也是由服務(wù)器腳本生成媒怯，再交由 Web Server ，按照某種協(xié)議套好整個響應(yīng)的格式髓窜，返回給客戶端的扇苞。
同一個網(wǎng)址，每個人看到的頁面不一定是一樣的寄纵，比如知乎首頁的網(wǎng)址都是：http://www.zhihu.com/鳖敷，但是沒登陸和登陸之后看到的東西不一樣，登陸之后每個人看到的導(dǎo)航欄的用戶信息程拭，關(guān)注的動態(tài)定踱，都不一樣。服務(wù)器腳本可以對這些不同的狀態(tài)恃鞋，生成不同的頁面崖媚，交給 Web Server 返回給瀏覽器。
知乎的主頁給大家看到的 html 整體來說是差不多的恤浪，都有導(dǎo)航欄畅哑，左邊是關(guān)注的動態(tài)，右邊是廣告和邊欄水由，每一塊的整體構(gòu)造大同小異敢课，只是一些地方內(nèi)容有所區(qū)別。服務(wù)器腳本就是利用已知的數(shù)據(jù)，在這些因人而異的地方填入相應(yīng)的內(nèi)容直秆，生成給每個人看的頁面濒募。
PHP就是一種常見的用來寫服務(wù)器腳本的語言，其實(shí)只要是能拿來寫大家傳輸數(shù)據(jù)的通用接口（CGI）的語言都可以用來寫服務(wù)器腳本（也就是說幾乎所有編程語言都可以寫= =b）圾结，只是因?yàn)楝F(xiàn)成工具的豐富程度和專攻程度不一樣瑰剃，所以有一些語言在寫服務(wù)器端腳本的時候會比較熱門。
為了方便筝野，我們在寫服務(wù)器腳本的時候晌姚，通常還會用個同語言寫的WebFramework來處理各種細(xì)節(jié)，防御一些常見的攻擊歇竟，提供跨站認(rèn)證（比如用已有的微博賬號注冊其他網(wǎng)站）的接口挥唠，利用cookie處理登陸狀態(tài)和用戶設(shè)置，生成網(wǎng)頁模版之類的焕议。如果你用C# 或者 Visual Basic 寫服務(wù)器腳本宝磨，就可以用 ASP.NET這個框架實(shí)現(xiàn)這些功能，幫你省點(diǎn)麻煩盅安。不過現(xiàn)在不少人是反過來為了一個好用的 Web Framework 去選擇它對應(yīng)的服務(wù)器腳本語言的唤锉。
7.一個普通網(wǎng)站的訪問過程
簡單概括一下，對于我們普通的網(wǎng)站訪問别瞭，涉及到的技術(shù)就是：
用戶操作瀏覽器訪問窿祥，瀏覽器向服務(wù)器發(fā)出一個 HTTP 請求；
服務(wù)器接收到 HTTP 請求蝙寨，Web Server 進(jìn)行相應(yīng)的初步處理晒衩，使用服務(wù)器腳本生成頁面；
服務(wù)器腳本（利用Web Framework）調(diào)用本地和客戶端傳來的數(shù)據(jù)墙歪，生成頁面听系；
Web Server 將生成的頁面作為 HTTP 響應(yīng)的 body，根據(jù)不同的處理結(jié)果生成 HTTP header箱亿，發(fā)回給客戶端；
客戶端（瀏覽器）接收到 HTTP 響應(yīng)弃秆，通常第一個請求得到的 HTTP 響應(yīng)的 body 里是 HTML 代碼届惋，于是對 HTML 代碼開始解析；
解析過程中遇到引用的服務(wù)器上的資源（額外的 CSS菠赚、JS代碼脑豹，圖片、音視頻衡查，附件等）瘩欺，再向 Web Server 發(fā)送請求，Web Server 找到對應(yīng)的文件渊啰，發(fā)送回來几晤；
瀏覽器解析 HTML 包含的內(nèi)容亿眠，用得到的 CSS 代碼進(jìn)行外觀上的進(jìn)一步渲染青伤，JS 代碼也可能會對外觀進(jìn)行一定的處理腐泻；
用戶與頁面交互（點(diǎn)擊绍在，懸停等等）時速和，JS 代碼對此作出一定的反應(yīng)驶俊，添加特效與動畫枣购；
交互的過程中可能需要向服務(wù)器索取或提交額外的數(shù)據(jù)（局部的刷新嬉探，類似微博的新消息通知），一般不是跳轉(zhuǎn)就是通過 JS代碼（響應(yīng)某個動作或者定時）向 Web Server 發(fā)送請求棉圈，Web Server再用服務(wù)器腳本進(jìn)行處理（生成資源or寫入數(shù)據(jù)之類的）涩堤，把資源返回給客戶端，客戶端用得到的資源來實(shí)現(xiàn)動態(tài)效果或其他改變分瘾。
注意這只是小網(wǎng)站里比較常見的模型胎围，大網(wǎng)站為了解決規(guī)模問題還會有很多處理，每個環(huán)節(jié)都會有一些細(xì)微的差異芹敌，中間還會使用各種各樣的工具減輕服務(wù)器的壓力痊远，提高效率，方便日常維護(hù)~
8.常見的幾種架構(gòu)
LAMP = Linux + Apache + MySQL +PHP（P還可能是Python或Perl氏捞。有時候L會改成W=Windows碧聪。），也就是服務(wù)器上的操作系統(tǒng)是 Linux液茎，Web Server 用Apache逞姿，數(shù)據(jù)庫用 MySQL，服務(wù)器腳本用PHP捆等，這些都是開源技術(shù)滞造，網(wǎng)站起步時用起來的成本會比較低，所以是普通網(wǎng)站里非常常見的架構(gòu)（雖然對于發(fā)展得很大的網(wǎng)站會遇到很多瓶頸）栋烤，F(xiàn)acebook就是這種谒养，淘寶也曾經(jīng)是。
J2EE明郭，Java 世界的架構(gòu)买窟，通常是企業(yè)用的（銀行、大型公司,.etc）薯定，比較常見地還會搭配一種 UNIX 做操作系統(tǒng)始绍，Apache 做Web Server，Tomcat 轉(zhuǎn)換 JSP 到 Java 給服務(wù)器程序用（其實(shí)它也自帶 Web Server）话侄，Oracle數(shù)據(jù)庫等等亏推。不一定拿來建站学赛，常常用來提供企業(yè)里的各種需要用到網(wǎng)絡(luò)的業(yè)務(wù)。我們學(xué)校教務(wù)系統(tǒng)就是用J2EE做的=吞杭。=淘寶現(xiàn)在也是從LAMP轉(zhuǎn)型到了這個盏浇。
http://ASP.NET，微軟家的架構(gòu)篇亭，通常會搭配 Windows Server 操作系統(tǒng)缠捌，SQL Server 數(shù)據(jù)庫，IIS 做 Web Server译蒂。StackOverflow和京東（曾經(jīng)）就是這個架構(gòu)曼月。
神奇的MEAN架構(gòu)，MongoDB做數(shù)據(jù)庫柔昼，Express做 Web Framework哑芹，Angular 做前端的 JavaScript框架，Node.js 用于編寫 Web Server捕透。神奇之處在于這幾個東西的語言都是 JavaScript（MongoDB的實(shí)現(xiàn)不是聪姿，但與外界溝通用的語言是）。因?yàn)槭潜容^新的架構(gòu)乙嘀，還有待時間的考驗(yàn)末购，不過被很多人（尤其是靠 JavaScript吃飯的前端程序猿們）熱切關(guān)注。
一般來說重點(diǎn)不在技術(shù)而且在乎成本的新網(wǎng)站比較喜歡用 LAMP虎谢，重視安全穩(wěn)定和速度的企業(yè)和機(jī)構(gòu)喜歡 J2EE盟榴，想省事的網(wǎng)站喜歡ASP.NET，比較 Geek 的網(wǎng)站和創(chuàng)業(yè)公司喜歡折騰各種 Python婴噩、Ruby擎场、Node.js世界的東西，Google這樣現(xiàn)成的技術(shù)都解決不了需求的超大型網(wǎng)站就自己折騰解決方案几莽。
