前端資源系列（4）-前端學習資源分享&前端面試資源彙總

特地對前端學習資源作一個彙總，方便本身學習查閱參考，和好友們共同進步。

本覺得本身收藏的站點多，能夠很快搞定，沒想到一入彙總深似海。還有不少不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正...

託管: welcome to git，歡迎交流，感謝star

有好友反應和斧正，會及時更新，平時業務工做時也會不按期更新在...2018-09-13
https://xiaohuazheng.github.i...

內容精簡

資源這麼多，多看看多學習再總結確定是好的。多讀讀就算看重了不算浪費時間，畢竟一千個讀者就有一千個林黛玉，還有溫故而知新，說不定多讀一些內容，就發現驚喜了呢。不過，在此也精簡一些內容，就1~2項，只供參考。更多內容細看分類。

• 知乎：程序員應該如何注意身體健康？
• js：JavaScript 標準參考教程
• js：JavaScript 祕密花園
• Es6：ECMAScript 6入門
• Es6：深刻淺出ES6
• css：CSS 參考手冊
• html:HTML超文本標記語言
• jquery：從零開始學習jQuery
• jquery：前端開發者都應知道的 jQuery 小技巧
• 移動Web：騰訊移動Web前端知識庫
• 移動Web：移動web知識資料集-白樹
• 小程序：微信小程序開發資源彙總...
• Git：Git教程 - 廖雪峯
• Git：設置Git快捷命令
• React：React入門教程
• Angular: Angular.js 的一些學習資源
• underscore：underscore.js 手冊
• vue：vue.js API 中文
• RegExp：RegExp對象 - 阮一峯
• Node：Node.js 包教不包會
• Express：Express 4.x API 中文手冊
• Koa：Koa 框架學習
• 前端：Front-End-Develop-Guide 前端開發指南
• 模塊化：JavaSript模塊規範 - AMD規範與CMD規範介紹
• 規範化：經過分析github代碼庫總結出來的工程師代碼書寫習慣
• 工程化：前端工程——基礎篇
• 博客：淘寶前端團隊
• 博客：Tencent AlloyTeam
• 博客：FEX 百度WEB前端研發部
• 工具：sublime-text & 資料齊聚
• 工具：chrome 開發者工具的 15 個小技巧
• 優化：移動H5前端性能優化指南
• 面試：前端開發面試題

前端資源教程類

各類教程會有不少，我也精簡的挑選了一些。選擇一兩個合適的就行了。有時間多看看多比比也是極好的。

JavaScript

• Javascript教程-小白的零基礎JavaScript全棧教程-瘳雪峯
• JavaScript 標準參考教程
• You-Dont-Know-JS -- 不建議初學者查看
• You-Dont-Know-JS -- 翻譯版
• 從新介紹 JavaScript（JS 教程）
• 前端入門教程
• 前端開發者手冊
• JavaScript學習總結-trigkit4
• 溫故js系列-對知識點進行回顧知新
• JS函數式編程指南
• JavaScript Promise迷你書（中文版）
• 精通JavaScript開發-智能社
• JavaScript祕密花園
• JavaScript 資源大全中文版
• JavaScript闖關記 - 編輯中
• JavaScript練習網站收集
• 統一回復《怎麼學JavaScript？》
• runjs - js在線編輯學習
• 經常使用的Javascript設計模式
• 45個實用的JavaScript技巧、竅門和最佳實踐
• 給JavaScript初學者的24條最佳實踐
• 編寫快速、高效的JavaScript代碼
• Ajax知識體系
• javascript功能插件大集合
• Moment.js
• Moment.js 中文網
• TypeScript 2.1 新特性一覽
• JS Tips – A JS tip per day!

ES6

• ECMAScript 6入門
• 深刻淺出ES6
• 探索ES6
• ES6 你可能不知道的事 - 基礎篇
• ES6 你可能不知道的事 - 進階篇

HTML5

• HTML5與CSS3權威指南（書籍）
• html:HTML超文本標記語言
• 譯谷歌 HTML/CSS 規範
• HTML5菜鳥教程
• 《每週一點canvas動畫》
• 玩轉html5<canvas>畫圖
• HTML5+NodeJs實現WebSocket即時通信

CSS3

• CSS 語法參考
• CSS 參考手冊
• 騰訊css3動畫製做工具
• Bootstrap 中文網
• css3 js 移動大雜燴
• Animate.css
• Sass guide
• Sass中文文檔
• less
• 談談一些有趣的CSS題目系列
• CSS居中：徹底指南（譯）
• 業務代碼中可用的css小技巧
• You Don't Know CSS（一）
• You Don't Know CSS（二）

jQuery

• 從零開始學習jQuery
• jQuery API 中文文檔
• learn JQuery
• JQuery 源碼查找
• 前端開發者都應知道的 jQuery 小技巧
• 10 個 jQuery 圖表插件推薦

移動WEB

• 騰訊移動Web前端知識庫
• 支付寶-無線Web開發經驗談
• 移動web知識資料集-白樹
• 移動端學習 - mobileTech
• 移動前端的一些坑和解決方法（外觀表現）
• hotcss 移動端佈局終極解決方案 - 讓移動端佈局開發更加容易
• zepto
• jqmobile 手冊
• swiper中文網
• iscroll
• 移動開發大雜燴
• 特點的HTML框架能夠建立精美的iOS應用-框架

微信小程序

• 微信(小程序or應用號)開發資源彙總-文檔-工具-教程-代碼-插件-組件...

Git

• Git教程 - 廖雪峯
• GitHub 漫遊指南
• 企業開發git工做流模式探索
• Git資料
• Git經常使用命令
• 設置Git快捷命令

React

• React 教程
• Redux-saga 中文文檔
• react.js 官方文檔
• reactnative
• React 入門實例教程 - 阮一峯
• React Native 中文版
• 深刻淺出React（一）：React的設計哲學 - 簡單之美
• 一看就懂的ReactJs入門教程（精華版）
• React china 中文社區
• 深刻淺出React（系列）
• React 設計思想
• dva- 基於 redux、redux-saga 和 react-router@2.x 的輕量級前端框架
• Ant Design of React
• tween-one 動效組件

Angularjs

• Angular.js 的一些學習資源
• 關於 AngularJS 框架的使用有哪些經驗值得分享？
• 有jQuery背景，該如何用AngularJS編程思想
• AngularJS 源碼分析
• AngularJS 中文社區
• AngularJS 入門教程 圖靈社區

函數工具

• underscore-underscore.js 手冊
• underscore-underscore.js源碼分析
• lodash-官方文檔
• lodash-中文文檔

vue.js

• vuejs 英文官網
• vuejs 中文官網
• vue.js API 中文
• vue.js 中文社區
• vuejs-github-官方倉庫
• Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的組件庫
• vue最新實戰 gank客戶端（vue2 + vue-router2 + vuex +webpack+ es6）新手福利，乾貨多多
• Welcome to the Vue Forum!
• iView - 一套基於 Vue.js 的高質量 UI 組件庫，主要服務於 PC 界面的中後臺產品
• vue 性能優化
• Vue 2.0 構建單頁應用最佳實戰
• Vue 2.0源碼學習
• Mint UI 使用文檔

正則表達式

• RegExp對象 - 阮一峯
• 正則表達式&經常使用代碼
• 正則表達式前端手冊
• 進階正則表達式
• 正則表達式 - MDN
• ES6正則的擴展
• 在線正則表達式測試

NodeJs

• 深刻淺出NodeJs（推薦書籍）
• Node.js 包教不包會
• 七天學會NodeJS
• NodeJs學習筆記
• NodeJs-阮一峯
• Node.js 到底是什麼？
• NodeJs的代碼調試和性能調優
• Express 框架學習
• Express 4.x API 中文手冊
• Koa 框架學習
• Koa 手冊
• ejs Embedded JavaScript Template

簡單算法

• 數據結構與算法 JavaScript 描述. 章節練習
• 常見排序算法（JS版
• JS算法 數據結構 精華集
• 算法系列15天速成——第一天 七大經典排序【上】
• 常見排序算法及優化

前端綜合

• Front-End-Develop-Guide 前端開發指南
• 前端知識體系
• 前端知識結構
• 前端開發的歷史和趨勢
• 前端工程師必備的PS技能——切圖篇
• 結合我的經歷總結的前端入門方法
• w3help
• 響應式佈局指南
• 關於前端開發談談單元測試

前端模塊化開發類

• JavaSript模塊規範 - AMD規範與CMD規範介紹
• Javascript模塊化編程（一）：模塊的寫法 阮一峯
• Javascript模塊化編程（二）：AMD規範 阮一峯
• Javascript模塊化編程（三）：require.js的用法 阮一峯
• RequireJS入門（一）Snandy
• RequireJS入門（二）Snandy
• RequireJS入門（三）Snandy
• RequireJS進階（一）Snandy
• RequireJS進階（二）Snandy
• RequireJS進階（二）Snandy
• RequireJS 入門指南
• Seajs 提供簡單、極致的模塊化開發體驗

前端開發規範類

• 經過分析github代碼庫總結出來的工程師代碼書寫習慣
• HTML&CSS編碼規範 by @mdo
• Javascript編碼規範-Max Yu
• CSS編碼規範-Max Yu
• 前端編碼規範之JavaScript-小鬍子哥
• 前端編碼規範之css-小鬍子哥
• 前端開發規範手冊
• 前端代碼規範 及 最佳實踐
• 百度前端規範
• 網易前端規範

前端工程化類

工程化的工具都不是絕對的，選擇合適的使用，項目多了，說不定你都用上了也不必定。反正在我身邊我知道的項目中，不一樣項目用着不一樣工具，基本都包含了。

• 前端工程——基礎篇
• Gulp中文網
• Gulp官網
• Gulp：任務自動管理工具 - 阮一峯
• Gulp 入門指南
• Gulp入門教程
• Grunt中文網
• Grunt官網
• fis 前端工具框架
• fis 文檔
• Webpack
• Webpack 中文指南
• Webpack傻瓜式指南（一）
• Webpack傻瓜指南（二）開發和部署技巧
• 入門Webpack，看這篇就夠了
• Webpack 2 入門教程

前端開源Git類

• Facebook Projects
• Baidu FEX team
• nzakas
• chrome開發團隊成員
• 玉伯 -支付寶前端Leader
• 豆瓣前端Leader
• JacksonTian 樸靈
• 伯樂在線
• 淘寶UED北京團隊
• 國外TJ大神
• substack
• 支付寶前端美女沉魚~
• fengmk2
• github上值得關注的前端項目 - 404

前端知名博客類

SF內有不少高手，能夠前去排行榜看看。。。

• 淘寶前端團隊
• Tencent AlloyTeam 2016
• FEX 百度WEB前端研發部
• EFE 百度EFE(Excellent FrontEnd)技術體系
• qunaer UED
• Ruby-China
• CNodeJs
• i5ting狼叔
• 伯樂在線
• 博客園
• 大漠
• 樸靈
• justjavac - 迷渡
• 阮一峯的網絡日誌
• 三生石上-專一於前端（JavaScript、jQuery、ExtJS）
• 司徒正美-Ruby's Louvre
• 張鑫旭 - CSSCSSCSS
• Snandy

前端開發工具類

• sublime-text & 資料齊聚
• SublimeText-快捷鍵大全
• Gif多圖：我經常使用的 16 個 Sublime Text 快捷鍵
• sublime Text3 經常使用快捷鍵 - mac版
• AngularJS最理想開發工具WebStorm
• Fiddler調式深刻研究(一)
• Fiddler實戰深刻研究(二)
• 移動web調式利器---Rosin研究
• 移動開發中Fiddler的那些事兒
• 微信內移動前端開發抓包調試工具fiddler使用教程
• Google Chrome 官方
• Chrome開發者工具不徹底指南（1、基礎功能篇）
• Chrome開發者工具不徹底指南（2、進階篇）
• Chrome開發者工具不徹底指南（3、性能篇）
• Chrome開發者工具不徹底指南（4、性能進階篇）
• Chrome開發者工具不徹底指南（5、移動篇）
• chrome開發工具快捷鍵
• Chrome 開發工具 Workspace 使用
• chrome 開發者工具的 15 個小技巧
• 天啦嚕！原來Chrome自帶的開發者工具還能這麼用！
• 神器——Chrome開發者工具(一)
• 使用Chrome開發工具調試Canvas
• WEB調試工具---Firebug-慕課網
• Firefox 開發工具 WebIDE
• Firebug入門指南 - 阮一峯
• Firebug控制檯詳解 - 阮一峯
• 移動端前端開發調試
• 屌爆了,完美調試 微信webview(x5)
• 微信調試的那些事
• 在線二維碼圖片生成器
• Smart PNG and JPEG compression在線圖片壓縮
• easyicon 圖標下載
• Icon Hover Effects

前端性能優化類

• Javascript高性能動畫與頁面渲染
• 移動H5前端性能優化指南
• 給網頁設計師和前端開發者看的前端性能優化
• 轉一篇Yahoo關於網站性能優化的文章，兼談本站要作的優化
• Yahoo!團隊實踐分享:網站性能優化的34條黃金守則(一)—內容
• 網站性能優化指南：什麼使咱們的網站變慢？
• 分享網頁加載速度優化的一些技巧
• 【高性能前端1】高性能HTML -
• 【高性能前端2】高性能CSS
• 前端工程精粹（一）：靜態資源版本更新與緩存
• 前端工程精粹（二）：靜態資源管理與模板框架
• 讓網站提速的最佳前端實踐
• 阿里無線前端性能優化指南 (Pt.1 加載期優化)
• pagespeed - 檢測網頁性能及優化建議

前端面試類

面試題能夠供咱們學習補漏，但面試題始終有一種應對面試的感受。請相信面試官能輕易的看出你的斤兩，掌握基礎和提高技術纔是最重要的。這些面試題也是極好的。

• 前端開發面試題
• 前端開發面試題 - GitHub
• 前端開發面試問題及答案整理
• front-end development interview questions and answers
• 如何面試一名前端開發工程師？
• 前端實習生面試總結
• 前端開發面試題大收集
• 如何面試前端工程師？ - 知乎
• 5個經典的前端面試問題
• 10個常見的Node.js面試題
• 百度FEX 的面試
• 40 個重要的 HTML5 面試問題及答案
• BAT及各大互聯網公司2014前端筆試面試題：JavaScript篇
• TCP三次握手&Render Tree頁面渲染=>從輸入URL到頁面顯示的過程
• 前端進階-讓你升級的網絡知識