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

智雲程式設計發表於2019-01-27

前端工程師技能整理

image

一、框架與元件

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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章