近幾年前端技術(shù)盤(pán)點(diǎn)以及2016 年技術(shù)發(fā)展方向

文章來(lái)自：淘寶前端團(tuán)隊(duì)

Web 發(fā)展了幾十個(gè)春秋役听，風(fēng)起云涌萨赁，千變?nèi)f化劳跃。我很慶幸自己沒(méi)有完整地經(jīng)歷過(guò)這些年頭俐填，而是站在前人的肩膀上行走轩勘。Web 技術(shù)發(fā)展的速度讓人感覺(jué)那幾乎不是繼承式的迭代手蝎，而是一次又一次的變革局蚀，一次又一次的創(chuàng)造彻桃。這幾年的前端，更為之甚澎媒！

我從 12 年底開(kāi)始接觸前端搞乏，12 年之前的前端發(fā)展情況只能從上一輩的筆觸中領(lǐng)會(huì)。本文會(huì)盤(pán)點(diǎn)從 09 年開(kāi)始到 15 年間前端技術(shù)的革新戒努，同時(shí)也會(huì)從多個(gè)角度请敦，解讀近幾年前端技術(shù)發(fā)展的潛在因素，其中穿插了若干對(duì)前端演進(jìn)的拙見(jiàn)储玫，難免會(huì)有錯(cuò)誤和疏漏侍筛，望讀者可以補(bǔ)充和斧正。

那些年撒穷，一度追捧匣椰，一度放棄

下面，花一些篇幅簡(jiǎn)單回顧下 09 年到 15 年前端的發(fā)展歷程（感謝@法海 師兄對(duì)文章部分內(nèi)容的校稿端礼，很多技術(shù)出現(xiàn)的時(shí)間有所偏差禽笑，但不影響閱讀）。

09 年蛤奥，基礎(chǔ)類(lèi)庫(kù)完善佳镜，尋求突破

09 年之前，JavaScript 還處于對(duì)自身語(yǔ)言的完善過(guò)程中凡桥，而到了 09 年蟀伸，JavaScript 類(lèi)庫(kù)已經(jīng)頗為成熟，jQuery/Prototype//Dojo 等都已經(jīng)發(fā)布了好幾個(gè) stable 版本唬血，各大類(lèi)庫(kù)也是相互吸收優(yōu)點(diǎn)望蜡，不斷完善并提高自身性能，然而功能上已經(jīng)沒(méi)有太多增加的勢(shì)頭脖律。部分框架開(kāi)始了思想上的轉(zhuǎn)變冕杠，更加注重前端開(kāi)發(fā)的組織和結(jié)構(gòu)笼痹，條理性強(qiáng)了很多被济，如 YUI 等泌绣。

從 ECMAScript 規(guī)范的爭(zhēng)執(zhí)仿滔，開(kāi)啟了瀏覽器引擎大戰(zhàn)飒焦，各大廠商也趁機(jī)瓜分 IE 份額休雌，Chrome 和 Firefox 在這場(chǎng)戰(zhàn)役中取得大勝，V8 也敲響了前端的大門(mén)涌献。為了迎合市場(chǎng)的激烈競(jìng)爭(zhēng)绞灼，IE 開(kāi)始了升級(jí)之旅被冒，09 年初發(fā)布 IE8率触，全面兼容 CSS2.1两曼。

而此時(shí)户辫，Node.js 和 3G Mobile 這兩只巨獸開(kāi)始浮出水面酷誓，Web 標(biāo)準(zhǔn)也開(kāi)始向 HTML5披坏、ECMAScript5.0 靠攏。

10 年盐数，看齊標(biāo)準(zhǔn)棒拂，關(guān)注 Web 性能

毫無(wú)疑問(wèn)，這一年，各大巨頭都看清了 HTML5 是 web 發(fā)展的未來(lái)帚屉，在保留原來(lái)前端技術(shù)的狀態(tài)下谜诫，都簇?fù)碇?HTML5 的裙擺。富客戶端應(yīng)用也在這一年蓬勃生長(zhǎng)攻旦，ExtJS/Dojo 搖身變?yōu)槠髽I(yè)級(jí)框架喻旷，各類(lèi)組件化概念和產(chǎn)品如約而至。

延續(xù)著 09 年的變化牢屋，10 年的前端顯得頗為沉寂且预，然而在標(biāo)準(zhǔn)的運(yùn)用和推動(dòng)上，各大廠商也是十分賣(mài)力烙无。IE 9 出來(lái)了預(yù)覽第三版锋谐，iPhone 的 Safari 已經(jīng)能夠支持眾多 HTML5 內(nèi)容：

Canvas/Video/Audio/Geolocation/Storage/Application Cache/Web SQL Database 等。

W3C 宣布成立 Web 性能工作組截酷，Google 和 Mozilla 紛紛推出應(yīng)用商店涮拗，瀏覽器調(diào)試工具也豐富了起來(lái)，人們開(kāi)始更多地關(guān)注開(kāi)發(fā)體驗(yàn)和性能問(wèn)題迂苛。

11 年三热，HTML5 扛大旗，F(xiàn)lash 堪憂

2011 年 HTML5 的技術(shù)發(fā)展和推廣都向前邁進(jìn)了一大步灾部，語(yǔ)義明確的標(biāo)簽體系康铭、簡(jiǎn)潔明了的富媒體支持、本地?cái)?shù)據(jù)的儲(chǔ)存技術(shù)赌髓、canvas 等等各類(lèi)技術(shù)被廣泛應(yīng)用从藤。這一年，很多 web 開(kāi)發(fā)者也面臨一項(xiàng)技術(shù)的抉擇锁蠕，HTML5 or Flash夷野？從 Flash Player 11.1 開(kāi)始，Adobe 不再繼續(xù)開(kāi)發(fā)面向移動(dòng)設(shè)備瀏覽器的 Flash 插件荣倾，積極投身于 HTML5悯搔，這意味著 Flash 技術(shù)的凋零。

這一年舌仍，HTML5 游戲火爆到了一個(gè)高潮妒貌，移動(dòng)端開(kāi)發(fā)工具和調(diào)試工具也日益成熟。jQuery 已經(jīng)成為大小公司日常開(kāi)發(fā)的標(biāo)配铸豁，成千上萬(wàn)的 JQ 插件讓網(wǎng)頁(yè)開(kāi)發(fā)變得尤為輕松灌曙，而隨之而來(lái)的也是頁(yè)面的臃腫和性能調(diào)優(yōu)的深入探索。

Node.js 已經(jīng)悄然崛起节芥，在 github 上的訪問(wèn)量已經(jīng)超過(guò)了 Rails在刺，國(guó)內(nèi)的云應(yīng)用開(kāi)始嘗試使用 Node.js逆害，Node.js 相關(guān)工具也紛紛出來(lái)。

12 年蚣驼，響應(yīng)式開(kāi)發(fā)魄幕，工程化推進(jìn)

隨著硬件技術(shù)的發(fā)展，各手機(jī)廠商又開(kāi)始騷動(dòng)起來(lái)颖杏，為了占有更多的市場(chǎng)纯陨，不斷提高產(chǎn)品的性?xún)r(jià)比，體驗(yàn)也得到了不斷的優(yōu)化输玷。借著先前兩年 HTML5 刮起的東風(fēng)队丝，移動(dòng)端上的 web 開(kāi)發(fā)也顫抖了起來(lái)。移動(dòng)端的開(kāi)發(fā)挑戰(zhàn)不亞于 PC 上對(duì)多個(gè)瀏覽器的支持欲鹏，這一年，萌生了眾多移動(dòng)端框架臭墨，如 Sencha Touch/Zepto.js/JQ Mobile 等赔嚎，相對(duì) PC 端框架，它們更加輕便胧弛。

而移動(dòng)端的崛起尤误，帶來(lái)了許多終端開(kāi)發(fā)難題：多終端適配，多分辨率適配结缚，遠(yuǎn)程調(diào)試等等损晤，而隨著這些難題一個(gè)個(gè)被解決，移動(dòng)端生長(zhǎng)的勢(shì)頭變得更加強(qiáng)盛红竭。此時(shí) Twitter 也推出了 Bootstrap尤勋， 這個(gè)前端開(kāi)發(fā)工具包不僅方便了前端，也方便了后端同學(xué)茵宪，它的出現(xiàn)讓快速建站更加簡(jiǎn)單最冰。

編程思想的切換，迎來(lái)了 CoffeeScript 和 TypeScript稀火，這兩個(gè)預(yù)處理語(yǔ)言的出現(xiàn)又為 JavaScript 引來(lái)了不少其他方向轉(zhuǎn)型過(guò)來(lái)的開(kāi)發(fā)者暖哨。JavaScript 的兄弟 Node.js，也在命令行領(lǐng)域開(kāi)拓了一片不小的疆域凰狞，甚至有動(dòng)搖 Perl 和 Ruby 地位的趨勢(shì)篇裁。

在前端工程化上，幾個(gè)派系相互爭(zhēng)斗赡若，產(chǎn)出了 AMD达布、CMD、UMD 等規(guī)范斩熊，也衍生了 SeaJS往枣、RequireJS 等模塊化工具。前端在這一年很有跳躍感。

13 年分冈，爆發(fā)式增長(zhǎng)圾另，百花齊放

規(guī)范和標(biāo)準(zhǔn)上有不少產(chǎn)出。Web Components 的出現(xiàn)給前端開(kāi)發(fā)開(kāi)辟了新思路雕沉；WebDriver 規(guī)范的出來(lái)推動(dòng)了自動(dòng)化測(cè)試的進(jìn)程集乔，ECMAScript 6 的規(guī)范草案落地，Webapp 工作小組在這一年也是相當(dāng)活躍坡椒。

Chrome 瀏覽器在這一年也有了很大的突破扰路，開(kāi)始支持 SPDY，使用 Blink 取代 webkit 作為 Chromium 的新渲染引擎倔叼，Chrome DevTools 的調(diào)試體驗(yàn)大幅度提升汗唱。這一年中，Chrome 連同其他瀏覽器廠商快速推動(dòng)了各項(xiàng)草案規(guī)范的實(shí)現(xiàn)丈攒。

語(yǔ)言能力上依舊在增強(qiáng)哩罪，并且從 JS 開(kāi)始擴(kuò)散到 CSS，LESS巡验、SASS 和 Stylus 等 CSS 預(yù)處理語(yǔ)言開(kāi)始走俏际插，Web 開(kāi)發(fā)變得更加緊湊。

而在無(wú)線端显设，應(yīng)用不再局限于 Webapp框弛，由于流暢度、性能等方面不能滿足用戶體驗(yàn)的需求捕捂，各大公司開(kāi)始轉(zhuǎn)向 Native 方向的研究瑟枫，進(jìn)而出現(xiàn)了 Hybrid 和 PhoneGap 的繁榮，它們?yōu)?JS 調(diào)用了提供更多的設(shè)備 API绞蹦。

Node.js 大放異彩力奋，很多公司在生產(chǎn)環(huán)境中使用 Node.js，同時(shí)也出現(xiàn)了諸如 Express幽七、Meteor 等小巧的快速搭建 Node.js Server 的應(yīng)用框架景殷。

各瀏覽器的調(diào)試也是種類(lèi)繁多、功能豐富澡屡，PhantomJS 在自動(dòng)化測(cè)試上開(kāi)始取代 Selenium猿挚，出現(xiàn)了眾多的遠(yuǎn)程調(diào)試方案和工具。前端工程化開(kāi)始普及驶鹉，各公司開(kāi)始推出自己的前端集成開(kāi)發(fā)解決方案绩蜻。

14 年，移動(dòng)端的崛起室埋，HTML5 和 ES6 落地

HTML5 正式定稿办绝，這意味著伊约，web page 正式演變?yōu)?web application。ES6 華麗麗走進(jìn)前端孕蝉，走的很穩(wěn)重屡律，它的 Module/Class 等特性已經(jīng)完全讓這門(mén)語(yǔ)言具備了開(kāi)發(fā)大型應(yīng)用的能力。

大而厚的基礎(chǔ)庫(kù)難以滿足靈活場(chǎng)景降淮，Mobile 要求極致體驗(yàn)超埋，MV* 庫(kù)鋪卷而來(lái)，如 vue/angular/knockout 等佳鳖。

Web Components 跨終端組件快速發(fā)展霍殴，移動(dòng)端開(kāi)發(fā)迎來(lái)一次升華。Node.js 前后端分離的流行系吩，中間層的出現(xiàn)改變了前后端的合作模式来庭。2014 是顛覆式的一年，前端發(fā)展在這一年開(kāi)始形成了一個(gè)短暫的穩(wěn)定格局淑玫。

15 年巾腕，觀念的轉(zhuǎn)變，步入前端工業(yè)化生產(chǎn)

今年格外引人注目的框架是絮蒿，類(lèi) React。Facebook 在 React.js Conf 2015 大會(huì)上推出了基于 JavaScript 的開(kāi)源框架 React Native叁鉴，它結(jié)合了 Web 應(yīng)用和 Native 應(yīng)用的優(yōu)勢(shì)土涝，可以使用 JavaScript 來(lái)開(kāi)發(fā) iOS 和 Android 原生應(yīng)用。

在 JavaScript 中用 React 抽象操作系統(tǒng)原生的 UI 組件幌墓，代替 DOM 元素來(lái)渲染等但壮。敲一次代碼，能夠運(yùn)行在多個(gè)平臺(tái)上常侣，其優(yōu)勢(shì)可見(jiàn)一斑蜡饵。

除了 React ，還有手機(jī)淘寶推出的 Weex 框架胳施，它吸收了 vue.js 的編程精華溯祸，編程風(fēng)格更加簡(jiǎn)約。

在眾多構(gòu)建工具中舞肆，如今瀟灑存活的并不多焦辅。體驗(yàn)完 grunt 和 browserify 后，gulp 順勢(shì)而至椿胯，爾后又出現(xiàn)了 webpack筷登、jspm 等。而包管理工具哩盲，經(jīng)歷了 components前方、bower狈醉、spm 后，npm 開(kāi)始主導(dǎo)整個(gè)市場(chǎng)惠险。

Node.js 的應(yīng)用已經(jīng)鋪天蓋地苗傅，各大公司前端都把 Node.js 作為分離前后端的主要手段，并且在測(cè)試莺匠、監(jiān)控等方面沉淀了大量?jī)?nèi)容金吗。不過(guò)，這個(gè)市場(chǎng)是很苛刻的趣竣，Node.js 的性能難以達(dá)到 C/C++ 的水平摇庙，那么接下來(lái)要做的就是要提升性能，至少得接近 C/C++遥缕。

// @法海 師兄 批注：對(duì)時(shí)間點(diǎn)的總結(jié)是卫袒，其實(shí)很多技術(shù)方案很早就出現(xiàn)了，只不過(guò)沒(méi)有大規(guī)模應(yīng)用单匣，因此夕凝，對(duì)于上文中時(shí)間點(diǎn)的謬誤，你可以將語(yǔ)句從「xxx 出現(xiàn)了」改成「xxx 得到廣泛應(yīng)用」户秤。

其實(shí)我發(fā)現(xiàn)码秉，問(wèn)題在于，一個(gè)技術(shù)領(lǐng)域的新起和發(fā)展并不是一年內(nèi)能完成的鸡号，一個(gè)技術(shù)方案的出現(xiàn)和廣泛應(yīng)用也不是一年內(nèi)能落地的转砖，所以執(zhí)著于以「年」為時(shí)間點(diǎn)來(lái)編史，會(huì)畫(huà)地為牢鲸伴。

Web 規(guī)范和標(biāo)準(zhǔn)

最開(kāi)始府蔗，我們看到的 JavaScript 還只是一個(gè)簡(jiǎn)單的腳本語(yǔ)言，配合著 AJAX汞窗，在網(wǎng)頁(yè)上翻騰了好幾個(gè)年頭姓赤。

隨著互聯(lián)網(wǎng)趨勢(shì)越來(lái)越明顯，互聯(lián)網(wǎng)業(yè)務(wù)量和業(yè)務(wù)復(fù)雜度不斷增加仲吏，很多網(wǎng)頁(yè)變得相當(dāng)復(fù)雜不铆，如讓我們震驚了好一會(huì)兒的 Gmail，交互復(fù)雜蜘矢，體驗(yàn)優(yōu)良狂男。為了更好的多人協(xié)作，代碼中的 Utils 庫(kù)越來(lái)越大品腹，在這些庫(kù)中岖食，基礎(chǔ)部分更多的是對(duì) JavaScript 語(yǔ)言本身的拓展，比如給 String 加一個(gè) repeat 函數(shù)舞吭，再加一個(gè) trim 函數(shù)泡垃，再加一個(gè) endWith 函數(shù)等等析珊。

復(fù)雜的業(yè)務(wù)中會(huì)經(jīng)常看到一層又一層的回調(diào)處理蔑穴，回調(diào)的嵌套讓代碼的可讀性變的很差忠寻，而且很難將多個(gè)異步并行處理。為了改變這種編程范式存和，我們做了很多的思考奕剃，使用事件監(jiān)聽(tīng)，使用各種手段拉直回調(diào)捐腿，平坦地調(diào)用纵朋。

慢慢的，如果你在關(guān)注 W3C 小組的動(dòng)向茄袖，會(huì)發(fā)現(xiàn)操软，那些被認(rèn)可的，并且被廣泛重復(fù)定義的東西宪祥，都被納入了標(biāo)準(zhǔn)聂薪。

最開(kāi)始的 jQuery/prototype，前者主要是對(duì)瀏覽器做兼容處理蝗羊，讓開(kāi)發(fā)者不再把精力放到瀏覽器的差異上藏澳；后者是對(duì)語(yǔ)言本身的拓展，對(duì) JavaScript 各種類(lèi)型做拓展耀找，并且提供了一套拓展任何對(duì)象的功能集笆载。

而現(xiàn)在的開(kāi)發(fā)，我們很大程度上不再依托這些類(lèi)庫(kù)涯呻。規(guī)范和標(biāo)準(zhǔn)已經(jīng)把這些差異都統(tǒng)一了，String 中自帶了 includes/startsWith/endsWith/repeat/padStart/padEnd 等函數(shù)腻要，Array 自帶了 from/forEach/of/keys/values/find/findIndex 函數(shù)…

規(guī)范的標(biāo)準(zhǔn)是為了讓開(kāi)發(fā)者得到更好的編程體驗(yàn)复罐，編程不是目標(biāo)，目標(biāo)是將編程生產(chǎn)力轉(zhuǎn)化成實(shí)際效益雄家，越少的阻礙對(duì)開(kāi)發(fā)者越有利效诅。

各瀏覽器廠商當(dāng)然也認(rèn)識(shí)到了這一點(diǎn)，他們不斷地提升自己產(chǎn)品的體驗(yàn)趟济，將標(biāo)準(zhǔn)中的新特性都融合進(jìn)去乱投，比如 ES6 中的 Promise/Generator/Class/Module 等等。

在這些內(nèi)容普及之前顷编，我們不需要加入 jQuery/prototype 這些「不純粹」的東西戚炫，而是添加兩個(gè) shim 和 polyfill，如 es5-shim媳纬，html5shiv 等等双肤。待到山花爛漫時(shí)施掏，再輕松刪掉這些補(bǔ)丁程序。

這兩年工程化很熱茅糜，W3C 小組也看到了七芭，這就是市場(chǎng)的需求，為了完成一個(gè)大型應(yīng)用的編程蔑赘，就必須模塊化狸驳、組件化，于是在規(guī)范中也出現(xiàn)了 Module & Module Loader缩赛；Node.js 的到來(lái)耙箍，讓很多前端工程師開(kāi)始接觸數(shù)據(jù)庫(kù)操作，面對(duì)巨量的異步峦筒，我們?nèi)虤馔搪晫?xiě)了無(wú)數(shù)的回調(diào)地獄究西，盡管使用了很多 Promise 相關(guān)的操作，程序結(jié)構(gòu)依然松散難以閱讀物喷，于是規(guī)范中也開(kāi)始出現(xiàn)了 async/await 等對(duì) Generator 的上層封裝卤材。文字已經(jīng)不能滿足當(dāng)代人的溝通需求，音視頻等富媒體傳輸走進(jìn)了我們的生活峦失，于是規(guī)范中也出來(lái)了 WebRTC/WebAudio 等規(guī)范扇丛。

只要規(guī)范出來(lái)了，后續(xù)市面上就會(huì)根據(jù)規(guī)范來(lái)實(shí)現(xiàn)一套 shiv尉辑，這些 shiv 提供了同樣的 API此再，提供了同樣的編程體驗(yàn)。當(dāng)瀏覽器自我進(jìn)化完成之后登下，這些 shiv 也將成為歷史娶视，被開(kāi)發(fā)者遺棄在代碼的注釋之中。這些都是規(guī)范和標(biāo)準(zhǔn)的魅力购啄，它的存在襟企，就是讓開(kāi)發(fā)者把精力投入到自己的業(yè)務(wù)之中，編程和范式的工作交給它狮含。

在 這里 可以看到顽悼，W3C 各個(gè)小組最近都在干啥。標(biāo)準(zhǔn)不能囊括一切几迄。

生態(tài)的自我完善和自我拓展技術(shù)的更迭過(guò)于頻繁蔚龙，我們能夠清晰地看到，很多人還在用更迭前一波甚至是前好幾波的產(chǎn)品映胁。

當(dāng)年的 IE6木羹，在戰(zhàn)場(chǎng)上鏖戰(zhàn)了 10 多個(gè)年頭，依然屹立不到屿愚，而現(xiàn)在它在市面上依然有百分之一左右的占有率汇跨，這種小強(qiáng)精神不得不讓人肅然起敬务荆。“只要用戶在穷遂，我們就得追隨”函匕，這可能是很多公司的服務(wù)理念，因?yàn)橛脩艟褪菨撛诘睦麧?rùn)蚪黑。

正是因?yàn)檫@種服務(wù)理念盅惜，成就了 IE6 一個(gè)又一個(gè)的 5 年！然而低版本的 IE 已經(jīng)不僅僅是被前端從業(yè)人員抵制和排斥了忌穿，網(wǎng)絡(luò)安全抒寂、網(wǎng)絡(luò)運(yùn)維、QA 等等掠剑，各個(gè)技術(shù)崗位的人員都開(kāi)始對(duì)他不屑屈芜，它的存在對(duì)工作效率、對(duì)安全朴译、對(duì)很多方面產(chǎn)生了極為不良的影響井佑，甚至影響到一些核心內(nèi)容的推廣，所以 2016 將是低版本 IE 消亡的一年眠寿，我也呼吁業(yè)界所有的朋友舉起義旗反抗起來(lái)躬翁！

慶幸的是，也有人開(kāi)始吃螃蟹了盯拱。從支付寶到天貓到淘寶盒发，阿里巴巴在很多業(yè)務(wù)上已經(jīng)主（bèi）動(dòng)（bī）地放棄了對(duì) IE6 和 IE7 的支持，甚至在統(tǒng)一接入層直接做了 302 跳轉(zhuǎn)狡逢，提示用戶更新瀏覽器或者引導(dǎo)流量到無(wú)線端宁舰。這是一個(gè)好的開(kāi)始，我們期望這也是業(yè)界達(dá)成共識(shí)的開(kāi)始奢浑！

HTTP 協(xié)議明吩，從 1.0 快速過(guò)度到了 1.1，整個(gè)互聯(lián)網(wǎng)的上層建筑變的十分穩(wěn)固殷费。當(dāng)然，我也了解到依然有很多產(chǎn)品還是保持了 1.0 的狀態(tài)低葫，據(jù)說(shuō)電信公司的很多產(chǎn)品就是使用 HTTP/1.0 進(jìn)行通訊详羡，這無(wú)疑讓人驚愕。

為了追求更高的效率嘿悬，減少網(wǎng)絡(luò)傳輸中的無(wú)效流量实柠，W3C 工作組對(duì) HTTP 協(xié)議也做了重新的定義，SPDY 就是 13 年比較火熱的一個(gè)話題善涨，F(xiàn)irefox 和Chrome 都陸續(xù)開(kāi)始支持 SPDY窒盐，后來(lái)在 SPDY 的基礎(chǔ)上做了升級(jí)草则，正式定義為 HTTP/2.0，它的一個(gè)很大特點(diǎn)就是多路復(fù)用蟹漓，這個(gè)小小的特點(diǎn)改變了我們前端編程的很多優(yōu)化模式炕横，比如域名不是越多越好，為了能夠充分利用瀏覽器的連接數(shù)葡粒，我們給 JS 和 CSS 開(kāi)一個(gè)域名份殿，給 img 開(kāi)好幾個(gè)域名，網(wǎng)頁(yè)打開(kāi)的時(shí)候嗽交，恰到好處的利用瀏覽器的連接數(shù)上限限制卿嘲。

HTTP/2.0 的多路復(fù)用，就是可以在一個(gè) HTTP 請(qǐng)求中進(jìn)行多個(gè)資源的傳輸夫壁，如果域名散列拾枣，反而不能利用這個(gè)特性資源合并沒(méi)有任何優(yōu)勢(shì)，以前的資源合并是為了減少請(qǐng)求數(shù)以節(jié)約建立 TCP 鏈接的網(wǎng)絡(luò)開(kāi)銷(xiāo)和頭部傳輸?shù)牧髁块_(kāi)銷(xiāo)盒让，而在 HTTP/2.0 中梅肤，一個(gè) HTTP 請(qǐng)求上完全可以把所有的資源全部推送過(guò)來(lái)，如果合并了資源糯彬，反而不能良好運(yùn)用瀏覽器對(duì)資源的緩存凭语。

當(dāng)然，除了多路復(fù)用撩扒，還有很多其他的優(yōu)化似扔，比如傳輸?shù)臄?shù)據(jù)為二進(jìn)制流，HEAD 頭會(huì)被壓縮處理搓谆，服務(wù)器可以向客戶端推送內(nèi)容等炒辉。

在這個(gè)技術(shù)水平指數(shù)式增長(zhǎng)的年代，我相信以后的革新不會(huì)比消滅 IE6 痛苦泉手。

模塊加載上黔寇，經(jīng)過(guò)了各派系的爭(zhēng)論之后，流傳下來(lái)幾個(gè)不錯(cuò)的產(chǎn)品 SeaJS斩萌、RequireJS 等缝裤，那么那個(gè)模塊加載器將成為工具平臺(tái)中短暫的終點(diǎn)呢？似乎這些都不是颊郎。

當(dāng)我們按照規(guī)范中的方式進(jìn)行模塊定義憋飞，按照規(guī)范中的方式加載定義的模塊時(shí)，加載這個(gè)流程就顯得不那么重要了姆吭，因?yàn)檫@些事情最后都會(huì)變成 shiv/polyfill 的事情榛做，最終會(huì)變成瀏覽器的固有屬性。

當(dāng)一個(gè)東西在社區(qū)中被暴力追捧的時(shí)候，會(huì)有很多衍生的產(chǎn)品出來(lái)检眯，當(dāng)這些衍生物根深蒂固時(shí)厘擂，可能又會(huì)出現(xiàn)一個(gè)更加原生更加符合開(kāi)發(fā)習(xí)慣的東西出來(lái)。

就像 jQuery锰瘸，我們?yōu)樗帉?xiě)的插件不計(jì)其數(shù)刽严，而在工程化的需求沖擊下，它卻顯得那么的弱不禁風(fēng)获茬，因?yàn)樗P(guān)注的點(diǎn)和當(dāng)前的發(fā)展態(tài)勢(shì)不太吻合港庄，僅此而已。

Mobile 的發(fā)展驅(qū)動(dòng)著戰(zhàn)場(chǎng)的轉(zhuǎn)移

記得當(dāng)年拿著 Nokia5230 學(xué)完了 HTML 和 JavaScript 的入門(mén)恕曲，那屏幕尺寸也就是三個(gè)手指的寬度鹏氧，緊緊攥在手里看著頁(yè)面混排效果極差的網(wǎng)頁(yè)文檔。

現(xiàn)如今佩谣，iPhone 都出到 6s 了把还，一個(gè)版本一個(gè)尺寸，而且尺寸越來(lái)越大茸俭，還有各種寬高不一的 Android 機(jī)器吊履，種類(lèi)繁多。以前的觸屏是電阻式调鬓，只支持單點(diǎn)觸碰艇炎；而現(xiàn)在電容式的觸屏精度更高，還支持多指觸控腾窝，這如絲般順滑的體驗(yàn)在三四年前是完全體會(huì)不到的缀踪。

曾經(jīng)手機(jī)開(kāi)一個(gè)程序久了就會(huì)卡，動(dòng)不動(dòng)還會(huì)自動(dòng)重啟虹脯；而現(xiàn)在的手機(jī)開(kāi)一堆程序驴娃，完全無(wú)感知，這就是硬件發(fā)展前后的差異循集。

手機(jī)已經(jīng)成為了人們生活中不可或缺的一部分唇敞，甚至成為了一些人身體的一部分，淘寶今年雙十一的數(shù)據(jù)顯示咒彤，國(guó)內(nèi)移動(dòng)端的消費(fèi)比例已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)了 PC 端疆柔，占比 68%。面對(duì)龐大的用戶镶柱，我們的技術(shù)是否做好了充足的準(zhǔn)備婆硬，這里還得打一個(gè)問(wèn)號(hào)。

PC 上那一套經(jīng)驗(yàn)不是直接搬到移動(dòng)端就可以使用了奸例，在移動(dòng)端還需要解決更多的問(wèn)題：

-多分辨率問(wèn)題，這里涉及到了響應(yīng)式設(shè)計(jì)和前端響應(yīng)式技術(shù)

-不同網(wǎng)絡(luò)環(huán)境的網(wǎng)頁(yè)加載優(yōu)化問(wèn)題，2g/3g/4g/wifi

-手指交互帶來(lái)的一系列體驗(yàn)問(wèn)題

-為了提升用戶體驗(yàn)查吊，將 Web Native 化 —— 類(lèi) React 技術(shù)帶來(lái)的一系列問(wèn)題

-遠(yuǎn)程調(diào)試問(wèn)題

-移動(dòng)安全問(wèn)題等等

上面提到的問(wèn)題很多已經(jīng)有了優(yōu)秀的解決方案谐区，當(dāng)然也有很多未提及的。

WebApp 的性能逻卖、流暢度和穩(wěn)定性遠(yuǎn)遠(yuǎn)不如原生應(yīng)用宋列，同時(shí)它也無(wú)法良好地運(yùn)用設(shè)備提供的原生功能，這些都是大家轉(zhuǎn)投 Native 的原因评也。

端的融合

不同分辨率的手機(jī)炼杖，不同物理尺寸的終端，為了保持良好的視覺(jué)體驗(yàn)和用戶體驗(yàn)盗迟，我們不得不為每一個(gè)尺寸寫(xiě)一份 Media Query 代碼坤邪，那么對(duì)應(yīng)的，設(shè)計(jì)師也需要設(shè)計(jì)多套版式供前端使用罚缕，這給設(shè)計(jì)師艇纺、前端和測(cè)試帶來(lái)了無(wú)盡的麻煩。為此邮弹，我們通過(guò)前端技術(shù)重塑屏幕黔衡，重新定義像素尺寸，使用流式布局腌乡，通過(guò)百分比來(lái)響應(yīng)不同的終端尺寸盟劫。這是端的融合。

后續(xù)的 Mobile 的技術(shù)發(fā)展方向上与纽，應(yīng)該是相當(dāng)明確的侣签。很多公司都是三套人馬維護(hù)三端的程序，iOS渣锦、Android 和 Web硝岗，而這三端做的事情都是一樣的，一樣的界面袋毙，一樣的后端接口型檀，一樣的交互方式。為了能夠快速響應(yīng)業(yè)務(wù)的變更听盖，我們不得不將三端合并為一端對(duì)待胀溺，用一套程序編程成三端代碼，然后發(fā)布到三個(gè)平臺(tái)上皆看。這也是端的融合仓坞。React 系列技術(shù)發(fā)展到此，絕對(duì)不是終點(diǎn)腰吟，它只是一個(gè)探路燈无埃，給我們照明了方向徙瓶。

技術(shù)需要為業(yè)務(wù)做保障，而好的技術(shù)是能夠及時(shí)響應(yīng)業(yè)務(wù)的變化嫉称，我們不可能投入大量的人力在 Web 的修補(bǔ)工作上侦镇，通過(guò)開(kāi)發(fā)統(tǒng)一工具，屏蔽端和端之間的差異织阅，統(tǒng)一開(kāi)發(fā)模式和開(kāi)發(fā)體驗(yàn)壳繁，這才是 Mobile 的未來(lái)。

當(dāng)然荔棉，回到我們之前說(shuō)的規(guī)范和標(biāo)準(zhǔn)闹炉，我們目前所做的「屏蔽差異」工作，今后润樱，也會(huì)有統(tǒng)一的標(biāo)準(zhǔn)來(lái)規(guī)范渣触，目前手機(jī)廠商沒(méi)有這個(gè)共識(shí)，是因?yàn)檫€處于當(dāng)年 Chrome祥国、Firefox 搶占 IE6 市場(chǎng)份額的階段昵观。端的最終融合在于一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，以及強(qiáng)有力的執(zhí)行舌稀。

棧的融合

我剛接觸前端的時(shí)候啊犬，還沒(méi)有聽(tīng)說(shuō)「全棧」壁查，Web 技術(shù)棧往小里說(shuō)觉至，包含了從前端設(shè)計(jì)、交互睡腿、前端實(shí)現(xiàn)语御、網(wǎng)絡(luò)數(shù)據(jù)傳輸、后端實(shí)現(xiàn)席怪、后端運(yùn)維和數(shù)據(jù)庫(kù)等幾個(gè)方面应闯，能短時(shí)間內(nèi)從無(wú)到有實(shí)現(xiàn)這么一套系統(tǒng)，并且能夠抗得住一定流量沖擊的人挂捻，我們可以稱(chēng)之為全棧工程師碉纺。能夠有架構(gòu)有條理地實(shí)現(xiàn)這套系統(tǒng)，并且抗得住大流量刻撒、有集成測(cè)試骨田、有監(jiān)控的，這種我們可以稱(chēng)之為資深全棧工程師∩現(xiàn)在不乏這種人才态贤，也不乏自吹為這種人。

棧的融合得益于 Node.js 的出現(xiàn)醋火，作為前后端分離的橋梁悠汽，它拉近了前端工程師與后端的距離箱吕，有的人在這座橋梁上賣(mài)力行走，漸漸的也從前端走進(jìn) 了后端柿冲，甚至走進(jìn)了后端的運(yùn)維殖氏。至此，前端也擁有了部署和發(fā)布整個(gè)應(yīng)用的能力姻采，這是一個(gè)質(zhì)的突破。

使用 Node.js爵憎，簡(jiǎn)單幾行程序便能實(shí)現(xiàn)一個(gè) web 服務(wù)器慨亲、便能搭建一個(gè)多人聊天的網(wǎng)頁(yè)，它的便捷性可見(jiàn)一斑宝鼓。NPM 社區(qū)的發(fā)展刑棵，沉淀了成千上萬(wàn)的組件包，一行命令即可獲取愚铡，這種組件拼湊式的開(kāi)發(fā)蛉签，任何功能的實(shí)現(xiàn)都不會(huì)顯得太復(fù)雜，而這里的「不復(fù)雜」也蘊(yùn)含了無(wú)數(shù)的坑坑洼洼沥寥，在這一層的融合上也會(huì)遇上不少阻礙：

冗余的龐大的包內(nèi)容碍舍，為了使用一個(gè)小功能，我們從網(wǎng)絡(luò)上拉取下來(lái)一個(gè)巨大的包邑雅，而且這里的「巨大」對(duì)很多人來(lái)說(shuō)都是無(wú)感知的片橡，很少會(huì)有人進(jìn)入 node_modules 去查看依賴(lài)的第三方包是如何實(shí)現(xiàn)的，實(shí)際情況可能會(huì)相當(dāng)震撼淮野，第三方包還引用了一堆第三方包捧书，這些包都會(huì)在 Node.js 執(zhí)行的時(shí)候被收納進(jìn)去，放在內(nèi)存中骤星。

猛烈的迭代经瓷，今年的 Node.js 被人嫌棄迭代太慢了（當(dāng)然，這是表面原因）洞难，走出了一個(gè)分支 io.js舆吮，發(fā)展了一會(huì)兒，進(jìn)度趕超了 Node.js廊营，后來(lái)覺(jué)得一家人不干兩家活歪泳，又合并回去了。雖說(shuō)上層 API 幾乎沒(méi)有變化露筒，但是底層卻被翻了一個(gè)天呐伞。

偶爾的巨大漏洞，每隔一端時(shí)間就會(huì)暴露 Node.js 存在漏洞慎式，這些漏洞的補(bǔ)救措施就是立即升級(jí)版本號(hào)伶氢，比較讓人擔(dān)心受怕趟径。

后端意識(shí)不強(qiáng)烈，前端占領(lǐng)了中間層的開(kāi)發(fā)癣防，有的時(shí)候還干這后端的活兒蜗巧，然而卻沒(méi)有后端沉淀多年固有的意識(shí)，測(cè)試和監(jiān)控做的相當(dāng)潦草蕾盯。

JavaScript 從客戶端的腳本語(yǔ)言縱身躍進(jìn)進(jìn)入了后端行列幕屹，而今也開(kāi)始深入到移動(dòng)端 Native 領(lǐng)域，確實(shí)是無(wú)孔不入级遭，這可能就是語(yǔ)言的特性望拖，也可能是技術(shù)本身就在尋求融合點(diǎn)，把有差異的地方全部躺平挫鸽，然后用統(tǒng)一的方式去關(guān)注業(yè)務(wù)说敏，關(guān)注用戶。端和棧也在融合丢郊。

后端服務(wù)化盔沫，云數(shù)據(jù)，云安全

用戶體驗(yàn)變得越來(lái)越重要枫匾，響應(yīng)式技術(shù)的發(fā)展也是后續(xù)網(wǎng)頁(yè)應(yīng)用的一大特點(diǎn)架诞，端和端之間的差異只是在表現(xiàn)上，數(shù)據(jù)這一層差異不是特別大婿牍，很多應(yīng)用 PC 和 Mobile 共用一套接口侈贷，或者 Mobile 的接口在 PC 接口的基礎(chǔ)上做了一層包裝，對(duì)接口字段做了些許刪減等脂。

后端為了響應(yīng)各個(gè)端之間的數(shù)據(jù)需求俏蛮，也需要關(guān)注數(shù)據(jù)的可利用性，接口包裝的拓展性等上遥，這是后端服務(wù)化的一個(gè)表現(xiàn)搏屑。移動(dòng)端的開(kāi)發(fā)上，前后端間隙十分明顯粉楚，越來(lái)越多移動(dòng)端應(yīng)用的發(fā)布已經(jīng)脫離了后端辣恋，前端完全通過(guò)異步方式獲取數(shù)據(jù)。

業(yè)務(wù)變化很快很快快模软，今天這個(gè)產(chǎn)品被并購(gòu)伟骨，明天那個(gè)業(yè)務(wù)被砍掉，每個(gè)人負(fù)責(zé)的業(yè)務(wù)線可能冷不丁地就變了燃异。

很多大公司的決策是由上往下的携狭，上面微動(dòng)，下面可能就是大動(dòng)回俐，可能某個(gè)部門(mén)就不存在了逛腿，也可能被劃分成幾個(gè)產(chǎn)品部門(mén)稀并。

所以「大后臺(tái)，小前臺(tái)」的趨勢(shì)必然形成单默。

前端碘举，毫無(wú)疑問(wèn)，在這個(gè)前臺(tái)之中搁廓。前臺(tái)的特點(diǎn)是靈活的引颈，多變的，可快速重組的境蜕。對(duì)后臺(tái)而言线欲，為了響應(yīng)前臺(tái)的變化，需要提供更細(xì)疗。化的 API，將數(shù)據(jù)打散苦锨，打得更加零碎逼泣，零碎的數(shù)據(jù)易于重組，這是在考驗(yàn)后端的架構(gòu)能力舟舒。如今拉庶，很多前端也都是半棧工程師，盤(pán)踞在前后端中間層上秃励，然而如何迎接這種后端服務(wù)化的模式氏仗，似乎這個(gè)準(zhǔn)備還是不夠充足的。

GraphQL 的出現(xiàn)場(chǎng)景跟 React 類(lèi)似夺鲜，React 是前端應(yīng)對(duì)不同場(chǎng)景的一種強(qiáng)有力手段皆尔，而 GraphQL 則是后端應(yīng)對(duì)不同需求場(chǎng)景的一次嘗試，Web APIs 將會(huì)成為 Web App 和 Mobile App 的一個(gè)中心點(diǎn)币励，前端基于后端的 RESTful 服務(wù)構(gòu)建應(yīng)用慷蠕，這里面存在太多未知的問(wèn)題需要探索，這是一個(gè)大數(shù)據(jù)下探索的新起點(diǎn)食呻，也給前端開(kāi)發(fā)者創(chuàng)造了無(wú)數(shù)的可能流炕。

這幾年各類(lèi)網(wǎng)盤(pán)，各個(gè)云服務(wù)商都在搶占市場(chǎng)仅胞，有提供圖片儲(chǔ)存的每辟，有提供 CDN 靜態(tài)資源緩存的，有提供大文件儲(chǔ)存的干旧，也有賣(mài)數(shù)據(jù)庫(kù)服務(wù)的渠欺。種類(lèi)繁多，而歸根到底都是莱革，你付錢(qián)給我峻堰，我提供儲(chǔ)存和安全讹开，還提供方便的 SDK 讓你獲取自己的數(shù)據(jù)。云服務(wù)賣(mài)的是一套服務(wù)捐名，它是把所有人的數(shù)據(jù)風(fēng)險(xiǎn)集于一身旦万，用強(qiáng)硬的技術(shù)做安全防御。云镶蹋，賦予了我們無(wú)窮的想象空間成艘。

三輛馬車(chē)，我們還差一輛

開(kāi)發(fā)功能對(duì)很多人來(lái)說(shuō)是輕松活兒贺归，基本的前端語(yǔ)言加些復(fù)雜的特效淆两，實(shí)現(xiàn)成本不會(huì)很高；即便是搭建一個(gè)網(wǎng)站拂酣，使用 Node.js 社區(qū)中的框架也能夠輕松實(shí)現(xiàn)秋冰。然后極少人會(huì)去關(guān)注每個(gè)功能點(diǎn)的測(cè)試，一個(gè)項(xiàng)目下來(lái)基本看不到測(cè)試用例婶熬，更不用說(shuō)會(huì)去做監(jiān)控相關(guān)的事情剑勾。結(jié)果就是，踏過(guò)了無(wú)數(shù)的坑洼之后終于上線了赵颅，而后續(xù)加功能的時(shí)候發(fā)現(xiàn)虽另，加了東西就跑不通，新內(nèi)容影響了之前的邏輯饺谬，只好去修復(fù)之前的邏輯捂刺，修好之后發(fā)現(xiàn)更早之前的邏輯又不通了，整個(gè)修復(fù)過(guò)程就像玩多米諾骨牌募寨。

程序開(kāi)發(fā)三板斧：功能族展、測(cè)試和監(jiān)控。在 github 上可以看到很多程序都加入了持續(xù)集成拔鹰，這是一個(gè)好兆頭苛谷，意味著我們寫(xiě)的程序也越來(lái)越健壯，至少貢獻(xiàn)給世人使用的程序是健壯的格郁。很多程序的代碼覆蓋率也達(dá)到了 90%+腹殿，這些數(shù)據(jù)都是重視測(cè)試的證據(jù)。

然而例书，三輛馬車(chē)锣尉，我們最后一輛依然沒(méi)有開(kāi)動(dòng)起來(lái)。很多公司都會(huì)有自己的 log 平臺(tái)决采，每個(gè)用戶訪問(wèn)頁(yè)面中的任何一個(gè)鏈接都會(huì)將用戶信息和訪問(wèn)信息以 log 日志形式收集到 log 平臺(tái)上自沧，然后通過(guò)監(jiān)控平臺(tái)或者離線分析的方式，獲取業(yè)務(wù)數(shù)據(jù)或者技術(shù)數(shù)據(jù)，進(jìn)行分析和二次開(kāi)發(fā)拇厢。這些東西在大公司見(jiàn)的很多爱谁，而這方面的東西在前端，尤其是使用 Node.js 做程序開(kāi)發(fā)的前端身上孝偎，看到的并不多访敌。

最后

2016 年，我覺(jué)得技術(shù)上的新創(chuàng)造會(huì)稍微緩和些衣盾，這兩年很多人已經(jīng)被新技術(shù)沖擊得有些找不著方向了寺旺，同一類(lèi)東西，前者還沒(méi)學(xué)完势决，后者就開(kāi)始火爆了阻塑，緊接著又是一陣技術(shù)的凋零和新技術(shù)的出現(xiàn)，這樣搞久了也會(huì)有一絲的疲倦。而更多的會(huì)關(guān)注，如何更好地服務(wù)多端汗捡，如何更大幅度地提升開(kāi)發(fā)體驗(yàn)和用戶體驗(yàn)，很多技術(shù)都會(huì)往性能传透、往極致這個(gè)方向上鉆研。

寫(xiě)長(zhǎng)文真不輕松极颓。寫(xiě)到這里，感覺(jué)說(shuō)的不通透群嗤，還有很多想說(shuō)的菠隆，但是個(gè)人理解力有限，也難以表達(dá)全面狂秘。技術(shù)的變化很快骇径，今天說(shuō)過(guò)的東西，到了明天就可能過(guò)時(shí)了者春。我們猜不透未來(lái)破衔，只能把現(xiàn)有的東西好好消化吸收下，留下一個(gè)話柄钱烟，給讀者吧晰筛。

聽(tīng)前端大牛講座