專有釘釘前端面試指南

做者介紹

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

前言

本文主要給你們帶來組內一面面試官子弈的面試題，用於給你們進行前端知識掃盲，但願對正在求職的同窗以及正在準備秋招的應屆生有所幫助。若是你真的想要了解更多的詳細信息，能夠詢問子弈。前端

舒適提示：這裏不會過多講解阿里的校招和社招流程，若是你對校招流程感興趣，能夠閱讀專有釘釘校園招聘指南，若是你對社招流程和數據感興趣，能夠查看在阿里我是如何當面試官的。java

考察內容

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

基礎知識：考察面試者是否掌握紮實的前端基礎知識體系面試
業務思考：考察面試者的業務深度正則表達式
筆試實踐：考察面試者基本知識的實踐能力，並考察代碼風格和邏輯思惟能力算法

須要注意，若是你以爲某些面試題有些突兀，不要以爲驚訝，這些面試題是在不斷深刻溝通的過程當中層層遞進被帶出來的，其中某些面試題可能相對較偏，純粹是加分項面試題。數據庫

基礎知識

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

基礎：計算機原理、編譯原理、數據結構、算法、設計模式、編程範式等基本知識瞭解編程
語法：JavaScript、ECMAScript、CSS、TypeScript、HTML、Node.js 等語法的瞭解和使用
框架：React、Vue、Egg、Koa、Express、Webpack 等原理的瞭解和使用
工程：編譯工具、格式工具、Git、NPM、單元測試、Nginx、PM二、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); // 嗨，張三您好，今天是星期三
複製代碼

設計模式

簡單實現一個發佈 / 訂閱模式

正則表達式

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

招聘

嗨，專有釘釘前端團隊目前組內正在招聘優秀的前端開發工程師，若是你對咱們的職位感興趣，則能夠聯繫咱們內推簡歷。