阿里前端大牛分享的技能整理，你不看看嗎？

前端工程師技能整理 1、框架與組件 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轉ES五、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原理與使用 2、構建生態 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構建工具 3、開發技巧與調試 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 4、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加速與動畫加速 動畫庫 緩動函數速查表： http://www.xuanfengge.com/easeing/easeing/ Ceaser： http://xuanfengge.com/easeing/ceaser/ 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 5、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 6、前端/H5優化(另外一個圖已給出) yslow、pagespeed 移動web性能優化 手機瀏覽器"省流量"原理 增量更新原理及注意事項 本地存儲的應用 加載優化 圖片優化 單頁面及路由實現 業內著名站點案例分析 7、全棧/全端開發 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 8、研究實驗 WebAssembly、webTRC、typescript Material design規範的前端框架 交互動效庫 AMP-HTML規範 使用受限HTML以及緩存技術來提升移動網絡中靜態內容的性能 添加自定義的元素代替禁用掉的元素：amp-audio, amp-img、amp-video等 9、數據分析與監控 badjs數據上報 捕獲錯誤兩種方法：onerror、try-catch。抽樣上報，先onerror統計語法錯誤，若是是script error，再使用tryjs。 後臺統計方法、不一樣業務接入體系、抽樣統計 onerror:能夠捕捉語法錯誤和運行時錯誤；能夠拿到出錯的信息，堆棧，出錯文件、行號、列號；當前頁面執行的js腳本出錯都會捕捉到；跨域的資源須要特殊頭部支持。 try-catch:沒法捕捉語法錯誤，只能捕捉運行時錯誤；能夠拿到出錯的信息，堆棧，出錯文件、行號、列號；須要藉助工具把function塊以及文件塊加入try,catch，能夠在這個階段打入更多的靜態信息。 點擊熱力圖clickHeat、heatMap js加載失敗優化方案 失敗重發機制 加載源域名服務器文件 https反劫持 百度alog數據上報 10、其它軟技能 axure 原型圖設計 xmind腦圖管理 效率管理 can i use、github 知識管理/總結分享 產品思惟與技能 11、前端技術網站 技術社區 w3c tech、w3c plus、w3 help div.io、nodeParty 稀土掘金、前端早讀課 alloyteam、html5基地 W3 help 行業會議 segmentfault會議 深js、杭js GMIC(全球移動互聯網大會) D二、webrebuild infoQ內容、Qcon、velocity

「我本身是一名從事了5年前端的老程序員，辭職目前在作講師，今年年初我花了一個月整理了一份最適合2019年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各類框架都有整理，送給每一位前端小夥伴，這裏是小白彙集地，歡迎初學和進階中的小夥伴。"

加QQ羣：645199623（招募中）