阿里專有釘釘前端面試指南

大家好，我是若川。今天推薦這篇掘金高贊文章，歡迎留言交流。

經作者子奕大佬授權轉載，原文鏈接：https://juejin.cn/post/6986436944913924103

作者介紹

子弈^[1]，專有釘釘前端團隊成員，負責專有釘釘 PC 客戶端的工程化、端上應用、端上模塊插件化的開發。

前言

本文主要給大家帶來組內一面面試官子弈的面試題，用于給大家進行知識掃盲，希望對正在求職的同學以及正在準備秋招的應屆生有所幫助。需要注意，本文不會提供所謂的標準答案，希望大家能夠自行 Google 找到心中想要的答案。

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

考察內容

專有釘釘的一面面試主要考察以下三個方面的內容：

基礎知識：考察面試者是否掌握扎實的前端基礎知識體系
業務思考：考察面試者的業務深度
筆試實踐：考察面試者基本知識的實踐能力，并考察代碼風格和邏輯思維能力

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

基礎知識

基礎知識主要包含以下幾個方面：

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

基礎

列舉你所了解的計算機存儲設備類型？
一般代碼存儲在計算機的哪個設備中？代碼在 CPU 中是如何運行的？
什么是指令和指令集？
復雜指令集和精簡指令集有什么區別？
JavaScript 是如何運行的？解釋型語言和編譯型語言的差異是什么？
簡單描述一下 Babel 的編譯過程？
JavaScript 中的數組和函數在內存中是如何存儲的？
瀏覽器和 Node.js 中的事件循環機制有什么區別？
ES6 Modules 相對于 CommonJS 的優勢是什么？
高級程序設計語言是如何編譯成機器語言的？
編譯器一般由哪幾個階段組成？數據類型檢查一般在什么階段進行？
編譯過程中虛擬機的作用是什么？
什么是中間代碼（IR），它的作用是什么？
什么是交叉編譯？
發布 / 訂閱模式和觀察者模式的區別是什么？
裝飾器模式一般會在什么場合使用？
談談你對大型項目的代碼解耦設計理解？什么是 Ioc？一般 DI 采用什么設計模式實現？
列舉你所了解的編程范式？
什么是面向切面（AOP）的編程？
什么是函數式編程？什么是響應式編程？什么是函數響應式編程？
響應式編程或者函數響應式編程的使用場景有哪些？

語法

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

框架

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

工程

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

網絡

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

性能

在 React 中如何識別一個表單項里的表單做到了最小粒度 / 代價的渲染？
在 React 的開發的過程中你能想到哪些控制渲染成本的方法？

插件

Vue CLI 3.x 的插件系統是如何設計的？
Webpack 中的插件機制是如何設計的？

系統

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

后端

Session、Cookie 的區別和關聯？如何進行臨時性和永久性的 Session 存儲？
如何部署 Node.js 應用？如何處理負載均衡中 Session 的一致性問題？
如何提升 Node.js 代碼的運行穩定性？
GraphQL 與 Restful 的區別，它有什么優點？
Vue SSR 的工作原理？Vuex 的數據如何同構渲染？
SSR 技術和 SPA 技術的各自的優缺點是什么？
如何處理 Node.js 渲染 HTML 壓力過大問題？

業務思考

業務思考更多的是結合基礎知識的廣度和深度進行的具體業務實踐，主要包含以下幾個方面：

工程化：代碼部署、CI / CD 流程設計、Jenkins、Gitlab、Docker 等
通用性：腳手架、SDK、組件庫等框架設計
應用框架：Hybrid 混合、微前端、BFF、Monorepo
可視化：
低代碼：通用表單設計、通用布局設計、通用頁面設計、JSON Schema 協議設計等
測試：E2E 測試、單元測試、測試覆蓋率、測試報告等
業務：數據、體驗、復雜度、監控

工程化

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

通用性

如果讓你設計一個通用的項目腳手架，你會如何設計？一個通用的腳手架一般需要具備哪些能力？
如果讓你設計一個通用的工具庫，你會如何設計？一個通用的工具庫一般需要具備哪些能力？
假設你自己實現的 React 或 Vue 的組件庫要設計演示文檔，你會如何設計？設計的文檔需要實現哪些功能？
在設計工具庫包的時候你是如何設計 API 文檔的？

應用框架

談談 Electron、Nw.js、CEF、Flutter 和原生開發的理解？
談談桌面端應用中 HotFix 的理解？
你覺得什么樣的場景需要使用微前端框架？

業務

什么是單點登錄？如何做單點登錄？
如何做一個項目的國際化方案？
如何做一個項目的監控和埋點方案？
如何建設項目的穩定性（監控、灰度、錯誤降級、回滾...）？
一般管理后臺型的應用需要考慮哪些性能方面的優化？
簡述一些提升項目體驗的案例和技術方案（骨架屏、Loading 處理、緩存、錯誤降級、請求重試...）？
假設需要對頁面設計一個水印方案，你會如何設計？

低代碼

如何設計一個通用的 JSON Schema 協議使其可以動態渲染一個通用的聯動表單？
一般的低代碼平臺需要具備哪些能力？

筆試實踐

筆試更多的是考驗應聘者的邏輯思維能力和代碼書寫風格，主要包含以下幾個方面：

正則表達式
算法
數據結構
設計模式
框架的部分原理實現
TypeScript 語法
模板解析

數據結構

使用 TypeScript 語法將沒有層級的扁平數據轉換成樹形結構的數據

//?扁平數據
[{name:?'文本1',parent:?null,id:?1,
},?{name:?'文本2',id:?2,parent:?1
},?{name:?'文本3',parent:?2,id:?3,
}]//?樹狀數據
[{name:?'文本1',id:?1,children:?[{name:?'文本2',id:?2,children:?[{name:?'文本3',id:?3}]}]
}]

模板解析

實現一個簡易的模板引擎

const?template?=?'嗨，{{?info.name.value?}}您好，今天是星期?{{?day.value?}}';const?data?=?{info:?{name:?{value:?'張三'}},day:?{value:?'三'}
};render(template,?data);?//?嗨，張三您好，今天是星期三