阿里前端大牛分享的技能整理,你不看看嗎?
前端工程師技能整理
一、框架與元件
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加速與動畫加速
-
[ ] 動畫庫
-
[ ] 緩動函式速查表:
-
[ ] 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
五、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
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:731771211,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新影片資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2564964/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 想成為一個高效的Web開發者嗎?來看看大牛分享的經驗吧~Web
- 通宵整理的前端開發技能樹前端
- 花費 3 天時間整理的程式碼規範示例程式碼,你確定不進來看看嗎?
- 「整理」前端微知識庫 —— 基礎技能前端
- 大牛手把手教你做日曆(建議你看看,你會有收穫的)
- 你還不瞭解SpringSecurity嗎?快來看看SpringSecurity實戰總結~SpringGse
- 你要看看這些有趣的函式方法嗎?函式
- UI設計師必備技能,看看你都學會了嗎UI
- 蘋果mac隱藏的神技能,你都知道嗎蘋果Mac
- 來看看阿里架構師Java 程式碼打日誌姿勢!你也是這樣寫的嗎阿里架構Java
- 這裡有超過20家的前端面試題,你確定不點進來看看?前端面試題
- -這裡有超過20家的前端面試題,你確定不點進來看看?前端面試題
- MySQL的修仙者之旅,不來看看你的修為如何嗎?MySql
- 不當IT民工 讓你拿高薪的10個技能高薪
- 看看國外的 JS 題,你能全部做對嗎?JS
- Google大牛分享的面試祕籍Go面試
- [碼]國外大牛整理的Java資源 !Java
- [碼]國外大牛整理的Java資源!Java
- 你真的認為Google翻譯不影響"前端"頁面功能嗎?Go前端
- 前端教程分享:HTTP請求Content-Type你知道是做什麼的嗎?前端HTTP
- “空置床位”你願意分享嗎?
- MacOS系統無法連線5g wifi的解決辦法,你確定不來看看嗎?MacWiFi
- 初學Web前端開發,你需要掌握的11項技能Web前端
- 你知道入坑Linux需掌握哪些技能嗎?Linux
- 這些必備Java技能,你都會了嗎Java
- 你真的瞭解前端路由嗎?前端路由
- 細數國內外的前端大牛前端
- 為什麼新浪、騰訊、阿里巴巴如此重視web前端?你知道嗎?阿里Web前端
- mongodb想速成嗎,這個系列教程你可以看看(1)MongoDB
- mongodb想速成嗎,這個系列教程你可以看看(2)MongoDB
- springBean整理(一),不為別的,只為面試嗎SpringBean面試
- 前端核心技能前端
- 阿里 迅雷 一些朋友原創的前端 PHP技術視訊免費分享 非常不錯!阿里前端PHP
- 阿里 迅雷 一些朋友原創的前端 PHP 技術視訊免費分享 非常不錯!阿里前端PHP
- [譯] 如何成為前端大牛前端
- 你知道前端是如何實現水印的嗎前端
- web前端初學技能——5大web前端核心技能Web前端
- 技術大牛面試阿里程式設計師掛在第四輪,看看他怎麼總結面試阿里程式設計師