三年經驗前端社招—

大家好，我是若川。最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，已經有超50+人提交了筆記，群里已經有超1200人，感興趣的可以點此鏈接掃碼加我微信?ruochuan12

本文經作者@lxcan 授權轉載，未經授權請勿直接轉載。
原文標題：《三年經驗前端社招——慧擇網》
原文鏈接：https://zhuanlan.zhihu.com/p/405690519
文末點擊閱讀原文直達

一面

1、自我介紹

2、以往公司介紹，項目介紹【描述】

3、算法題，有n階樓梯，一次可以走1步或2步，問有多少種走法。比如有3階，可以 111 12 21 總共3種走法【編程】
考點：斐波那契數列解法
分析：
（1）n=0和n=1 的時候，沒有其他選擇，F(0)=0;F(1)=1
（2）n>=2 的時候就變復雜起來，這時候可以操作的步驟也就2種，也就是走1步 (n-1) 與走2步 (n-2)
所以可以得到 F(n) = F(n-1) + F(n-2) ，從當前狀態轉為下一狀態的通用算法即可。
（3）驗證，使用2以上的數字驗證幾次
實現方式：
（1）遞歸
（2）循環迭代
（3）動態規劃（遞歸+緩存）

4、JS數據類型有哪些？它們在內存里面的模型是怎樣的，堆和棧有什么區別？【描述】
原始數據類型，存放在棧內存中
number string boolean null undefined symbol
引用數據類型，存放在堆內存中
object （細分為 object array function）

棧內存

存儲原始數據類型
按值訪問
存儲的值大小固定
由系統自動分配內存空間
空間小，運行效率高
先進后出，后進先出

堆內存

存儲引用數據類型
按引用地址訪問
存儲的值大小不定，可動態調整
由代碼進行指定分配
空間大，運行效率相對較低
無序存儲，可根據引用直接獲取

5、有三套樣式，大中小，怎么實現樣式切換？主題切換怎么做？【描述】【舉例】

之前做過的主題切換思路：
（1）在 static 目錄下新建一個 styles 文件夾，在 styles 下新建一個 theme.css 文件，將需要替換的 CSS 聲明在此文件中
（2）新建 theme-colors.js，用于聲明所有可選的主題，每種顏色都對應一個關鍵詞如 'primaryBtn' 等，方便區分
（3）通過 ajax 獲取 theme.css ，先將顏色值替換為關鍵詞，比如將 '#67c23a' 替換為 'primaryBtn'
（4）把關鍵詞再換回剛剛拿到的最新主題相應的顏色值，并在頁面上添加 style 標簽

6、頁面響應式做過嗎，實現思路？用幾套代碼實現的？【描述】

7、混合式app做過嗎【描述】

8、React做過嗎【描述】

9、最近在學什么技術？【描述】
Vue 3.0
React 基礎用法
下階段學習：
Node.js 全棧開發
泛客戶端開發（uni-app、React Native、Flutter）
計算機基礎、網絡、數據結構、算法

10、往后的職業規劃是怎樣的？【描述】

11、你有什么問題要問我的？【描述】

二面

1、說一下JS原型【描述】
5條原型規則：

所有的引用類型（數組、對象、函數），都具有對象特性，即可自由擴展屬性（除了"null"）以外
所有的引用類型（數組、對象、函數），都有一個__proto__ （隱式原型）屬性，屬性值是一個普通的對象
所有的函數，都有一個 prototype （顯式原型）屬性，屬性值也是一個普通的對象
所有的引用類型（數組、對象、函數），__proto__ 屬性值指向它的構造函數的 prototype 屬性值
當試圖得到一個對象（引用類型）的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的 __proto__（即它的構造函數的 prototype）中尋找

2、instanceof 原理，怎么實現的？【描述】【偽代碼】
instanceof 可以正確的判斷對象的類型，因為內部機制是通過判斷對象的原型鏈中是不是能找到類型的 prototype。

手寫實現instanceof

function?myInstanceof(left,?right)?{var?prototype?=?right.prototype;left?=?left.__proto__;while?(true)?{if?(left?===?null?||?left?===?undefined)?return?false;if?(left?===?prototype)?return?true;left?=?left.__proto__;}
}
console.log(myInstanceof(o1,?M));?//?true
console.log(myInstanceof(o1,?Object));?//?true
console.log(myInstanceof([1,?2],?Array));?//?true
console.log(myInstanceof({?a:?1?},?Array));?//?false

實現分析：

首先獲取右邊參數類型的顯式原型
然后獲得左邊參數對象的隱式原型
然后一直循環判斷對象的隱式原型是否等于類型的顯式原型，直到對象的隱式原型為 null，因為原型鏈最終為 null

3、項目使用的是原生小程序還是 uni-app 小程序【描述】

4、你說做過SEO優化，做了哪些優化？【描述】

5、vue3有哪些新特性，它做了什么優化【描述】
Vue 3.0 性能提升：（1）響應式系統升級

Vue.js 2.x 中響應式系統的核心是 Object.defineProperty
Vue.js 3.0 中使用 Proxy 對象重寫了響應式系統
- 可以監聽動態新增的屬性
- 可以監聽刪除的屬性
- 可以監聽數組的索引和 length 屬性

（2）編譯優化

Vue.js 2.x 中通過標記靜態根節點，優化 diff 過程
Vue.js 3.0 中標記和提升所有的靜態節點，diff 的時候只需要對比動態節點內容
- Fragments 片段，模板中可以直接放文本內容或同級標簽(升級 vetur 插件)
- 靜態節點提升到 render 函數外部，只在初始化時執行一次，再次render無需再次執行
- Patch flag，標記動態節點（記錄節點內容、節點屬性），diff時跳過靜態根節點只需關心動態節點內容
- 緩存事件處理函數，減少了不必要的更新操作

（3）源碼體積的優化