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

前端工程師技能整理

一、框架與組件

bootstrap等UI框架設(shè)計與實現(xiàn)

• [ ] 伸縮布局：grid網(wǎng)格布局

• [ ] 基礎(chǔ)UI樣式：元素reset、按鈕、圖片、菜單、表單

• [ ] 組件UI樣式：按鈕組、字體圖標、下拉菜單、輸入框組、導(dǎ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

• [ ] 模塊引入

• [ ] 模塊定義

• [ ] 模塊標識

• [ ] UMD解決不同規(guī)范兼容性的問題，例如webpack封裝

• [ ] 模塊懶執(zhí)行(CMD)與與預(yù)執(zhí)行(AMD)

loadJs模塊化加載原理與實現(xiàn)

• [ ] 創(chuàng)建script標簽，需要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)形式：新標簽、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遠程調(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，相當于屏幕寬度為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/

• [ ] Ceaser：  http://xuanfengge.com/easeing/ceaser/

• [ ] 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標題

• [ ] 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:可以捕捉語法錯誤和運行時錯誤；可以拿到出錯的信息，堆棧，出錯文件、行號、列號；當前頁面執(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é)語

感謝您的觀看，如有不足之處，歡迎批評指正。

獲取資料

本次給大家推薦一個免費的學(xué)習群，里面概括移動應(yīng)用網(wǎng)站開發(fā)，css，html，webpack，vue node angular以及面試資源等。

對web開發(fā)技術(shù)感興趣的同學(xué)，歡迎加入Q群：731771211，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學(xué)習路線和教程與您免費分享，同時每天更新視頻資料。

最后，祝大家早日學(xué)有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。