作者介紹

子弈^[1]，阿里巴巴專有釘釘前端團(tuán)隊(duì)成員，負(fù)責(zé)專有釘釘 PC 客戶端的工程化、端上應(yīng)用、端上模塊插件化的開發(fā)。

前言

本文主要給大家?guī)斫M內(nèi)一面面試官子弈的面試題，用于給大家進(jìn)行知識(shí)掃盲，希望對正在求職的同學(xué)以及正在準(zhǔn)備秋招的應(yīng)屆生有所幫助。需要注意，本文不會(huì)提供所謂的標(biāo)準(zhǔn)答案，希望大家能夠自行 Google 找到心中想要的答案。

溫馨提示：這里不會(huì)過多講解阿里的校招和社招流程，如果你對校招流程感興趣，可以閱讀專有釘釘校園招聘指南^[2]，如果你對社招流程和數(shù)據(jù)感興趣，可以查看在阿里我是如何當(dāng)面試官的^[3]。

考察內(nèi)容

專有釘釘?shù)囊幻婷嬖囍饕疾煲韵氯齻€(gè)方面的內(nèi)容：

• 基礎(chǔ)知識(shí)：考察面試者是否掌握扎實(shí)的前端基礎(chǔ)知識(shí)體系
• 業(yè)務(wù)思考：考察面試者的業(yè)務(wù)深度
• 筆試實(shí)踐：考察面試者基本知識(shí)的實(shí)踐能力，并考察代碼風(fēng)格和邏輯思維能力

需要注意，如果你覺得某些面試題有些突兀，不要覺得驚訝，這些面試題是在不斷深入溝通的過程中層層遞進(jìn)被帶出來的，其中某些面試題可能相對較偏，純粹是加分項(xiàng)面試題。

基礎(chǔ)知識(shí)

基礎(chǔ)知識(shí)主要包含以下幾個(gè)方面：

• 基礎(chǔ)：計(jì)算機(jī)原理、編譯原理、數(shù)據(jù)結(jié)構(gòu)、算法、設(shè)計(jì)模式、編程范式等基本知識(shí)了解
• 語法：JavaScript、ECMAScript、CSS、TypeScript、HTML、Node.js 等語法的了解和使用
• 框架：React、Vue、Egg、Koa、Express、Webpack 等原理的了解和使用
• 工程：編譯工具、格式工具、Git、NPM、單元測試、Nginx、PM2、CI / CD 了解和使用
• 網(wǎng)絡(luò)：HTTP、TCP、UDP、WebSocket、Cookie、Session、跨域、緩存、協(xié)議的了解
• 性能：編譯性能、監(jiān)控、白屏檢測、SEO、Service Worker 等了解
• 插件：Chrome 、Vue CLI 、Webpack 等插件設(shè)計(jì)思路的理解
• 系統(tǒng)：Mac、Windows、Linux 系統(tǒng)配置的實(shí)踐
• 后端：Redis 緩存、數(shù)據(jù)庫、Graphql、SSR、模板引擎等了解和使用

基礎(chǔ)

• 列舉你所了解的計(jì)算機(jī)存儲(chǔ)設(shè)備類型？
• 一般代碼存儲(chǔ)在計(jì)算機(jī)的哪個(gè)設(shè)備中？代碼在 CPU 中是如何運(yùn)行的？
• 什么是指令和指令集？
• 復(fù)雜指令集和精簡指令集有什么區(qū)別？
• JavaScript 是如何運(yùn)行的？解釋型語言和編譯型語言的差異是什么？
• 簡單描述一下 Babel 的編譯過程？
• JavaScript 中的數(shù)組和函數(shù)在內(nèi)存中是如何存儲(chǔ)的？
• 瀏覽器和 Node.js 中的事件循環(huán)機(jī)制有什么區(qū)別？
• ES6 Modules 相對于 CommonJS 的優(yōu)勢是什么？
• 高級(jí)程序設(shè)計(jì)語言是如何編譯成機(jī)器語言的？
• 編譯器一般由哪幾個(gè)階段組成？數(shù)據(jù)類型檢查一般在什么階段進(jìn)行？
• 編譯過程中虛擬機(jī)的作用是什么？
• 什么是中間代碼（IR），它的作用是什么？
• 什么是交叉編譯？
• 發(fā)布 / 訂閱模式和觀察者模式的區(qū)別是什么？
• 裝飾器模式一般會(huì)在什么場合使用？
• 談?wù)勀銓Υ笮晚?xiàng)目的代碼解耦設(shè)計(jì)理解？什么是 Ioc？一般 DI 采用什么設(shè)計(jì)模式實(shí)現(xiàn)？
• 列舉你所了解的編程范式？
• 什么是面向切面（AOP）的編程？
• 什么是函數(shù)式編程？什么是響應(yīng)式編程？什么是函數(shù)響應(yīng)式編程？
• 響應(yīng)式編程或者函數(shù)響應(yīng)式編程的使用場景有哪些？

語法

• 如何實(shí)現(xiàn)一個(gè)上中下三行布局，頂部和底部最小高度是 100px，中間自適應(yīng)?
• 如何判斷一個(gè)元素 CSS 樣式溢出，從而可以選擇性的加 title 或者 Tooltip?
• 如何讓 CSS 元素左側(cè)自動(dòng)溢出（... 溢出在左側(cè)）？
• 什么是沙箱？瀏覽器的沙箱有什么作用？
• 如何處理瀏覽器中表單項(xiàng)的密碼自動(dòng)填充問題？
• Hash 和 History 路由的區(qū)別和優(yōu)缺點(diǎn)？
• JavaScript 中的 const 數(shù)組可以進(jìn)行 push 操作嗎？為什么？
• JavaScript 中對象的屬性描述符有哪些？分別有什么作用？
• JavaScript 中 console 有哪些 api ?
• 簡單對比一下 Callback、Promise、Generator、Async 幾個(gè)異步 API 的優(yōu)劣？
• Object.defineProperty 有哪幾個(gè)參數(shù)？各自都有什么作用？
• Object.defineProperty 和 ES6 的 Proxy 有什么區(qū)別？
• ES6 中 Symbol、Map、Decorator 的使用場景有哪些？或者你在哪些庫的源碼里見過這些 API 的使用？
• 為什么要使用 TypeScript ? TypeScript 相對于 JavaScript 的優(yōu)勢是什么？
• TypeScript 中 const 和 readonly 的區(qū)別？枚舉和常量枚舉的區(qū)別？接口和類型別名的區(qū)別？
• TypeScript 中 any 類型的作用是什么？
• TypeScript 中 any、never、unknown 和 void 有什么區(qū)別？
• TypeScript 中 interface 可以給 Function / Array / Class（Indexable）做聲明嗎？
• TypeScript 中可以使用 String、Number、Boolean、Symbol、Object 等給類型做聲明嗎？
• TypeScript 中的 this 和 JavaScript 中的 this 有什么差異？
• TypeScript 中使用 Unions 時(shí)有哪些注意事項(xiàng)？
• TypeScript 如何設(shè)計(jì) Class 的聲明？
• TypeScript 中如何聯(lián)合枚舉類型的 Key?
• TypeScript 中 ?.、??、!.、_、** 等符號(hào)的含義？
• TypeScript 中預(yù)定義的有條件類型有哪些？
• 簡單介紹一下 TypeScript 模塊的加載機(jī)制？
• 簡單聊聊你對 TypeScript 類型兼容性的理解？抗變、雙變、協(xié)變和逆變的簡單理解？
• TypeScript 中對象展開會(huì)有什么副作用嗎？
• TypeScript 中 interface、type、enum 聲明有作用域的功能嗎？
• TypeScript 中同名的 interface 或者同名的 interface 和 class 可以合并嗎？
• 如何使 TypeScript 項(xiàng)目引入并識(shí)別編譯為 JavaScript 的 npm 庫包？
• TypeScript 的 tsconfig.json 中有哪些配置項(xiàng)信息？
• TypeScript 中如何設(shè)置模塊導(dǎo)入的路徑別名？

框架

• React Class 組件有哪些周期函數(shù)？分別有什么作用？
• React Class 組件中請求可以在 componentWillMount 中發(fā)起嗎？為什么？
• React Class 組件和 React Hook 的區(qū)別有哪些？
• React 中高階函數(shù)和自定義 Hook 的優(yōu)缺點(diǎn)？
• 簡要說明 React Hook 中 useState 和 useEffect 的運(yùn)行原理？
• React 如何發(fā)現(xiàn)重渲染、什么原因容易造成重渲染、如何避免重渲染？
• React Hook 中 useEffect 有哪些參數(shù)，如何檢測數(shù)組依賴項(xiàng)的變化？
• React 的 useEffect 是如何監(jiān)聽數(shù)組依賴項(xiàng)的變化的？
• React Hook 和閉包有什么關(guān)聯(lián)關(guān)系？
• React 中 useState 是如何做數(shù)據(jù)初始化的？
• 列舉你常用的 React 性能優(yōu)化技巧？
• Vue 2.x 模板中的指令是如何解析實(shí)現(xiàn)的？
• 簡要說明 Vue 2.x 的全鏈路運(yùn)作機(jī)制？
• 簡單介紹一下 Element UI 的框架設(shè)計(jì)？
• 如何理解 Vue 是一個(gè)漸進(jìn)式框架？
• Vue 里實(shí)現(xiàn)跨組件通信的方式有哪些？
• Vue 中響應(yīng)式數(shù)據(jù)是如何做到對某個(gè)對象的深層次屬性的監(jiān)聽的？
• MVVM、MVC 和 MVP 的區(qū)別是什么？各自有什么應(yīng)用場景？、
• 什么是 MVVM 框架？

工程

• Vue CLI 3.x 有哪些功能？Vue CLI 3.x 的插件系統(tǒng)了解？
• Vue CLI 3.x 中的 Webpack 是如何組裝處理的？
• Vue 2.x 如何支持 TypeScript 語法？
• 如何配置環(huán)境使得 JavaScript 項(xiàng)目可以支持 TypeScript 語法？
• 如何對 TypeScript 進(jìn)行 Lint 校驗(yàn)？ESLint 和 TSLint 有什么區(qū)別？
• Node.js 如何支持 TypeScript 語法？
• TypeScript 如何自動(dòng)生成庫包的聲明文件？
• Babel 對于 TypeScript 的支持有哪些限制？
• Webpack 中 Loader 和 Plugin 的區(qū)別是什么？
• 在 Webpack 中是如何做到支持類似于 JSX 語法的 Sourcemap 定位？
• 發(fā)布 Npm 包如何指定引入地址？
• 如何發(fā)布開發(fā)項(xiàng)目的特定文件夾為 Npm 包的根目錄？
• 如何發(fā)布一個(gè)支持 Tree Shaking 機(jī)制的 Npm 包？
• Npm 包中 peerDependencies 的作用是什么？
• 如何優(yōu)雅的調(diào)試需要發(fā)布的 Npm 包？
• 在設(shè)計(jì)一些庫包時(shí)如何生成版本日志？
• 了解 Git （Submodule）子模塊嗎？簡單介紹一下 Git 子模塊的作用？
• Git 如何修改已經(jīng)提交的 Commit 信息？
• Git 如何撤銷 Commit 并保存之前的修改？
• Git 如何 ignore 被 commit 過的文件？
• 在使用 Git 的時(shí)候如何規(guī)范 Git 的提交說明（Commit 信息）？
• 簡述符合 Angular 規(guī)范的提交說明的結(jié)構(gòu)組成？
• Commit 信息如何和 Github Issues 關(guān)聯(lián)？
• Git Hook 在項(xiàng)目中哪些作用？
• Git Hook 中客戶端和服務(wù)端鉤子各自用于什么作用？
• Git Hook 中常用的鉤子有哪些？
• pre-commit 和 commit-msg 鉤子的區(qū)別是什么？各自可用于做什么？
• husky 以及 ghook 等工具制作 Git Hook 的原理是什么？
• 如何設(shè)計(jì)一個(gè)通用的 Git Hook ？
• Git Hook 可以采用 Node 腳本進(jìn)行設(shè)計(jì)嗎？如何做到？
• 如何確保別人上傳的代碼沒有 Lint 錯(cuò)誤？如何確保代碼構(gòu)建沒有 Lint 錯(cuò)誤？
• 如何在 Vs Code 中進(jìn)行 Lint 校驗(yàn)提示？如何在 Vs Code 中進(jìn)行 Lint 保存格式化？
• ESLint 和 Prettier 的區(qū)別是什么？兩者在一起工作時(shí)會(huì)產(chǎn)生問題嗎？
• 如何有效的識(shí)別 ESLint 和 Prettier 可能產(chǎn)生沖突的格式規(guī)則？如何解決此類規(guī)則沖突問題？
• 在通常的腳手架項(xiàng)目中進(jìn)行熱更新（hot module replacement）時(shí)如何做到 ESLint 實(shí)時(shí)打印校驗(yàn)錯(cuò)誤信息？
• 談?wù)勀銓?SourceMap 的了解？
• 如何調(diào)試 Node.js 代碼？如何調(diào)試 Node.js TypeScript 代碼？在瀏覽器中如何調(diào)試 Node.js 代碼？
• 列舉你知道的所有構(gòu)建工具并說說這些工具的優(yōu)缺點(diǎn)？這些構(gòu)建工具在不同的場景下應(yīng)該如何選型？
• VS Code 配置中的用戶和工作區(qū)有什么區(qū)別？
• VS Code 的插件可以只對當(dāng)前項(xiàng)目生效嗎？
• 你所知道的測試有哪些測試類型？
• 你所知道的測試框架有哪些？
• 什么是 e2e 測試？有哪些 e2e 的測試框架？
• 假設(shè)現(xiàn)在有一個(gè)插入排序算法，如何對該算法進(jìn)行單元測試？

網(wǎng)絡(luò)

• CDN 服務(wù)如何實(shí)現(xiàn)網(wǎng)絡(luò)加速？
• WebSocket 使用的是 TCP 還是 UDP 協(xié)議？
• 什么是單工、半雙工和全雙工通信？
• 簡單描述 HTTP 協(xié)議發(fā)送一個(gè)帶域名的 URL 請求的協(xié)議傳輸過程？（DNS、TCP、IP、鏈路）
• 什么是正向代理？什么是反向代理？
• Cookie 可以在服務(wù)端生成嗎？Cookie 在服務(wù)端生成后的工作流程是什么樣的？
• Session、Cookie 的區(qū)別和關(guān)聯(lián)？如何進(jìn)行臨時(shí)性和永久性的 Session 存儲(chǔ)？
• 設(shè)置 Cookie 時(shí)候如何防止 XSS 攻擊？
• 簡單描述一下用戶免登陸的實(shí)現(xiàn)過程？可能會(huì)出現(xiàn)哪些安全性問題？一般如何對用戶登錄的密碼進(jìn)行加密？
• HTTP 中提升傳輸速率的方式有哪些？常用的內(nèi)容編碼方式有哪些？
• 傳輸圖片的過程中如果突然中斷，如何在恢復(fù)后從之前的中斷中恢復(fù)傳輸？
• 什么是代理？什么是網(wǎng)關(guān)？代理和網(wǎng)關(guān)的作用是什么？
• HTTPS 相比 HTTP 為什么更加安全可靠？
• 什么是對稱密鑰（共享密鑰）加密？什么是非對稱密鑰（公開密鑰）加密？哪個(gè)更加安全？
• 你覺得 HTTP 協(xié)議目前存在哪些缺點(diǎn)？

性能

• 在 React 中如何識(shí)別一個(gè)表單項(xiàng)里的表單做到了最小粒度 / 代價(jià)的渲染？
• 在 React 的開發(fā)的過程中你能想到哪些控制渲染成本的方法？

插件

• Vue CLI 3.x 的插件系統(tǒng)是如何設(shè)計(jì)的？
• Webpack 中的插件機(jī)制是如何設(shè)計(jì)的？

系統(tǒng)

• \r\n（CRLF） 和 \n （LF）的區(qū)別是什么？(Vs Code 的右下角可以切換)
• /dev/null 的作用是啥？
• 如何在 Mac 的終端中設(shè)置一個(gè)命令的別名？
• 如何在 Windows 中設(shè)置環(huán)境變量？
• Mac 的文件操作系統(tǒng)默認(rèn)區(qū)分文件路徑的大小寫嗎？
• 編寫 Shell 腳本時(shí)如何設(shè)置文件的絕對路徑？

后端

• Session、Cookie 的區(qū)別和關(guān)聯(lián)？如何進(jìn)行臨時(shí)性和永久性的 Session 存儲(chǔ)？
• 如何部署 Node.js 應(yīng)用？如何處理負(fù)載均衡中 Session 的一致性問題？
• 如何提升 Node.js 代碼的運(yùn)行穩(wěn)定性？
• GraphQL 與 Restful 的區(qū)別，它有什么優(yōu)點(diǎn)？
• Vue SSR 的工作原理？Vuex 的數(shù)據(jù)如何同構(gòu)渲染？
• SSR 技術(shù)和 SPA 技術(shù)的各自的優(yōu)缺點(diǎn)是什么？
• 如何處理 Node.js 渲染 HTML 壓力過大問題？

業(yè)務(wù)思考

業(yè)務(wù)思考更多的是結(jié)合基礎(chǔ)知識(shí)的廣度和深度進(jìn)行的具體業(yè)務(wù)實(shí)踐，主要包含以下幾個(gè)方面：

• 工程化：代碼部署、CI / CD 流程設(shè)計(jì)、Jenkins、Gitlab、Docker 等
• 通用性：腳手架、SDK、組件庫等框架設(shè)計(jì)
• 應(yīng)用框架：Hybrid 混合、微前端、BFF、Monorepo
• 可視化：
• 低代碼：通用表單設(shè)計(jì)、通用布局設(shè)計(jì)、通用頁面設(shè)計(jì)、JSON Schema 協(xié)議設(shè)計(jì)等
• 測試：E2E 測試、單元測試、測試覆蓋率、測試報(bào)告等
• 業(yè)務(wù)：數(shù)據(jù)、體驗(yàn)、復(fù)雜度、監(jiān)控

工程化

• 你所知道的 CI / CD 工具有哪些？在項(xiàng)目中有接觸過類似的流程嗎？
• 如果讓你實(shí)現(xiàn)一個(gè) Web 前端的 CI / CD 工程研發(fā)平臺(tái)，你會(huì)如何設(shè)計(jì)？
• 如果我們需要將已有項(xiàng)目中的線上產(chǎn)物資源（例如圖片）轉(zhuǎn)換成本地私有化資源，你有什么解決方案？
• 如何使用 Vue CLI 3.x 定制一個(gè)腳手架？比如內(nèi)部自動(dòng)集成了 i18n、 axios、Element UI、路由守衛(wèi)等？
• Jenkins 如何配合 Node.js 腳本進(jìn)行 CI / CD 設(shè)計(jì)？

通用性

• 如果讓你設(shè)計(jì)一個(gè)通用的項(xiàng)目腳手架，你會(huì)如何設(shè)計(jì)？一個(gè)通用的腳手架一般需要具備哪些能力？
• 如果讓你設(shè)計(jì)一個(gè)通用的工具庫，你會(huì)如何設(shè)計(jì)？一個(gè)通用的工具庫一般需要具備哪些能力？
• 假設(shè)你自己實(shí)現(xiàn)的 React 或 Vue 的組件庫要設(shè)計(jì)演示文檔，你會(huì)如何設(shè)計(jì)？設(shè)計(jì)的文檔需要實(shí)現(xiàn)哪些功能？
• 在設(shè)計(jì)工具庫包的時(shí)候你是如何設(shè)計(jì) API 文檔的？

應(yīng)用框架

• 談?wù)?Electron、Nw.js、CEF、Flutter 和原生開發(fā)的理解？
• 談?wù)勛烂娑藨?yīng)用中 HotFix 的理解？
• 你覺得什么樣的場景需要使用微前端框架？

業(yè)務(wù)

• 什么是單點(diǎn)登錄？如何做單點(diǎn)登錄？
• 如何做一個(gè)項(xiàng)目的國際化方案？
• 如何做一個(gè)項(xiàng)目的監(jiān)控和埋點(diǎn)方案？
• 如何建設(shè)項(xiàng)目的穩(wěn)定性（監(jiān)控、灰度、錯(cuò)誤降級(jí)、回滾...）？
• 一般管理后臺(tái)型的應(yīng)用需要考慮哪些性能方面的優(yōu)化？
• 簡述一些提升項(xiàng)目體驗(yàn)的案例和技術(shù)方案（骨架屏、Loading 處理、緩存、錯(cuò)誤降級(jí)、請求重試...）？
• 假設(shè)需要對頁面設(shè)計(jì)一個(gè)水印方案，你會(huì)如何設(shè)計(jì)？

低代碼

• 如何設(shè)計(jì)一個(gè)通用的 JSON Schema 協(xié)議使其可以動(dòng)態(tài)渲染一個(gè)通用的聯(lián)動(dòng)表單？
• 一般的低代碼平臺(tái)需要具備哪些能力？

筆試實(shí)踐

筆試更多的是考驗(yàn)應(yīng)聘者的邏輯思維能力和代碼書寫風(fēng)格，主要包含以下幾個(gè)方面：

• 正則表達(dá)式
• 算法
• 數(shù)據(jù)結(jié)構(gòu)
• 設(shè)計(jì)模式
• 框架的部分原理實(shí)現(xiàn)
• TypeScript 語法
• 模板解析

數(shù)據(jù)結(jié)構(gòu)

• 使用 TypeScript 語法將沒有層級(jí)的扁平數(shù)據(jù)轉(zhuǎn)換成樹形結(jié)構(gòu)的數(shù)據(jù)

// 扁平數(shù)據(jù)
[{
  name: '文本1',
  parent: null,
  id: 1,
}, {
  name: '文本2',
  id: 2,
  parent: 1
}, {
  name: '文本3',
  parent: 2,
  id: 3,
}]

// 樹狀數(shù)據(jù)
[{
  name: '文本1',
  id: 1,
  children: [{
    name: '文本2',
    id: 2,
    children: [{
      name: '文本3',
      id: 3
    }]
  }]
}]

模板解析

• 實(shí)現(xiàn)一個(gè)簡易的模板引擎

const template = '嗨，{{ info.name.value }}您好，今天是星期 {{ day.value }}';

const data = {
  info: {
    name: {
      value: '張三'
    }
  },
  day: {
    value: '三'
  }
};

render(template, data); // 嗨，張三您好，今天是星期三

設(shè)計(jì)模式

• 簡單實(shí)現(xiàn)一個(gè)發(fā)布 / 訂閱模式

正則表達(dá)式

• 匹配出字符串中 const a = require('xxx') 中的 xxx

參考資料