2015-2016前端知識體系
2015-2016前端知識體系
對應技術博客：http://ouvens.github.io ，博客持續更新中~
一、框架與組件
?bootstrap等UI框架設計與實現
-
伸縮布局：grid網格布局
-
基礎UI樣式：元素reset、按鈕、圖片、菜單、表單
-
組件UI樣式：按鈕組、字體圖標、下拉菜單、輸入框組、導航組、面包屑、分頁、標簽、輪播、彈出框、列表、多媒體、警告
-
響應式布局：布局、結構、樣式、媒體、javascript響應式
-
第三方插件：插件管理
?jQuery、zepto使用原理以及插件開發
-
支持amd、cmd、全局變量的模塊化封裝
-
$.fn.method = function(){}
?mvc/mvvm框架原理設計，vue/angular/avalon等
-
directive設計：html、text、class、html、attr、repeat、ref，可擴展
-
filter設計：bool、upperCase、lowerCase，可擴展
-
表達式設計：if-else等實現
-
viewmodel結構設計：例如數據，元素，方法的掛載與作用域
-
數據更變檢測：函數觸發，臟數據檢測、對象hijacking
?polymer/angular2思想與設計思路
-
import技術
-
template和script引入方式
-
css樣式命名空間隔離
-
簡單復用第三方庫
?reactjs原理與使用
-
virtual dom單向數據綁定
-
js執行語法方式
-
UI由狀態控制
?commonJS/AMD/CMD
-
模塊引入
-
模塊定義
-
模塊標識
-
UMD解決不同規范兼容性的問題，例如webpack封裝
-
模塊懶執行(CMD)與與預執行(AMD)
?loadJs模塊化加載原理與實現
-
創建script標簽，需要id映射到資源url
-
onload加載模塊隊列判斷
-
全部加載完成后觸發
-
加載失敗問題優化
-
requirejs、modjs、seajs
?polyfill、shim原理與實現
-
polyfill提供了開發者們希望瀏覽器原生提供支持的功能特性
-
shim將新的API引入到舊的環境中,且僅靠舊環境中已有的手段實現
?virtual Dom、Incremental DOM
-
1.用js對象樹表示dom樹結構，根據該對象樹構建dom樹
-
2.狀態改變時，重新構建對象，和舊的對象對比，記錄兩個對象樹差異
-
3.將對象樹差異應用到dom中
-
小結:js對象模擬dom(elem.js)，virtual dom diff算法(diff.js)、差異渲染dom(patch.js)
-
incremental dom在狀態改變時掃描舊對象樹將差異直接應用到dom中
?shadow dom
-
隔離外部環境用于封裝組件：結構、樣式、行為
-
實現形式：新標簽、class類屬性 + 構建編譯
?webwork與service Worker
-
webwork與主線程機制，on/post
-
serviceworker可作為瀏覽器請求代理
-
應用場景
?ES6轉ES5、Babel與ES6開發規范體系
-
ES6編碼規范全
-
ES6在babel下兼容性
-
ES6在node下兼容性與性能
-
ES6新特性：看編碼規范
-
aurelia ES6前端框架
?Isomorphic JavaScript
-
同構原理
-
同構方案 Rendr
-
nodejs: 服務器
-
hapi: 應用服務
-
backbone.js: 后臺mvc
-
requirejs: 模塊加載
-
jquery: dom處理
-
reactjs同構:React + Flux + Koa
?雙向數據綁定
-
函數觸發:vuejs
-
臟數據檢測:angular
-
對象hijacking:avalon
?browserify運行原理
-
1.從入口模塊開始分析require函數調用
-
2.根據依賴生成AST
-
3.根據AST找到每個模塊的模塊名
-
4.得到每個模塊的依賴關系，生成一個依賴字典
-
5.包裝每個模塊（傳入依賴字典以及export和require函數），生成執行的js
?performance timing
-
performance timing api
-
performance timing 過程
-
performance timing 性能計算
-
performanceTrace庫
?組件UI與js組件規范化
-
組件編碼規范
-
組件目錄規范：組件目錄與公用目錄
-
組件構建規范：構建環境支持
-
組件模塊化管理：spm，bowserify
-
組件復用性管理
-
第三方組件接入成本
?immutable JavaScript
?generator與promise原理與使用
二、構建生態
?grunt/gulp開發環境任務編寫
-
文件處理插件：html、scss、js、image、font、其它
-
優化插件：雪碧圖、圖片壓縮、iconfont構建
-
發布替換插件
-
打包、壓縮包插件：組件自動分析
-
白名單配置
-
自定義插件編寫
?npm、jspm、bower包管理工具
?r.js、browserify、webpack、Rollup打包工具使用
-
原理：根據依賴配置文件對文件進行依賴打包
-
webpack支持更多的規范打包，AMD,Commonjs
-
webpack+babel/reactjs+reflux
?fis3構建與插件開發、構建環境、fis3構建離線包
?web Component：rosetta-org、x-view、Q、riot、nova
?brunch構建工具
三、開發技巧與調試
?fiddler加willow基礎組合調試
-
常見配置與分析
-
結合瀏覽器調試
?werien、vorlonjs遠程調試，chrome inspect
?mockjs，F.M.S(Front Mock Server)模擬調試使用與cgi自動調試
?macha/phantomjs/casperjs/karma測試自動化任務使用
?自動化UI測試，海豚
?node-supervior、node-inspector、karma
?開發發布系統流程
?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與重構
?jpeg、webp、apng、bpg圖片
-
編碼原理
-
特點與優劣勢
-
適用場景
?iconfont使用與實現原理
-
自動打包構建方法
-
iconfont兼容性寫法
-
fonthello、fontawesome、icomoon.io、iconfont.cn線上工具
?頁面響應式設計
-
layout布局響應式
-
html結構響應式
-
css樣式響應式
-
image媒體響應式
-
javascript響應式
-
media query與平臺判斷
?css重置
-
reset
-
nomalize
-
neat
?sass/compass/less/postcss常用語法與使用
-
常用語法功能
-
組件化UI設計管理
-
構建工具實現方案
-
雪碧圖自動合成
-
iconfont自動接入等等
?media query與常見頁面尺寸了解
-
媒體類型引入和媒體特性引入
-
device-width適應
-
retina屏幕適應
?em,rem原理與實現
-
rem計算：width*retina/10，相當于屏幕寬度為10rem
-
字體在rem情況下仍然使用px
?code4ui、code4app、初頁、maka等
-
前端dom操作即使刷新前端頁面
-
根據dom操作生成組件config配置保存到db
-
根據config配置使用r.js或webpack打包
-
發布打包后輸出文件
?css3動畫
-
transform
-
animation
-
transiction
-
3D加速與動畫加速
-
動畫庫
-
cubic-bezier：http://cubic-bezier.com/
?css網格布局
-
susy
-
Responsive Grid System
-
Fluid 960 Grid(adaptjs)
-
Simple Grid
?搜索引擎與前端SEO
-
tdk優化
-
頁面內容優化
-
唯一的H1標題
-
img設置alt屬性
-
nofollow
-
url優化
-
統一鏈接
-
301跳轉
-
canonical
-
robot優化
-
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/桌面開發
?ionic移動開發方案
-
運行架構
-
hybrid混合開發
-
cordova交互
-
離線包更新
-
性能瓶頸
?nativescript移動開發方案
?react Native移動開發方案
-
運行架構：js引擎
-
性能缺陷與內存泄露
-
更新機制
-
使用場景
?android/ios原生開發與框架
-
java
-
oc、swift
-
web與native交互
-
屏幕旋轉
-
搖一搖
-
錄像，拍照，選取本地圖片
-
打電話，發短信
-
電池電量
-
地理位置
-
日期選擇
-
開啟硬件加速
?桌面應用開發
-
nodewebkit
-
atom-shell(后改名為electron)
-
網易Hex
-
pomelo(游戲服務器框架)
-
react desktop
-
appjs:appjs.com
六、前端/H5優化(另一個圖已給出)
?yslow、pagespeed
?移動web性能優化
-
手機瀏覽器"省流量"原理
-
增量更新原理及注意事項
-
本地存儲的應用
-
加載優化
-
圖片優化
-
單頁面及路由實現
-
業內著名站點案例分析
七、全棧/全端開發
?express/node club + mongodb、thinkjs等框架
?node.js直出
?實時web開發，meteor/express.io
?MEAN(mongodb/express/angular/nodejs)
?http與http2協議、bigpipe、pipeline
?離線緩存，cookie、localstorage、indexdb
?cdn與dns
-
動態域名加速
-
cdn原理與cdn combo
八、研究實驗
?WebAssembly、webTRC、typescript
?Material design規范的前端框架
- 交互動效庫
?AMP-HTML規范
-
使用受限HTML以及緩存技術來提高移動網絡中靜態內容的性能
-
添加自定義的元素代替禁用掉的元素：amp-audio, amp-img、amp-video等
九、數據分析與監控
?badjs數據上報
-
捕獲錯誤兩種方法：onerror、try-catch。抽樣上報，先onerror統計語法錯誤，如果是script error，再使用tryjs。
-
后臺統計方法、不同業務接入體系、抽樣統計
-
onerror:可以捕捉語法錯誤和運行時錯誤；可以拿到出錯的信息，堆棧，出錯文件、行號、列號；當前頁面執行的js腳本出錯都會捕捉到；跨域的資源需要特殊頭部支持。
-
try-catch:無法捕捉語法錯誤，只能捕捉運行時錯誤；可以拿到出錯的信息，堆棧，出錯文件、行號、列號；需要借助工具把function塊以及文件塊加入try,catch，可以在這個階段打入更多的靜態信息。
?點擊熱力圖clickHeat、heatMap
?js加載失敗優化方案
-
失敗重發機制
-
加載源域名服務器文件
-
https反劫持
?百度alog數據上報
十、其它軟技能
?axure 原型圖設計
?xmind腦圖管理
?效率管理
?can i use、github
?知識管理/總結分享
?產品思維與技能
十一、前端技術網站
?技術社區
-
w3c tech、w3c plus、w3 help
-
div.io、nodeParty
-
稀土掘金、前端早讀課
-
alloyteam、html5基地
-
W3 help
?行業會議
-
segmentfault會議
-
深js、杭js
-
GMIC(全球移動互聯網大會)
-
D2、webrebuild
-
infoQ內容、Qcon、velocity
??另外說明下，這里不僅僅是概念的羅列，過去也有些人有類似的總結，但是偏基礎和概念羅列，沒什么深度，這里有較多原理性的概述，博客有對應文章，較新熱門的技術我的博客里也有很多，大家可以結合起來看，目前博客大概寫了50%的總結文章。后面也會根據這個圖去補齊我博客里的知識板塊。
??持續更新中，如果覺得不錯，請點star支持下，甚至在您的團隊里擴散下，謝謝~