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

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

　　概覽

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

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

　　什么是前端?什么是后端?二者是如何配合運轉的?

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

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

　　Web 前端的運行邏輯

　　假設我們要訪問 Google，從我們在瀏覽器輸入 Google.com 到最后這個頁面出現在眼前，這其中涉及許多前端的技術反應和代碼組合，總體而言可以簡化為兩步：

　　1/ 瀏覽器向 Google 的服務器發送了一個請求。

　　2/ 服務器收到了一個 HTTP 響應，這個響應中就包含了執行這個命令所需要的所有資源(注：可以通過 Chrome 瀏覽器的開發者工具來進一步觀察 HTTP 協議的運行情況;下圖為 Google 的 HTTP 協議運行情況)。

　　上圖這個界面看起來很復雜，但對于非程序員而言，HTTP 協議運行情況只要關注其中的幾個關鍵部分：第一列，即資源的 URL;第四列是這個資源的類型。在第一個請求和后續的請求之間有一根藍線，即進度條。而 HTTP 協議中運行的項目越少，瀏覽器加載的速度越快。圖中 Google 就處理得很好，只有 10 個左右的請求。

　　Web 前端技術語言介紹

　　HTML 和帶樣式的 HTML

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

　　CSS

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

　　Javascript

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

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

　　HTML5 簡史和響應式設計

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

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

　　但是這個時候大家就發現，為 Web 1.0 設計的 HTML4 無法勝任這個工作，但是有另外一個技術卻非常適合，那就是 Flash。所以在 Web 2.0 的早期，當時最炫酷的網站有很多是完全用 Flash 開發的，在以后的很長一段時間里，有很多網站都是 HTML 和 Flash 的混合式網站。所以在 2005 – 2010 年這段時間，HTML5 中的新標準主要是為了取代 Flash。

　　剛剛搞定了 Flash，又進入了移動開發時代，所以 HTML5 又花了 5 年時間制定各種針對移動平臺的標準。但是到目前為止，雖然 HTML5 已定定稿，但是對移動平臺的適應其實還在進行中，所以在未來很長一段時間內，就像當初的 Flash 一樣，我們會看到越來越多的混合式應用。

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

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

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

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

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

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

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

　　對JS/CSS非常了解，執著于使用瀏覽器的各種最新特性來實現各種炫酷效果，這種我們成為炫技派;

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

　　前端學習資料

　　http://www.w3schools.com

　　http://onemonth.com

　　http://www.codecademy.com/

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

　　https://qdan.me/list/VNBugw7ObupFRdlE

　　大家可能比較關心如果我要開發一個網站需要多少時間?這個問題雖然很難回答，元一還是來試著回答了。現在前端有了 jQuery，bootstrap 這樣的框架，后端又有了 Ruby on Rails 這樣的快速 Web 開發框架，如果從頭學的話，像是一個簡易的 Pinterest，大概一個月就可以了。如果是一個有經驗的程序員，可能 1 個星期就可以開發出一個大概的原型出來。

　　后端服務器

　　后端的任務實際上就是向前端提供需要顯示網頁和 APP 內容的數據，可能是 HTML，也可能是JSON 數據，也可以是音視頻或者 PDF 文件。簡單的來劃分，一個服務器包含3個部分：

　　1/ HTTP 服務器

　　2/ 應用服務器

　　3/ 數據庫

　　HTTP 服務器的唯一任務就是把需要返回給客戶端的資源文件封裝在 HTTP 數據包里，這個資源有可能是它后面的應用服務器動態生成的，也有可能是保存在硬盤上的靜態文件。這是所有后端程序都必須有的，也是直接和我們的瀏覽器通信，返回給我們數據的程序。它的作用就是把它后面的編程語言生成的各種 HTML/CSS/Javascript，打包成一個 HTTP 請求，然后再封裝到一個 TCP/IP 的數據包里發回給我們。而最常用的兩個 HTTP 服務器叫做 Apach 和 Nginx。

　　應用服務器就是通常意義上所說的碼農負責的部分。他們的職責就是生成前端需要的HTML/CSS/JS 交給瀏覽器。

　　后端語言

　　1/ .net/java

　　龐大，復雜。但 Java 的優點就是適合處理特別大的數據量，如果你的項目會很快實現大爆發，需要處理海量的請求，那么 Java 是一個不錯的選擇。

　　2/ PHP

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

　　3/ Ruby

　　非常接近自然語言，基本上即使不懂編程，也能看明白 70% 或 80%。04 年出現了一個用 Ruby 編寫的 Web 開發框架 Ruby on Rails，當時的效果是非常震撼的，以前需要一個團隊才能搞定的事情，使用 Ruby on Rails 后 1 個人就可以勝任了，所以 Ruby on Rails 在極短的時間內就成為了 Ruby 的代名詞，也成為了新手學習 Web 開發的不二選擇，但是 Ruby 語言也并非十全十美，快的同時，他的最大短板就是性能。Twitter 最早就是使用 Ruby on Rails 開發的，但是隨著用戶數的逐步增長，Twitter 的宕機開始變得非常頻繁，后來他們迫不得已將整個系統從 Ruby 遷移到到了一個從 Java 派生出來的語言 Scala。

　　4/ node.js

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

　　5/ 其它(python，closure 等)

　　6/ 無后端(leancloud)

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

　　7/ 最強編程語言 Lisp

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

　　數據庫

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

　　1/ MySQL

　　2/ MongoDB

　　MySQL 是最常用的結構化數據庫，也是大多數創業公司的選擇。為什么是結構化的?就是說它的表的結構是固定的，比如我們常見的 User 表在 MySQL 中就是這樣的：

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

　　簡單來說，SQL 數據庫保存的是結構化數據，NOSQL 數據庫則可以保存非結構化數據。舉個例子，還拿上面的用戶表來舉例，如果我們現在想要給產品集小妹增加一些額外的屬性，比如她給某個產品點贊可以效果 x2，那么如果是 SQL 數據庫，我們就需要給數據庫增加一個新的字段來保存這個屬性：

　　但是如果是 MongoDB 這樣的 NOSQL 數據庫，我們就不需要給所有用戶都增加一個x2的屬性，只需要給產品集小妹單獨增加就可以了，NOSQL 中保存到數據是如下這個樣子的：

　　Cookie 和 Session

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

　　移動端開發

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

　　移動應用的前端技術，目前來說主要有以下三種：

　　原生

　　混合式

　　HTML5

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

　　如果說開發一個原生應用需要 4-6 周，那么同樣功能的應用如果我們把其中的一部分用 HTML來實現，那么可能就只需要 3-4 周的時間，但是如果我們全部使用 HTML ，可能就只需要1-2周。

晉城龍鼎 - 晉城網站建設為您解答！