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

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

　　概覽

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

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

　　什么是前端?什么是后端?二者是如何配合運(yùn)轉(zhuǎn)的?

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

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

　　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)行的項目越少，瀏覽器加載的速度越快。圖中 Google 就處理得很好，只有 10 個左右的請求。

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

　　HTML 和帶樣式的 HTML

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

　　CSS

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

　　Javascript

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

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

　　HTML5 簡史和響應(yīng)式設(shè)計

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

　　首先，HTML4 的發(fā)布時間和門戶時代(即 Web 1.0 時代)是基本吻合的，也就是說 HTML4 實際上是為門戶型網(wǎng)站設(shè)計的。在門戶網(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è)計的 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)其實還在進(jìn)行中，所以在未來很長一段時間內(nèi)，就像當(dāng)初的 Flash 一樣，我們會看到越來越多的混合式應(yīng)用。

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

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

　　如何判斷一個前端的能力?

　　關(guān)于前端，可以簡單的把它理解為，凡是在我們的電腦，手機(jī)上運(yùn)行的技術(shù)，HTML，CSS，Javascript，這些都屬于前端技術(shù)，使用這些技術(shù)的我們就稱為前端工程師。如何判斷一個前端的能力呢?下面是一個簡單的前端能力鏈：

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

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

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

　　對JS/CSS非常了解，執(zhí)著于使用瀏覽器的各種最新特性來實現(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ā)一個網(wǎng)站需要多少時間?這個問題雖然很難回答，元一還是來試著回答了。現(xiàn)在前端有了 jQuery，bootstrap 這樣的框架，后端又有了 Ruby on Rails 這樣的快速 Web 開發(fā)框架，如果從頭學(xué)的話，像是一個簡易的 Pinterest，大概一個月就可以了。如果是一個有經(jīng)驗的程序員，可能 1 個星期就可以開發(fā)出一個大概的原型出來。

　　后端服務(wù)器

　　后端的任務(wù)實際上就是向前端提供需要顯示網(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 交給瀏覽器。

　　后端語言

　　1/ .net/java

　　龐大，復(fù)雜。但 Java 的優(yōu)點(diǎn)就是適合處理特別大的數(shù)據(jù)量，如果你的項目會很快實現(xiàn)大爆發(fā)，需要處理海量的請求，那么 Java 是一個不錯的選擇。

　　2/ PHP

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

　　3/ Ruby

　　非常接近自然語言，基本上即使不懂編程，也能看明白 70% 或 80%。04 年出現(xiàn)了一個用 Ruby 編寫的 Web 開發(fā)框架 Ruby on Rails，當(dāng)時的效果是非常震撼的，以前需要一個團(tuán)隊才能搞定的事情，使用 Ruby on Rails 后 1 個人就可以勝任了，所以 Ruby on 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

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

　　5/ 其它(python，closure 等)

　　6/ 無后端(leancloud)

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

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

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

　　數(shù)據(jù)庫

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

　　1/ MySQL

　　2/ MongoDB

　　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ù)是如下這個樣子的：

　　Cookie 和 Session

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

　　移動端開發(fā)

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

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

　　原生

　　混合式

　　HTML5

　　HTML5 必經(jīng)要經(jīng)過瀏覽器這個中間層，所以在性能上多少會有些損失，所以如果你的應(yīng)用對性能特別敏感，原生就會是比較好的選擇;對于普通的性能要求沒那么嚴(yán)格的應(yīng)用來說，HTML5是完全可以滿足的。而如果已經(jīng)有了一個移動端的網(wǎng)站，這種情況下混合式就會是一個比較好的選擇，它可以最大程度的利用已有的資源。如果說你是從頭開發(fā)一個移動應(yīng)用，并且這個應(yīng)用對用戶體驗的要求也不是特別嚴(yán)格，那么 HTML5 就會是一個很好的選擇，HTML5 移動應(yīng)用比較顯著的應(yīng)用就是 Dailycost 。

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

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