背景
由於個人原因，要離開當前待了三年的公司，也是對自己的未來負責，不得不按照自己的規劃在這個時候做取捨。我出自西北農村家庭自己貸款+勤工儉學打工上學，在北京10年，我很感謝自己。雖然說互聯網薪資不低，但是靠我自己一個人，想在北京紮根，我退了。退到某二線城市W，同行業，說實話看可能工作壓力和北京相當，薪資也低了，但是至少看起來，未來離我會近一點兒。這次跳槽是逐步在市場上試探的過程，所以做個總結，留給以後的自己看。
感想這是我第一次參加社招，基於個人覺得應該多磨鍊多嘗試的習慣😂我就各行各業都嘗試了一下下，也有讓自己比較滿意的結果。不過剛開始不瞭解W市的薪資待遇，人家問期望薪資的時候，我多少都有些不知天高地厚，導致有幾個心儀的公司直接就沒聯繫我了😂還有就是一開始自信滿滿的還去裸面，現在想想真的醉了，腦子瓦塔了去裸面，很多基礎概念不記得了，面的很尷尬。所以後面花了半個月時間背八股文背算法，雖然排斥但是很有用（一個月之後又記不大清了）。概念性的題目，自己的語言組織能力如果不強，就直接去背mdn，再補充一點自己的實際經驗，千萬不要靠着自己經驗亂七八糟的說，面試官不聽的😂再就是年齡和婚育狀況很重要，這個我接下來會根據不同行業來詳細說，這是現實，大齡未婚未育，即使簡歷過關，一些大企業也不一定會給面試機會，招聘者親口跟我說的，“年紀有點大，還沒結婚，hr那邊可能不同意”。我不是引戰，但我的的確確遇到了，還不止一次，招聘者主動要了我簡歷，問完年齡婚育，就沒了。切忌胡亂要價、切忌裸面、正視自己的年齡和婚育。
應聘記錄
高校老師/實驗員/輔導員
應聘消息來源：W市的相關微信小程序（公務員考試網、人事考試資訊網、本地寶）、一些高校的官網、省人力資源和社會保障廳官網--省直事業單位公開招聘公告欄
是否有編制：官方招聘公告裏面明確寫的編制就是有編制，不然都是合同制，
年齡限制：主要針對本科院校，除去老師外，其他崗位大多數都是要求30週歲以內，也就是1992.1.1以後，少數高校輔導員崗位要求1993 / 1994以後
薪資待遇：看具體崗位，比如某二本C語言老師給的月薪是7300+其他補貼
應聘形式：老師是 針對特定題目做PPT+試講 + 面談，其他崗是 筆試+面試
學歷要求：普調二本科院校要求一般是碩士及以上，一本以上院校要求博士起步
是否支持遠程：遇到的都不支持
事業單位
應聘消息來源：W市的相關微信小程序（公務員考試網、人事考試資訊網、本地寶）、一些高校的官網、省人力資源和社會保障廳官網--省直事業單位公開招聘公告欄
是否有編制：事業單位統一考試是有編制的，事業單位自行組織社招大都是合同制
年齡限制：大多數都是要求35週歲以內，少數30歲以內
薪資待遇：看具體崗位和單位
應聘形式：筆試 + 結構化面試（第一次接觸結構化面試，全程公開透明，無差異面試）+ 公示 + 體檢 + 政審/背調
學歷要求：本科
是否支持遠程：遇到的都不支持
個人感覺，高校和事業單位都適合本地人或者沒有房貸車貸的人，如果是上有老下有小還有房貸車貸，家裏不富裕的話，這個薪資在二線城市是否能夠支撐家庭開支，存疑。
互聯網行業的國企+私企-前端
應聘消息來源：boss直聘、拉勾網、各廠的官網
年齡限制：說實話，個人感覺 私企 對年齡和性別容忍度較高，反而國企央企會對 性別和年齡 有更高要求
反差最大的點：個人在社招應聘過程中的感覺，在私企，能力至上，大家是平等的，程序員這種技術崗有話語權；在國企央企，hr 權利可能更大一些，接觸過程中，總覺得技術崗有點卑微。我面的國企央企不多，只是個人想法（面試證券公司技術崗三次，一面結束時候都堅定承諾說過了會約二面，最後等來的都是“不好意思”，不知道是不是套路）
應聘形式：一般都是三輪技術面+一輪hr面，技術面穿插着手撕算法題
學歷要求：越高越好，985 211 都更有優勢
前端面試題目彙總：
0.自我介紹，包括學歷、工作經歷、技能等
1. 對象取屬性的順序
function Person(name) { this.name = name; this.getName = function() { return 'name from object ' + this.name; } } Person.prototype.getName = function () { return 'name from prototype ' + this.name; } const p = new Person('jack'); console.log(p.getName());
2.事件執行順序，宏任務和微任務的概念和區別，爲什麼會有微任務，event loop的概念和週期
console.log(1) setTimeout(() => { console.log(2) }, 0); console.log(3) const promise = new Promise(resolve => { console.log(4); resolve('ok'); }); promise.then(() => { console.log(5) }) // 1 3 4 5 2
3.金額轉換，數字轉換成中文
function convert(money) { const nums = ['零', '壹', '貳', '叄', '肆', '伍', '陸', '柒', '捌', '玖']; const units = ['元', '拾', '佰', '仟', '萬', '拾', '佰', '仟', '億']; let unit = 0; let sbf = ''; while (money != 0) { sbf = sbf + units[unit++]; let number = money % 10; sbf = sbf + nums[number]; money = (money / 10).toFixed(0); } return sbf.split('').reverse().join(''); }
4.有一棟100層高的大樓，給你兩個完全相同的玻璃球。假設從某一層開始，丟下玻璃球會摔碎。那麼怎麼利用手中的兩個球，用什麼最優策略知道這個臨界的層是第幾層？
5.substr 和 substring的區別
substr(start, length)是從起始索引號開始提取指定長度的字符串；
substring(start, end)是提取字符串中兩個指定索引號之間的字符。
6.盒子模型
在標準模型中，如果你給盒設置 width 和 height，實際設置的是 content box。 padding 和 border 再加上設置的寬高一起決定整個盒子的大小，盒子 width 不包括border和padding。
IE盒模型width 包括 內容寬度 padding border。
7.獲取class爲 sidebar 的元素
8.css佈局方式
display flex/inline-block/grid/table
多個 inline-block 元素之間的空格解決方式，一個是設置負的margin，一個是設置 font-size 0;
垂直居中的n種方式，vertical-align 是個坑，需要重視
9.css的animation怎麼用，這麼讓動畫結束後停留在最後一幀
animation-name, animation-delay, animation-duration, animation-timing-function, animation-direction , animation-iteration-count, animation-play-state
animation-fill-mode置CSS動畫在執行之前和之後如何將樣式應用於其目標。animation-fill-mode: forwards目標將保留由執行期間遇到的最後一個關鍵幀計算值.
10.怎麼實現一個new？
// 方法1 有缺陷 es5 function objectFactory() { var obj = new Object(), Constructor = [].shift.call(arguments); obj.__proto__ = Constructor.prototype; var ret = Constructor.apply(obj, arguments); return typeof ret === 'object' ? ret||obj : obj; // 防止ret是null }; // 方法2 es6 // 因爲new是關鍵字,我用函數的形式來實現，可以將構造函數和構造函數的參數傳入 function myNew(Fn,...args){ //1.創建一個空對象，並將對象的__proto__指向構造函數的prototype 這裏我兩步一起做了 const obj=Object.create(Fn.prototype); //2.將構造函數中的this指向obj，執行構造函數代碼,獲取返回值 const res=Fn.apply(obj,args); //3.判斷返回值類型 return res instanceof Object ?res:obj }
11.繼承有幾種實現方式？作用域和作用域鏈的概念？原型和原型鏈的概念？
12.埋點平臺的設計和實現，數據監控怎麼實時同步的？有哪些優化的措施？怎麼處理瀏覽器突然崩潰或者頁面突然關閉時候未上報的埋點信息？用http請求和image發送埋點的優缺點是什麼？怎麼解決埋點數據發送頻繁佔用瀏覽器http資源的問題？怎麼解決埋點數據過長的問題？
13.Vue 2 3的區別，從源碼到使用，儘可能詳細
-
重構響應式系統，使用Proxy替換Object.defineProperty，使用Proxy優勢：
- 可直接監聽數組類型的數據變化
- 監聽的目標爲對象本身，不需要像Object.defineProperty一樣遍歷每個屬性，有一定的性能提升
- 可攔截apply、ownKeys、has等13種方法，而Object.defineProperty不行
- 直接實現對象屬性的新增/刪除
新增Composition API，更好的邏輯複用和代碼組織
重構 Virtual DOM
- 模板編譯時的優化，將一些靜態節點編譯成常量
- slot優化，將slot編譯爲lazy函數，將slot的渲染的決定權交給子組件。所有由編譯產生的插槽現在都是函數，這些函數會在子組件的 render 調用時被調用。這樣一來，插槽中的依賴會被認爲是子組件的依賴而不是父組件的依賴。這意味着：1、當插槽內容變化時，只有子組件重新渲染；2、當父組件重新渲染時，如果插槽內容沒有變化，子組件就不需要重新渲染。這個特性提供了更精確的組件樹層面上的變更檢測，所以會減少很多無用的渲染。
- 模板中內聯事件的提取並重用（原本每次渲染都重新生成內聯函數）
代碼結構調整，更便於Tree shaking，使得體積更小
使用Typescript替換Flow
-
- 爲了輸出對 tree-shaking 友好的代碼，模板中如果用到了一些可選特性，那麼生成的代碼中將使用 ES 模塊語法來 import 這些特性。因此沒有用到的可選特性就不會出現在最終代碼中。
- 由於對虛擬 DOM 進行了優化，所以有了更高效的編譯時優化，比如靜態樹提升、靜態屬性提升、爲運行時添加編譯提示信息以減少子節點正常化（children normalization），VNode 創建的快速路徑等。
- 重寫解析器（parser），以在模板編譯錯誤提示中添加位置信息。這也會使得 Vue 支持模板的 source map。新的解析器可以提供給第三方工具使用，比如 eslint-plugin-vue 和 IDE。
14.命令式和聲明式的區別
15. 基礎變量類型
console.log(typeof {}, typeof Object,typeof String, typeof Array, typeof Object.create(null), typeof Object.create({}), Object.prototype.toString.call([12,3])) object function function function object object [object Array]
16.輸出
<style type="text/css"> .a, .b, .c { box-sizing: border-box; border: 1px solid; } .wrap { width: 250px; } .a { width: 100px; height: 100px; float: left; } .b { width: 100px; height: 50px; float: left; } .c { width: 100px; height: 100px; display: inline-block; } </style> <div class="wrap"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div>
如果把.c的 display: inline-block; 改成 display: block， a c區域重合。
17.vue3中用到的設計模式有哪些
18.最近項目中攻克的難點
19.簡單實現promise
20.手撕eventmitter實現
21.vue怎麼封裝一個高可用、可複用的組件，做到侵入性最小 $attrs listeners / slot render / button 沒有slot 、card組件 包裝
22.array的所有api，那些是返回新的數組，那些是改變原有數組。那些api可以中途終止迭代
23.vue router實現原理
24.vuex實現原理
25.babel實現原理（沒錯，這些原理，面試官就是這麼問的）
26.webpack優化構建速度和包體積的方法，webpack loader 和 webpack plugin的區別？splitChunks、tree shaking、uglify和terser的區別、htmlWebpackPlugin、mini-css-extract-plugin、懶加載、按需加載、異步加載
27.服務端渲染的概念和使用場景？vue server render那些生命週期鉤子不可用
28.vue keep-alive發生了什麼，被緩存但沒顯示在界面的節點或組件，還存在於真實dom節點上麼（不存在），keep-alive真的能優化性能麼？
29.vue mounted階段主要幹啥，mounted階段dom樹掛載上了麼？beforeDestroyed階段幹啥，常見使用場景是啥？vue作用域插槽概念和使用場景？
30.說一下什麼是閉包，使用場景是啥，能解決什麼問題，閉包會產生什麼問題？
31.async和promise的關係
32.vue生命週期每個階段的任務是什麼？created mountd 兩個階段請求數據有啥不一樣？
33.佔內存和堆內存的區別，垃圾回收方法，新生代和老生代內存管理
34.深淺拷貝的區別和實現方式
35.看代碼，說輸出
ar name = "a"; function outter(){ var name = "b"; function inner(){ console.log(name); console.log(this.name); } inner(); } outter();
this是什麼？作用是啥？改變this指針的方式有哪些？constrouctor的this和實例的this，有區別麼？
36.一個ui有30個li，怎麼打印每個li的index
37. 30個tab，每個tab300個dom node， 用v-if還是v-show，原因是什麼？v-if和v-show的區別有哪些？
38. 什麼是http？常見的http request header 和 reponse header有哪些？強緩存和弱緩存的概念和使用場景？常見的http錯誤碼有哪些？http 1.0/1.1/2.0 和 https各自的特點和區別，https怎麼做的加密，什麼是非對稱加密，什麼是對稱加密，自己怎麼實現一個非對稱加密能力？
39. npm run XXX的時候發生了什麼？
主要考察命令的查詢路徑
40.兩地三中心是什麼？異地多活是什麼？怎麼保證node服務的高可用性？怎麼做異地服務的數據備份？
41.vue-dom-diff的實現原理，vue2 vue3的vdom算法有什麼區別？什麼是最大穩定增長序列？時間複雜度是多少？
42.vue reactive的實現原理，vue2 vue3的響應式實現原理有什麼區別？各自優缺點是啥？
44.vue 父子組件通信方法總結，2和3最好都說一下
45.瀏覽器從輸入url到頁面展示，中間發生了什麼？重點是DNS查詢、TCP握手、資源請求、cssom/dom樹、render樹、頁面渲染的這幾個點，什麼是 reflow 和 repaint，怎麼避免repaint？
46.css那些屬性不可被繼承？display有哪些類型值，使用場景是啥？position有哪些類型值，使用場景是啥？
47.vue怎麼打包單個組件，開源給別人用？
48.模塊化是什麼？怎麼設計一個模塊化的組件後者功能？應該注意什麼？
49.你覺得做的最好的項目是哪個？介紹一下技術難點，設計和實現過程？
50.你覺得溝通最難的項目是哪個？介紹一下難點和怎麼解決的
落地
我是五一之後正式開始面，端午之後拿到了幾個offer，拿到心儀的offer之後提了離職，背調，搬家，接下來就等着入職了。
生活不易，要堅持哇