收藏指數滿格！幫你打包前端之巔一整年好文！

2016 年 6 月 5 日，前端之巔公眾號發出了第一篇文章。整整一年過去了，前端之巔吸引了近 4 萬名澱粉，社群人數也近 4 千人。今天，尾尾為大家打包了前端之巔這一年的文章，希望能給各位澱粉回顧學習帶來便利。

同時，為了感謝大家的支持和厚愛，截止 2017 年 6月13 號晚 8 點整，在原文原文原文原文地址《收藏指數滿格！幫你打包前端之巔一整年好文！》下留言點贊數最多的前 3 名澱粉將獲得由博文視點贊助的圖書一冊，第 4~10 名澱粉將獲得前端之巔定製明信片（加蓋前端之巔專屬橡皮章哦）。

同時，歡迎大家投稿，投稿郵箱 luna.han@infoq.com。

一、前端深度

深度探討深度探討 MVC 式 Web 架構演進：多形態發展

我看大前端：終端碎片化時代下，所有表現層的整合

我理解的「大前端」或「大無線」

我為什麼反對「大前端工程師」的概念

當我們在談大前端的時候，我們談的是什麼

從 WKWebView 出發，以前端角度看混合開發

大前端年終總結與展望：大前端時代即將來臨？

割裂的前端工程師：預測前端的 2017

前端 leader 們如何安排面試？

前端 leader 們怎樣看簡歷？

前端為什麼一定要做組件化

響應式技術在 JS 和 Web 界的現狀及未來如何？

HTTPS 之難，難於上青天？

Web 不是未來會贏，而是已經贏了

前端工程師的第三春即將到來？——解析 three.js 的 WebVR 示常式序，WebVR 竟然如此近！

你需要開發 PWA 應用嗎？

巔峰觀點散養? 餓了么大前端團隊究竟是如何落地和管理的?

賀師俊：如何看待 left-pad 事件

前端巔峰論：框架之爭，出路何在？

『司徒正美』答群友問

我為何放棄 Gulp 與 Grunt，轉投 npm scripts

阿里資深前端工程師桐木：站在 10 年研發路上，眺望前端未來

鏈家網前端總架構師楊永林：我的 8 年架構師成長之路

群分享預告：餓了么基於 Vue 2.0 的通用組件庫開發之路

大前端 2016 盤點：如何成為公司所需的 T 型人才？ | 今晚直播

前端技術概念大爆發，軟體工程師應如何自處？

騰訊 Web 前端最高技術級別工程師的技術人生丨今晚直播

鏈家網前端總架構師教主：程序員不是你想的那樣 | 今晚直播

餓了么大前端總監：什麼樣的人可以稱為架構師？

司徒正美：前端江湖紛亂，框架之爭，出路何在？

發展總結2016 前端開發技術巡禮

一文回顧 JavaScript 模塊演化簡史

3D 技術在電商網站中的應用和發展

JavaScript 領域中最受歡迎的「明星」們

SAM 模式構建函數響應式前端架構的五條結論

JS 開發者福音 Elm：語言級響應式編程

Google QUIC 協議：從 TCP 到 UDP 的 Web 平台

踏上可信前端之路：保護代碼，JS 混淆到底是不是紙老虎？

一文掌握 JavaScript 生態圈現狀

打造你的每日前端信息流

2016 前端之路：工具化與工程化

關於 PWA 你需要知道的一切

一文拿下 JS 變數相關問題

巨頭們關注的實時 Web：發展與相關技術

實時響應的 Web 架構：完全動態和響應式現代 Web 組件

JavaScript 啟動性能瓶頸分析與解決方案

36 個代碼塊，帶你讀懂異常處理的優雅演進

擴展 JS 應用在架構性取捨上應關注八點要素

提高複雜組件可復用性，不了解 IoC 怎麼行？一文掌握前端 IoC 理念，速戳！

二、框架之爭

如何看待前端代有框架出，技術人應如何自處？

我該選擇哪個框架？2016 年 JS 工具使用狀況調查結果

2017 年 React、Angular 和 Vue 值得我們期待什麼？

我們為什麼選擇 Vue.js 而不是 React？

我們為什麼選擇使用 React 生態？

18 年老司機告訴你：我為什麼選擇 Angular 2

VueVue 2017 現狀與展望 | 視頻 +PPT+ 速記快速回顧

以 Vuex 2.0 為例，提升源碼分析技能

Vue 源碼解析：深入響應式原理

Vue.js 實用技巧（二）

Vue.js 實用技巧（一）

WebStorm 2017.1 增加對 Vue.js 的支持

Vue 作者尤雨溪：Vue 2.0，漸進式前端解決方案

Vue 2.0 快速上手指南

更輕更快的 Vue.js 2.0 與其他框架對比

ReactReact 新引擎 React Fiber 究竟要解決什麼問題？

React 15.5 帶來重大修改，為開發者留充足時間適應版本 16

如何「正確」編寫 React 組件？我們總結了一套滿意的方法

使用 React 重構百度新聞 WebApp 前端（下）

使用 React 重構百度新聞 WebApp 前端（上）

讓 React 組件變得可響應

如何使用 Flux 搭建 React 應用程序架構

React：究竟何時使用 shouldComponentUpdate？

React 之 DOM Diff：如何將演算法複雜度控制在 O(n)

30 分鐘掌握 React 開發神器 Webpack

一篇文章讀懂 React

React 的替代方案 Inferno 發布 1.0 版本

Oculus 正式發布 React VR 預覽版

AngularAngular 團隊將跳過 3，直接發布 Angular 4

基於 AngularJS 的個推前端雲組件探秘

Angular 4 將獲得長期支持，版本號變化不意味破壞性修改

一份關於 Angular 的倡議清單

Angular4.0.0 正式發布，附新特性及升級指南

Angular 的模塊間通信

原 Angular 團隊成員投身 JavaScript 框架 Aurelia

Angular 2 拆分，分離了 Dart 代碼庫

Angular 2 與 TypeScript 概覽

Angular 2 最終版發布，採用語義化版本號

三、實踐

團隊實踐 百度聊一聊百度移動端首頁前端速度那些事兒

如何重構一個大型歷史項目——百度經驗改版總結

百度 SSP 單頁式應用性能優化實踐

百度搜索對 PWA 的探索和初步實踐

百度日請求量 700 億 +，BFE 如何處理數據擁堵？ | Golang 在 Baidu-FrontEnd 的應用之路

百度貼吧：複雜 Web 前端項目的構建工具優化實踐

阿里天貓首頁全解密

天貓 11.11：雙 11 晚會和狂歡城的互動技術方案

天貓前端基礎技術體系簡介

聊一聊淘寶首頁和它背後的技術

一文了解支付寶前端應用架構發展史

餓了么PWA 在餓了么的實踐經驗

PWA 實踐：理解和創建 Service Worker 腳本

PWA 實踐：從一個簡單的頁面開始

餓了么基於 Vue 2.0 的通用組件庫開發之路

美團美團點評酒旅前端的技術體系一覽

美團點評前端無痕埋點實踐

滴滴滴滴：公司級組件庫以及 MIS 系統的技術實踐

滴滴 WebApp 實踐經驗分享

滴滴張耀春：如何打造公司級公共前端團隊

攜程IMVC（同構 MVC）的前端實踐

蘑菇街蘑菇街前後端分離實踐

京東京東 618：三大系統防作弊，挑戰直面用戶的困難

京東前端：PhantomJS 和 NodeJS 在京東網站前端監控平台的最佳實踐

京東前端：三級列表頁持續架構優化

前端如何展示商品屬性：SKU 多維屬性狀態判斷演算法的應用

技術實踐如何打造亞秒級頁面載入速度的網店？

前端組件化開發方案及其在 React Native 中的運用

HTML5 遊戲引擎開發一站式解決方案——青瓷引擎

400% 飛躍：Web 頁面載入速度優化實戰

Coding WebIDE 前端架構變遷

開發可擴展 Web 應用：React+Redux+React-router

魏曉軍：攜程 HTML5 性能優化實戰

如何度量真實的網頁性能？一文了解 V8 怎麼做的

複雜單頁應用的數據層設計

如何根據語言習慣簡化對象構造函數的創建過程

前端開源項目持續集成三劍客

前端人應該知道的排序知識

聊一聊前端存儲那些事兒

你忽略了的 Redux：一種頁面狀態管理的優雅方案

聊一聊前端模板與渲染那些事兒

深入淺出 Node.js 非同步流程式控制制

從真實世界到前後端的設計

如何貫穿整個 Web 開發棧進行應用程序測試

單頁應用的數據流方案探索

Redux 狀態管理之痛點、分析與改良

React Native 應用如何實現 60 幀 / 秒的流暢動畫？

AMP 與 MIP 等移動頁面加速框架的探索與實踐

如何做好 H5 性能優化？

如何保證 H5 頁面高質量低成本快速生成？

實測 Vue SSR 的渲染性能：避開 20 倍耗時

大型高性能 React PWA 如何消除各類性能瓶頸？

為性能而生！Twitter 新推出的 Twitter Lite 究竟是如何構建的？

探索 Redux 的最佳實踐

可供參考的四個 Webix 實例：生成多種類型的 JavaScript 列表

你還在用有漏洞的過期 JavaScript 庫嗎？

四、前端動態

每周清單前端每周清單第 16 期：JavaScript 模塊化現狀；Node V8 與 V6 真實性能對比；Nuxt.js SSR 與許可權驗證指南

前端每周清單第 15 期：Node.js v8.0 發布，從 React 遷移到 Vue，前端開發的未來

前端每周清單第 14 期：Vue 現狀與展望、編寫現代 JavaScript 代碼、Web 開發者安全自檢列表

前端每周清單期 13 期：Webpack CLI 發布、Angular 5 可期待的新特性、解密現代瀏覽器引擎構建之道

前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn 用 Brotli 加快網頁響應速度、餓了么 PWA 升級實踐

前端每周清單第 11 期：Angular 4.1 支持 TypeScript 2.3，Vue 2.3 優化服務端渲染，優秀 React 界面框架合集

前端每周清單第 10 期：Firefox53、React VR 發布、JS 測試技術概述、Microsoft Edge 現代 DOM 樹構建及性能之道

前端每周清單第 9 期：React Studio 1.0.2、ECharts GL 1.0 alpha 發布；向 jQuery 用戶介紹 Vue

前端每周清單第 8 期：React 16 即將發布，微軟發布跨平台開發框架 ReactXP，Twitter Lite 的構建之道

前端每周清單第 7 期：Next.js 2.0 發布，Vue.js 2.2 完整 API 手冊，Safari 10.1 新增系列重要特性

前端每周清單第 6 期：Angular 4.0 學習資源，Egg.js 1.0 發布，六問 CTO 程序員如何成長

前端每周清單第 5 期：jQuery 3.2 發布，滴滴採用 Vue 2.0 重構 Web App、餓了么 PWA 實踐經驗分享

前端每周清單第 4 期：React Router 4.0 發布、Firefox 52 默認支持 WebAssembly、蘋果熱修復門盤點

前端每周清單第 3 期：Instant App 將至，WebAssembly 將獲默認支持，PWA 實踐漸增

前端每周清單第 2 期：Vue 2.2 發布，React 在 GitHub 突破 6 萬 star

前端每周清單第 1 期：PWA 將與安卓原生平起平坐

一線動態GitHub 使用 Electron 重寫桌面客戶端

Node.js v8.0 新特性一覽

最終，JavaScript 成為了一流語言

TypeScript 2.3 新特性：泛型參數默認值、非同步迭代器等

Node.js 根本沒有 float：浮點反序列化錯誤背後的故事

Facebook 開源 JavaScript 代碼優化工具 Prepack

V8 不再使用基準測試引擎 Octane

Slack 團隊切換至 TypeScript，簡化大型 JS 代碼庫管理

Phantom.js 維護者 Slobodin 退出，項目未來將何去何從？

深入研究 Chrome：Preload 與 Prefetch 原理，及其優先順序

TypeScript 2.0 正式發布 | 面向未來兼容：用 ES2015+/TypeScript 開發 Node.js 項目

Bloomberg 開源 BuckleScript 1.0 助力 JS 平台大規模高性能軟體開發

微軟發布 TypeScript 2.0 RC 版本

Chrome 53 支持 Shadow DOM、PaymentRequest 等規範

減少內存消耗：谷歌 V8 JS 引擎引入新解釋器 Ignition

Windows 10 推出周年更新，Edge 瀏覽器支持擴展並改進 JavaScript 支持

個人可申請微信小程序！附小程序學習資源

為快速生成基於 JS 的 Web 應用，微軟發布系列工具

Chrome 開始集成圖形識別 API，一行代碼識別人臉

關於 Node.js 存在反序列化遠程代碼執行漏洞的安全公告

Web APP 實現水平滑頁翻頁交互效果的要點解析

阿里開源的企業級 Node.js 框架 egg 應如何看待？

一次一個微優化，改進 Node.js 應用的吞吐量

Opera 推出實驗性概念瀏覽器 Neon

Webpack 2 最終版本發布，聚焦文檔內容提升

NativeScript 2.2 將 Webpack 引入 Angular 項目

Windows 10 推出周年更新，Edge 瀏覽器支持擴展並改進 JavaScript 支持

Webpack Dashboard 迅速流行，Webpack 構建信息一目了然

Chrome 54 終結 YouTube 的 Flash 內嵌技術

V8 引擎內存消耗的分析和優化

Facebook 開源 JavaScript 包管理器 Yarn

NodeJS 第 7 版升級到 V8 5.4 版

Angular 1.X 在 Firefox 擴展開發中遭禁用

Linux 基金會迎來了 JavaScript 社區

Vue.js 作者尤雨溪加盟 Weex 項目擔任技術顧問

用 Visual Studio Code 調試 iOS Web 應用？美夢成真！

NativeScript 2.2 將 Webpack 引入 Angular 項目

JavaScript 音頻庫 Howler.js 2.0 版改進了 Web 音頻的播放

HTTP/2 的應用實戰：每天 400gb 圖片

Facebook 發布新工具 Create React App

Web 在努力變身為 OS，加強版 Web 應用將有新表現

Bootstrap 將放棄對 IE9 的支持

TypeScript 2.1 新特性一覽

Firebug 停止更新和維護

NativeScript 迎重大更新, 支持 Web Workers 規範

天貓即將不支持 IE8

進入里程碑階段的 WebAssembly 會威脅到 JS 嗎？

Chrome 和 HTTPS：安全 Web 的征途

Next.js 開源，提供基於 React 的簡單通用 JS 框架

美國成人網站使用 WebSocket 繞過廣告屏蔽插件

Dart 最新消息：Angular 2 Dart 及 Flutter 發布

npm 4.0 廢棄 Prepublish 生命周期腳本

五、知識積累More than ReactMore than React（五）非同步編程真的好嗎？

More than React（四）HTML 也可以靜態編譯？

More than React（三）虛擬 DOM 已死？

More than React（二）組件對復用性有害？

More than React（一）為什麼 ReactJS 不適合複雜的前端項目？

ES6深入淺出 ES6：魔力四射的生成器 Generators 續篇

深入淺出 ES6：集合

學完 Babel 和 Broccoli，馬上就用 ES6

深入淺出 ES6：Symbols

深入淺出 ES6：箭頭函數 Arrow Functions

ES6：掌握解構 Destructuring

一文掌握 ES6 中的不定參數和默認參數

深度了解 ES6: 模板字元串

深度了解 ES6：魔力四射的生成器 Generators

ES6 才是徹底改變了 JS 代碼的編寫方式

一文看透醜陋而又神奇的 JSX

深入淺出 ES6：代理 Proxies

深入淺出 ES6：集合

小程序刷爆朋友圈的「微信應用號事件」始末及相關資料整理

細思極恐：微信小程序會讓前端開發者失業

支付寶正在研發「小程序」，你怎麼看？

關於小程序，你所關注的 10 個問題

如何理解小程序的各種「沒有」？

張小龍首次全面闡述小程序，定檔 1 月 9 日上線（內附演講全文）

一起脫去小程序的外套和內衣 - 微信小程序架構解析

以實踐真正理解小程序

群分享預告：開發小程序 +，輕芒所踩過的坑

創建一個兼容微信小程序的 Web 框架

微信小程序剖析：原生的實時 DOM 轉 Virtual DOM

如何在 Chrome 瀏覽器上運行微信小程序？

微信小程序剖析 | 運行機制及框架原理

微信小程序來了，產品和運營就不需要跪求程序員了？

六、往期活動優秀的前端程序員為什麼要加入前端之巔？

【前端之巔】澱粉恩愛集

群分享預告：優雅地管理數據狀態？The Redux Way in 廣發證券

「 全棧式前端 」已來，你來不來？

升級你的前端開發思維

不為暢銷而出書？主編，你這是要鬧哪樣？！

群分享預告：百度搜索對 PWA 的探索和初步實踐

前端技術日新月異，技術人如何避免掉隊？BAT 大咖們這樣說！

前端工程師情人節專屬樹洞

群分享預告：PhantomJS & NodeJS 在京東網站前端監控平台的最佳實踐

群分享預告：滴滴公司級組件庫以及 MIS 系統的技術實踐分享

滴滴公共 FE 團隊答群友問

群分享預告：滴滴 WebApp 實踐經驗分享

群分享預告：扒一扒滴滴公共 FE 團隊都做了什麼？

【粉絲福利】第 1 彈：學 React？速戳領書！

群分享預告

群分享預告：Coding WebIDE 前端架構變遷

群分享預告：PhantomJS & NodeJS 在京東網站前端監控平台的最佳實踐

群分享預告：滴滴 WebApp 實踐經驗分享

群分享預告：扒一扒滴滴公共 FE 團隊都做了什麼？
推薦閱讀：