2015-2016前端知識體系
??總結(jié)了下前端這兩年的主流技術(shù)蛹找，大部分技術(shù)在我的博客里有較深入的研究學(xué)習(xí)定踱，對應(yīng)技術(shù)博客地址：http://ouvens.github.io 君仆，博客持續(xù)更新中隧魄，歡迎大家關(guān)注~
一藻糖、框架與組件
?bootstrap等UI框架設(shè)計與實現(xiàn)
- 伸縮布局：grid網(wǎng)格布局
- 基礎(chǔ)UI樣式：元素reset茫孔、按鈕空厌、圖片、菜單银酬、表單
- 組件UI樣式：按鈕組嘲更、字體圖標(biāo)、下拉菜單揩瞪、輸入框組赋朦、導(dǎo)航組、面包屑李破、分頁宠哄、標(biāo)簽、輪播嗤攻、彈出框毛嫉、列表、多媒體妇菱、警告
- 響應(yīng)式布局：布局承粤、結(jié)構(gòu)、樣式闯团、媒體辛臊、javascript響應(yīng)式
- 第三方插件：插件管理
?jQuery、zepto使用原理以及插件開發(fā)
- 支持amd房交、cmd彻舰、全局變量的模塊化封裝
- $.fn.method = function(){}
?mvc/mvvm框架原理設(shè)計，vue/angular/avalon等
- directive設(shè)計：html候味、text刃唤、class、html白群、attr尚胞、repeat、ref川抡，可擴展
- filter設(shè)計：bool辐真、upperCase须尚、lowerCase，可擴展
- 表達式設(shè)計：if-else等實現(xiàn)
- viewmodel結(jié)構(gòu)設(shè)計：例如數(shù)據(jù)侍咱，元素耐床，方法的掛載與作用域
- 數(shù)據(jù)更變檢測：函數(shù)觸發(fā)，臟數(shù)據(jù)檢測楔脯、對象hijacking
?polymer/angular2思想與設(shè)計思路
- import技術(shù)
- template和script引入方式
- css樣式命名空間隔離
- 簡單復(fù)用第三方庫
?reactjs原理與使用
- virtual dom單向數(shù)據(jù)綁定
- js執(zhí)行語法方式
- UI由狀態(tài)控制
?commonJS/AMD/CMD
- 模塊引入
- 模塊定義
- 模塊標(biāo)識
- UMD解決不同規(guī)范兼容性的問題撩轰，例如webpack封裝
- 模塊懶執(zhí)行(CMD)與與預(yù)執(zhí)行(AMD)
?loadJs模塊化加載原理與實現(xiàn)
- 創(chuàng)建script標(biāo)簽，需要id映射到資源url
- onload加載模塊隊列判斷
- 全部加載完成后觸發(fā)
- 加載失敗問題優(yōu)化
- requirejs昧廷、modjs堪嫂、seajs
?polyfill、shim原理與實現(xiàn)
- polyfill提供了開發(fā)者們希望瀏覽器原生提供支持的功能特性
- shim將新的API引入到舊的環(huán)境中,且僅靠舊環(huán)境中已有的手段實現(xiàn)
?virtual Dom木柬、Incremental DOM
- 1.用js對象樹表示dom樹結(jié)構(gòu)皆串，根據(jù)該對象樹構(gòu)建dom樹
- 2.狀態(tài)改變時，重新構(gòu)建對象眉枕，和舊的對象對比恶复，記錄兩個對象樹差異
- 3.將對象樹差異應(yīng)用到dom中
- 小結(jié):js對象模擬dom(elem.js)，virtual dom diff算法(diff.js)速挑、差異渲染dom(patch.js)
- incremental dom在狀態(tài)改變時掃描舊對象樹將差異直接應(yīng)用到dom中
?shadow dom
- 隔離外部環(huán)境用于封裝組件：結(jié)構(gòu)谤牡、樣式、行為
- 實現(xiàn)形式：新標(biāo)簽姥宝、class類屬性 + 構(gòu)建編譯
?webwork與service Worker
- webwork與主線程機制翅萤，on/post
- serviceworker可作為瀏覽器請求代理
- 應(yīng)用場景
?ES6轉(zhuǎn)ES5、Babel與ES6開發(fā)規(guī)范體系
- ES6編碼規(guī)范全
- ES6在babel下兼容性
- ES6在node下兼容性與性能
- ES6新特性：看編碼規(guī)范
- aurelia ES6前端框架
?Isomorphic JavaScript
- 同構(gòu)原理
- 同構(gòu)方案 Rendr
- nodejs: 服務(wù)器
- hapi: 應(yīng)用服務(wù)
- backbone.js: 后臺mvc
- requirejs: 模塊加載
- jquery: dom處理
- reactjs同構(gòu):React + Flux + Koa
?雙向數(shù)據(jù)綁定
- 函數(shù)觸發(fā):vuejs
- 臟數(shù)據(jù)檢測:angular
- 對象hijacking:avalon
?browserify運行原理
- 1.從入口模塊開始分析require函數(shù)調(diào)用
- 2.根據(jù)依賴生成AST
- 3.根據(jù)AST找到每個模塊的模塊名
- 4.得到每個模塊的依賴關(guān)系腊满，生成一個依賴字典
- 5.包裝每個模塊（傳入依賴字典以及export和require函數(shù)）套么，生成執(zhí)行的js
?performance timing
- performance timing api
- performance timing 過程
- performance timing 性能計算
- performanceTrace庫
?組件UI與js組件規(guī)范化
- 組件編碼規(guī)范
- 組件目錄規(guī)范：組件目錄與公用目錄
- 組件構(gòu)建規(guī)范：構(gòu)建環(huán)境支持
- 組件模塊化管理：spm，bowserify
- 組件復(fù)用性管理
- 第三方組件接入成本
?immutable JavaScript
?generator與promise原理與使用
二糜烹、構(gòu)建生態(tài)
?grunt/gulp開發(fā)環(huán)境任務(wù)編寫
- 文件處理插件：html违诗、scss、js疮蹦、image、font茸炒、其它
- 優(yōu)化插件：雪碧圖愕乎、圖片壓縮、iconfont構(gòu)建
- 發(fā)布替換插件
- 打包壁公、壓縮包插件：組件自動分析
- 白名單配置
- 自定義插件編寫
?npm感论、jspm、bower包管理工具
?r.js紊册、browserify比肄、webpack快耿、Rollup打包工具使用
- 原理：根據(jù)依賴配置文件對文件進行依賴打包
- webpack支持更多的規(guī)范打包，AMD,Commonjs
- webpack+babel/reactjs+reflux
?fis3構(gòu)建與插件開發(fā)芳绩、構(gòu)建環(huán)境掀亥、fis3構(gòu)建離線包
?web Component：rosetta-org、x-view妥色、Q搪花、riot、nova
?brunch構(gòu)建工具
三嘹害、開發(fā)技巧與調(diào)試
?fiddler加willow基礎(chǔ)組合調(diào)試
- 常見配置與分析
- 結(jié)合瀏覽器調(diào)試
?werien撮竿、vorlonjs遠(yuǎn)程調(diào)試，chrome inspect
?mockjs笔呀，F(xiàn).M.S(Front Mock Server)模擬調(diào)試使用與cgi自動調(diào)試
?macha/phantomjs/casperjs/karma測試自動化任務(wù)使用
?自動化UI測試幢踏，海豚
?node-supervior、node-inspector许师、karma
?開發(fā)發(fā)布系統(tǒng)流程
?sublime高效插件
- emmet工具使用房蝉、 sublimelinter、 babel snippets枯跑、 sublimeLint惨驶、 SassBeautify 、 emmet 快速編輯敛助、 jsxlint粗卜、 SideBarEnhancements、 SnippetsMaker纳击、 SublimeCodeIntel续扔、 css snippets、 ColorPicker焕数、 html/css/js Pretty纱昧、 SpinnetMacker、 DocBlockr堡赔、 MultiEditUtils识脆、 javascript & node spinnet、 JavaScript & NodeJS Snippets善已、 jsLint灼捂、cssLint
?代碼自動化檢查fecs
四、html换团、css與重構(gòu)
?jpeg悉稠、webp、apng艘包、bpg圖片
- 編碼原理
- 特點與優(yōu)劣勢
- 適用場景
?iconfont使用與實現(xiàn)原理
- 自動打包構(gòu)建方法
- iconfont兼容性寫法
- fonthello的猛、fontawesome耀盗、icomoon.io、iconfont.cn線上工具
?頁面響應(yīng)式設(shè)計
- layout布局響應(yīng)式
- html結(jié)構(gòu)響應(yīng)式
- css樣式響應(yīng)式
- image媒體響應(yīng)式
- javascript響應(yīng)式
- media query與平臺判斷
?css重置
- reset
- nomalize
- neat
?sass/compass/less/postcss常用語法與使用
- 常用語法功能
- 組件化UI設(shè)計管理
- 構(gòu)建工具實現(xiàn)方案
- 雪碧圖自動合成
- iconfont自動接入等等
?media query與常見頁面尺寸了解
- 媒體類型引入和媒體特性引入
- device-width適應(yīng)
- retina屏幕適應(yīng)
?em,rem原理與實現(xiàn)
- rem計算：width*retina/10卦尊，相當(dāng)于屏幕寬度為10rem
- 字體在rem情況下仍然使用px
?code4ui叛拷、code4app、初頁猫牡、maka等
- 前端dom操作即使刷新前端頁面
- 根據(jù)dom操作生成組件config配置保存到db
- 根據(jù)config配置使用r.js或webpack打包
- 發(fā)布打包后輸出文件
?css3動畫
- transform
- animation
- transiction
- 3D加速與動畫加速
- 動畫庫
- 緩動函數(shù)速查表： http://www.xuanfengge.com/easeing/easeing/
- cubic-bezier：http://cubic-bezier.com/
?css網(wǎng)格布局
- susy
- Responsive Grid System
- Fluid 960 Grid(adaptjs)
- Simple Grid
?搜索引擎與前端SEO
- tdk優(yōu)化
- 頁面內(nèi)容優(yōu)化
- 唯一的H1標(biāo)題
- img設(shè)置alt屬性
- nofollow
- url優(yōu)化
- 統(tǒng)一鏈接
- 301跳轉(zhuǎn)
- canonical
- robot優(yōu)化
- robots.txt
- meta robots
- sitemap
- SEO工具
- 各種站長工具等
?瀏覽器緩存種類胡诗，resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage
- store.js、cookie.js
?UI框架
- bootstrap淌友、jqwidgets煌恢、semantic ui、amaze ui
- 微信手Q ui: frozenui震庭、weui瑰抵、blend ui
- extjs、echart圖表ui
五器联、native/hybrid/桌面開發(fā)
?ionic移動開發(fā)方案
- 運行架構(gòu)
- hybrid混合開發(fā)
- cordova交互
- 離線包更新
- 性能瓶頸
?nativescript移動開發(fā)方案
?react Native移動開發(fā)方案
- 運行架構(gòu)：js引擎
- 性能缺陷與內(nèi)存泄露
- 更新機制
- 使用場景
?android/ios原生開發(fā)與框架
- java
- oc二汛、swift
- web與native交互
- 屏幕旋轉(zhuǎn)
- 搖一搖
- 錄像，拍照拨拓，選取本地圖片
- 打電話肴颊，發(fā)短信
- 電池電量
- 地理位置
- 日期選擇
- 開啟硬件加速
?桌面應(yīng)用開發(fā)
- nodewebkit
- atom-shell(后改名為electron)
- 網(wǎng)易Hex
- pomelo(游戲服務(wù)器框架)
- react desktop
- appjs:appjs.com
六、前端/H5優(yōu)化(另一個圖已給出)
?yslow渣磷、pagespeed
?移動web性能優(yōu)化
- 手機瀏覽器"省流量"原理
- 增量更新原理及注意事項
- 本地存儲的應(yīng)用
- 加載優(yōu)化
- 圖片優(yōu)化
- 單頁面及路由實現(xiàn)
- 業(yè)內(nèi)著名站點案例分析
七婿着、全棧/全端開發(fā)
?express/node club + mongodb、thinkjs等框架
?node.js直出
?實時web開發(fā)醋界，meteor/express.io
?MEAN(mongodb/express/angular/nodejs)
?http與http2協(xié)議竟宋、bigpipe、pipeline
?離線緩存形纺，cookie丘侠、localstorage、indexdb
?cdn與dns
- 動態(tài)域名加速
- cdn原理與cdn combo
八逐样、研究實驗
?WebAssembly蜗字、webTRC、typescript
?Material design規(guī)范的前端框架
- 交互動效庫
?AMP-HTML規(guī)范
- 使用受限HTML以及緩存技術(shù)來提高移動網(wǎng)絡(luò)中靜態(tài)內(nèi)容的性能
- 添加自定義的元素代替禁用掉的元素：amp-audio, amp-img脂新、amp-video等
九秽澳、數(shù)據(jù)分析與監(jiān)控
?badjs數(shù)據(jù)上報
- 捕獲錯誤兩種方法：onerror、try-catch戏羽。抽樣上報，先onerror統(tǒng)計語法錯誤楼吃，如果是script error始花，再使用tryjs妄讯。
- 后臺統(tǒng)計方法、不同業(yè)務(wù)接入體系酷宵、抽樣統(tǒng)計
- onerror:可以捕捉語法錯誤和運行時錯誤亥贸；可以拿到出錯的信息，堆棧浇垦，出錯文件炕置、行號、列號男韧；當(dāng)前頁面執(zhí)行的js腳本出錯都會捕捉到朴摊；跨域的資源需要特殊頭部支持。
- try-catch:無法捕捉語法錯誤此虑，只能捕捉運行時錯誤甚纲；可以拿到出錯的信息，堆棧朦前，出錯文件介杆、行號、列號韭寸；需要借助工具把function塊以及文件塊加入try,catch春哨，可以在這個階段打入更多的靜態(tài)信息。
?點擊熱力圖clickHeat恩伺、heatMap
?js加載失敗優(yōu)化方案
- 失敗重發(fā)機制
- 加載源域名服務(wù)器文件
- https反劫持
?百度alog數(shù)據(jù)上報
十赴背、其它軟技能
?axure 原型圖設(shè)計
?xmind腦圖管理
?效率管理
?can i use、github
?知識管理/總結(jié)分享
?產(chǎn)品思維與技能
十一莫其、前端技術(shù)網(wǎng)站
?技術(shù)社區(qū)
- w3c tech癞尚、w3c plus、w3 help
- div.io乱陡、nodeParty
- 稀土掘金浇揩、前端早讀課
- alloyteam、html5基地
- W3 help
?行業(yè)會議
- segmentfault會議
- 深js憨颠、杭js
- GMIC(全球移動互聯(lián)網(wǎng)大會)
- D2胳徽、webrebuild
- infoQ內(nèi)容、Qcon爽彤、velocity
??另外說明下养盗，這里不僅僅是概念的羅列，過去也有些人有類似的總結(jié)适篙，但是偏基礎(chǔ)和概念羅列往核，沒什么深度，這里有較多原理性的概述嚷节，博客有對應(yīng)文章聂儒，較新熱門的技術(shù)我的博客里也有很多虎锚，大家可以結(jié)合起來看，目前博客大概寫了50%的總結(jié)文章衩婚。后面也會根據(jù)這個圖去補齊我博客里的知識板塊窜护。
??持續(xù)更新中，如果覺得不錯非春，請點star支持下柱徙，甚至在您的團隊里擴散下，謝謝~
