1. 掌握?qǐng)D形學(xué), webgl或熟練使tree.js框架, 熟練canvas相關(guān)的渲染及動(dòng)畫操作的優(yōu)先.
? ? 初級(jí):
? ? ? ? 1. 學(xué)習(xí)過圖形學(xué)相關(guān)知識(shí), 知道矩陣等數(shù)學(xué)原理在動(dòng)畫中的作用, 知道三維場景需要的最基礎(chǔ)的構(gòu)成, 能用threejs搭建3d場景, 知道webgl和threejs的關(guān)系.
? ? ? ? 2. 知道canvas是干嘛的, 聊到旋轉(zhuǎn)能說出canvas的api.
? ? ? ? 3. 知道css動(dòng)畫, css動(dòng)畫屬性知道關(guān)鍵字和用法.
? ? ? ? 4. 知道js動(dòng)畫, 能說出1~2社區(qū)動(dòng)畫庫, 知道js動(dòng)畫和css動(dòng)畫優(yōu)缺點(diǎn)以及運(yùn)用場景.
? ? ? ? 5. 知道raf和其他能達(dá)到60fps的方法
2. 熟練掌握J(rèn)avaScript[javascript語言精粹]
? ? 知道class繼承和組合寄生繼承的差別, 舉例說明
? ? 知道eventloop原理, 知道宏微任務(wù), 并且能從個(gè)人理解從面說出為什么要區(qū)別.
? ? 能將繼承, 作用域, 閉包, 模塊這些概念融會(huì)貫通, 并且結(jié)合實(shí)際例子
? ? 能脫口說出兩種以上設(shè)計(jì)模式的核心思想
? ? 掌握一些基礎(chǔ)的算法核心思想
3.熟練掌握工程化工具, 掌握模塊化思想和技術(shù)實(shí)現(xiàn)方案
? ? 初級(jí):
? ? ? ? 知道webpack, rollup以及他們的使用場景, webpack v4和v3的區(qū)別, webpackde基本配置
? ? ? ? 知道webpack打包結(jié)果的代碼結(jié)構(gòu)和執(zhí)行流程
? ? ? ? 知道amd commonjs, es module, cmd
? ? 中級(jí):
? ? ? ? 知道webpack打包鏈路, 知道plugin生命周期, 知道怎么寫一個(gè)plugin和loader
? ? ? ? 知道loader做了什么, 能幾句話說明, 比如babel-loader, vue-loader
? ? ? ? 能結(jié)合性能優(yōu)化聊webpack配置怎么做, 能清楚說明核心要點(diǎn)有哪些, 并說明解決說明問題, 需要哪些依賴, 比如cdn, 接入層等
? ? ? ? 了解異步模塊加載的實(shí)現(xiàn)原理, 能口噴代碼實(shí)現(xiàn)核心邏輯
? ? 高級(jí)[能設(shè)計(jì)出或具體說明團(tuán)隊(duì)的研發(fā)基礎(chǔ)設(shè)施]:
? ? ? ? 項(xiàng)目腳手架搭建及如何以工具形態(tài)共享
? ? ? ? 團(tuán)隊(duì)eslint規(guī)范如何設(shè)計(jì)， 及如何統(tǒng)一更新
? ? ? ? 工具化打包發(fā)布流程, 包括本地調(diào)試, 云構(gòu)建, 線上發(fā)布系統(tǒng), 一鍵部署能力.
4. 熟練掌握React前端框架, 了解技術(shù)底層. 同時(shí)了解vue等其他框架.
? ? 初級(jí):
? ? ? ? 知道React常見優(yōu)化方案, 脫口而出常用生命周期
? ? ? ? 知道React大致實(shí)現(xiàn)思路, 對(duì)比react和js控制原生DOM的差異, 實(shí)現(xiàn)一個(gè)建議react
? ? ? ? 對(duì)state和props有自己的心得, 結(jié)合受控組件, hoc等特性描述, 需要說明方案的使用場景
? ? 中級(jí):
? ? ? ? 說明fiber以及可能帶來的坑
? ? ? ? 說明hook
? ? ? ? 說明immutable
? ? ? ? 知道react不常用的特性, 比如context, protal
5. 熟練掌握react生態(tài)常用工具, redux/react-router等
? ? 知道核心實(shí)現(xiàn)原理和底層依賴
? ? 能從數(shù)據(jù)驅(qū)動(dòng)角度痛徹的說明redux, 能夠口噴原生js和redux結(jié)合怎么做
? ? 能結(jié)合redux, vuex, mobx等數(shù)據(jù)流談?wù)勛约簩?duì)vue和react的異同
? ? 基于全家桶構(gòu)建的復(fù)雜應(yīng)用
6. 熟練各種web前端技術(shù), 包括HTML/XML/CSS等, 有基于Ajax的前端應(yīng)用開發(fā)經(jīng)驗(yàn)
? ? 初級(jí):
? ? ? ? HTML方面包括但不限于: 語義化標(biāo)簽, history api, storage, ajax2.0等
? ? ? ? css方面包括但不限于: 文檔流, 重繪重排, flex, BFC, IFC, before/after, 動(dòng)畫, keyframe, 畫三角, 優(yōu)先級(jí)矩陣.
? ? ? ? 能口噴xhr的用法, 知道網(wǎng)絡(luò)請(qǐng)求的相關(guān)技術(shù)和技術(shù)底層
? ? ? ? 知道如何完成登陸模塊, 包括但不限于: 登錄表單如何實(shí)現(xiàn); cookie登錄態(tài)維護(hù)方案;token base登錄態(tài)方案;session概念;
? ? 中級(jí):
? ? ? ? HTML方面能夠結(jié)合各個(gè)瀏覽器api描述常用類庫的實(shí)現(xiàn)
? ? ? ? css方面能夠結(jié)合各個(gè)概念, 說明網(wǎng)上那些hack方案或優(yōu)化方案的底層
? ? ? ? 能說明接口請(qǐng)求的前后端整體架構(gòu)流程, 包括: 業(yè)務(wù)代碼, 瀏覽器原理, http協(xié)議, 服務(wù)端,接入層, rpc服務(wù)調(diào)用, 負(fù)載均衡
? ? ? ? 知道websocket
? ? ? ? 知道pc端與移動(dòng)端登錄態(tài)維護(hù)方案, 知道token base登錄態(tài)實(shí)現(xiàn)細(xì)節(jié)
? ? ? ? 知道oauth2.0 輕量與整體實(shí)現(xiàn)方案
? ? 高級(jí):
? ? ? ? 考慮mock方案的通用性, 場景覆蓋度, 以及代碼或工程侵入程度
? ? ? ? 埋點(diǎn)方案
7. 良好的編碼習(xí)慣, 對(duì)前端技術(shù)有持續(xù)的熱情
? ? 知道eslint, 以及如何與工程配合使用
? ? 遇到不會(huì)的題目, 可以從邏輯分析上給出大致的思考路徑
? ? 面試官給出關(guān)鍵詞可以快速反應(yīng)出相關(guān)的技術(shù)要點(diǎn)
? ? 知道TS是什么, 為什么使用TS, 有TS工程化實(shí)踐經(jīng)驗(yàn)
? ? 知道移動(dòng)端常見問題, 包括但不限于: rem+1px方案, 預(yù)加載, jsbridge原理等.
