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

　　主講者張?jiān)唬a(chǎn)品原型工具墨刀的創(chuàng)始人，見證了 Web 開發(fā)從 99 年 HTML4.0 到去年 12 月 HTML5 最終定稿這之間整個(gè) Web 開發(fā)變遷史的 15 年「碼齡」全棧工程師。

　　概覽

　　以下這張圖就是元一分享的干貨內(nèi)容，它基本涵蓋了一個(gè)初級(jí)碼農(nóng)需要知道的所有基礎(chǔ)入門知識(shí)。但這張圖的目的并非用來嚇人，這其中的所有技術(shù)名詞，將以最通俗易懂的方式串聯(lián)起來—— 即我們上網(wǎng)時(shí)的慢動(dòng)作解析：打開一個(gè)網(wǎng)頁或 App，這背后都運(yùn)用了那些技術(shù)來讓這個(gè)網(wǎng)頁和 App 的內(nèi)容呈現(xiàn)在瀏覽器和手機(jī)上;驅(qū)動(dòng)這些動(dòng)作背后的技術(shù)名詞都是什么，各自有著怎樣的優(yōu)缺點(diǎn)，彼此間是如何協(xié)作和運(yùn)轉(zhuǎn)的，以及怎樣合理地評(píng)估技術(shù)能力和開發(fā)難度。當(dāng)然，元一也推薦了豐富的學(xué)習(xí)資料。

　　這中間涉及的技術(shù)知識(shí)，前端包括 HTML，CSS，JavaScript，jQuery 以及 Bootstrap ;后端包括 HTTP 服務(wù)器，后端編程語言，數(shù)據(jù)庫(kù)以及 Cookie 和 Session;移動(dòng)開發(fā)分為原生，混合式，HTML5，以及不同的移動(dòng)端技術(shù)選擇在功能和開發(fā)成本上的比較。

　　什么是前端?什么是后端?二者是如何配合運(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ù)包中然后通過網(wǎng)絡(luò)傳送到前端。當(dāng)然除了這些前端文件，后端還有一個(gè)更重要的職能，即保存和提供用戶數(shù)據(jù)，比如移動(dòng)端常見的 JSON 就是目前最流行的在后端和前端之間傳輸?shù)囊粋€(gè)文件格式。

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

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

　　假設(shè)我們要訪問 Google，從我們?cè)跒g覽器輸入 Google.com 到最后這個(gè)頁面出現(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è)命令所需要的所有資源(注：可以通過 Chrome 瀏覽器的開發(fā)者工具來進(jìn)一步觀察 HTTP 協(xié)議的運(yùn)行情況;下圖為 Google 的 HTTP 協(xié)議運(yùn)行情況)。

　　上圖這個(gè)界面看起來很復(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ù)語言介紹

　　HTML 和帶樣式的 HTML

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

　　CSS

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

　　Javascript

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

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

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

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

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

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

　　剛剛搞定了 Flash，又進(jìn)入了移動(dòng)開發(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)行中，所以在未來很長(zhǎng)一段時(shí)間內(nèi)，就像當(dāng)初的 Flash 一樣，我們會(huì)看到越來越多的混合式應(yīng)用。

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

　　除了響應(yīng)式設(shè)計(jì)，HTML 在移動(dòng)端遇到的另外兩個(gè)問題就是如何利用移動(dòng)設(shè)備的各種傳感器，比如 GPS，攝像頭等等;以及性能問題。為了解決這些問題，HTML5中添加了地理位置，拍照，3D 動(dòng)畫加速等等 API，可以部分的利用手機(jī)設(shè)備的一些新硬件，并且新的 API 還在不斷的加入進(jìn)來，這也是為什么現(xiàn)在的 HTML5 應(yīng)用可以越來越炫酷的原因。但是，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)單的前端能力鏈：

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

　　懂一些簡(jiǎn)單的 Javascript，主要是使用一些現(xiàn)成的框架，比如 jQuery，bootstrap 等等;

　　知道 jQuery 和 Bootstrap 的局限，必要時(shí)能寫一些原生的 JS/CSS 代碼;

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

　　可以自己寫出類似 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)心如果我要開發(fā)一個(gè)網(wǎng)站需要多少時(shí)間?這個(gè)問題雖然很難回答，元一還是來試著回答了。現(xiàn)在前端有了 jQuery，bootstrap 這樣的框架，后端又有了 Ruby on Rails 這樣的快速 Web 開發(fā)框架，如果從頭學(xué)的話，像是一個(gè)簡(jiǎn)易的 Pinterest，大概一個(gè)月就可以了。如果是一個(gè)有經(jīng)驗(yàn)的程序員，可能 1 個(gè)星期就可以開發(fā)出一個(gè)大概的原型出來。

　　后端服務(wù)器

　　后端的任務(wù)實(shí)際上就是向前端提供需要顯示網(wǎng)頁和 APP 內(nèi)容的數(shù)據(jù)，可能是 HTML，也可能是JSON 數(shù)據(jù)，也可以是音視頻或者 PDF 文件。簡(jiǎn)單的來劃分，一個(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ù)的程序。它的作用就是把它后面的編程語言生成的各種 HTML/CSS/Javascript，打包成一個(gè) HTTP 請(qǐng)求，然后再封裝到一個(gè) TCP/IP 的數(shù)據(jù)包里發(fā)回給我們。而最常用的兩個(gè) HTTP 服務(wù)器叫做 Apach 和 Nginx。

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

　　后端語言

　　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īng)用添加各種新功能。當(dāng)然，可維護(hù)性就另當(dāng)別論了。

　　3/ Ruby

　　非常接近自然語言，基本上即使不懂編程，也能看明白 70% 或 80%。04 年出現(xiàn)了一個(gè)用 Ruby 編寫的 Web 開發(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 開發(fā)的不二選擇，但是 Ruby 語言也并非十全十美，快的同時(shí)，他的最大短板就是性能。Twitter 最早就是使用 Ruby on Rails 開發(fā)的，但是隨著用戶數(shù)的逐步增長(zhǎng)，Twitter 的宕機(jī)開始變得非常頻繁，后來他們迫不得已將整個(gè)系統(tǒng)從 Ruby 遷移到到了一個(gè)從 Java 派生出來的語言 Scala。

　　4/ node.js

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

　　5/ 其它(python，closure 等)

　　6/ 無后端(leancloud)

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

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

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

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

　　我們平常訪問的大部分網(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)化的?就是說它的表的結(jié)構(gòu)是固定的，比如我們常見的 User 表在 MySQL 中就是這樣的：

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

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

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

　　Cookie 和 Session

　　服務(wù)器要處理成千上萬用戶的請(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)端開發(fā)

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

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

　　原生

　　混合式

　　HTML5

　　HTML5 必經(jīng)要經(jīng)過瀏覽器這個(gè)中間層，所以在性能上多少會(huì)有些損失，所以如果你的應(yīng)用對(duì)性能特別敏感，原生就會(huì)是比較好的選擇;對(duì)于普通的性能要求沒那么嚴(yán)格的應(yīng)用來說，HTML5是完全可以滿足的。而如果已經(jīng)有了一個(gè)移動(dòng)端的網(wǎng)站，這種情況下混合式就會(huì)是一個(gè)比較好的選擇，它可以最大程度的利用已有的資源。如果說你是從頭開發(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 。

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

晉城龍鼎 - 晉城網(wǎng)站建設(shè)為您解答！