一年前端面試分享

我的狀況

畢業於廣東某雙非大學，校招進入奇安信（前360企業安全）工做，剛剛工做滿一年（很差找工做，但人在江湖，身不禁己）。
leetcode刷題200+，基本能應付面試了。牆裂建議作作算法題，真的很爽，並且很鍛鍊編碼思惟。

富途（offer call）

一面

時長： 47分鐘，過久沒面試，感受不少問題沒答好，一個小時後竟然收到了二面通知，感謝面試官手下留情。javascript

自我介紹
360企業安全，奇安信,360之間的關係？爲何學前端？平時怎麼學習的？最近在看什麼書嗎？...
作題

var a=1;
function fn(a){ a=2; }
fn(a);
console.log(a); // 1
複製代碼

var a={a:1};
function fn(a){ a.a=2; }
fn(a);
console.log(a.a); // 2
複製代碼

'use strict';
var a = 1;
var obj = {
	a:2,
	b:function(){
		this.a = 3;
	},
	print:function(){
		console.log(this.a);
	}
};
obj.print(); // 2
var print = obj.print;
print(); // 報錯，嚴格模式下this默認是undefined
複製代碼

function F(){
	this.a = 1;
}
var obj = new F();
console.log(obj.prototype); // undefined，對象沒有原型，函數纔有原型
複製代碼

兩個有序數組A和B，判斷B是不是A的子序？要求不能夠轉化數據格式，不可使用api

[1,2,3,4,5],[2,3,5] => true
// 遍歷B數組，再去A數組裏找有沒有這個值。利用有序這一特色，記錄A遍歷到哪裏，下次從記錄點開始便可。
複製代碼

項目加載優化

二面

時長：1小時04分鐘，被面試官血虐，各類算法題數學題，香菇。。。css

從何時開始學前端？爲何學前端？怎麼學的？html
給定長度爲N(1≤N≤2000)的字符串S，要構造一個長度爲N的字符串T。期初，T是一個空串，隨後反覆進行下列任意操做。前端
- 從S的頭部刪除一個字符，加到T的尾部
- 從S的尾部刪除一個字符，加到T的尾部
目標是要構造字典序儘量小的字符串。vue
topK問題？快排的時間複雜度是多少？若是數組特別大，怎麼優化？小頂堆的時間複雜度是多少？java
以時間複雜度O(n)從長度爲n的數組中找出同時知足下面兩個條件的全部元素：webpack
- 該元素比放在它左邊的全部元素都大；
- 該元素比放在它右邊的全部元素都小。
連續扔硬幣，直到某一人獲勝。A獲勝條件是先正後反，B獲勝是出現連續兩次反面，問AB遊戲時A獲勝機率是多少？web
河東有60萬人，河西有40萬人，打100萬個電話，跨河電話會有多少個？面試
跨域瞭解嗎？爲何須要跨域的限制？解決跨域的方案有什麼？ajax
挑一個項目說說？有多少人共同開發？你負責哪一塊？遇到什麼技術難題？
把10萬次for循環的代碼插到html中間，會有什麼現象？出現卡頓現象怎麼解決？添加defer屬性以後腳本會在何時執行？採用defer以後，用戶點擊頁面會怎麼樣？若是禁用WebWoker，還有其餘方法嗎？
10個資源放在一個域名下加載和放在多個域名下加載的區別是什麼？

三面

時長：50分鐘，其餘部門非前端大佬來面的，也是一直在作題。。。

優化項目加載速度
有100瓶水，其中有一瓶有毒，小白鼠只要嘗一點帶毒的水3天后就會死亡，至少要多少隻小白鼠才能在3天內鑑別出哪瓶水有毒？
四個數值[a,b] 和 [x,y]，怎麼判斷這兩個範圍存在交集？
算法題：股票問題
25個孩子，5個跑道，至少要跑多少次才能選出最快的三個小孩？
算法題：701. 二叉搜索樹中的插入操做

快手（offer call）

一面

時長：1小時07分鐘，遇到不太會的問題，面試官會引導解答，很nice。

自我介紹
項目介紹
項目遇到的難題和如何解決
作題

for(var i=0;i<3;i++){
	document.body.addEventListener('click', function(){
    	console.log(i) // 點擊以後輸出3 3 3
    })
}
複製代碼

怎麼改造能夠輸入0 1 2？爲何var改爲let就能夠呢？

Function.prototype.a = () => alert(1)
Object.prototype.b = () => alert(2)
function A(){}
var a = new A()
a.a() // 報錯
a.b() // 2
複製代碼

怎麼樣改造才能執行alert(1)呢？

A.a()
Function.a()
a.constructor.a()
複製代碼

繼續

console.log(a)
var a = 1
console.log(b)
let b = 2
console.log(c)
function c(){}
複製代碼

繼續

var x = 20
function a(y){
  var x = 10
  return get(y)
}
function get(y){
  return x+y
}
console.log(a(10)) // 30
複製代碼

Promise.allSettled瞭解嗎？手寫Promise.allSettled
算法題：70. 爬樓梯
寫一個方法生成隨機色值，例如#c1c1c1
Vue的雙向綁定原理
computed的實現原理
瀏覽器爲何要阻止跨域請求？如何解決跨域？每次跨域請求都須要到達服務端嗎？瀏覽器端怎麼攔截跨域請求的發出（是發出，不是接收）？
瀏覽器緩存瞭解嗎？強緩存通常存放在哪裏？計算整個文件獲得etag會耗費性能，怎麼解決？若是我不想要使用緩存了，每次都請求最新的，怎麼作？no-store和no-cache的區別是什麼？

二面

時長：1小時，總體面下來自我感受廣度欠缺，面完以後面試官說須要和一面面試官碰一下。

實現一個函數 findLastIndex(), 返回指定數在「有序」數組中最後一次出現位置的索引

如findLastIndex([1,2,3,3,3,4,5], 3), 返回4。時間複雜度是多少？什麼狀況下時間複雜度最高？ 2. 請實現一個cacheRequest(url, callback)請求緩存方法，保證當使用ajax時，對於同一個API實際在網絡層只發出一次請求以節省網絡流量（假設已存在request底層方法用於封裝ajax請求，調用格式爲：request(url, data => {})。好比調用方代碼以下

// a.js
cacheRequest('/user', data => {
    console.log('我是從A中請求的user，數據爲' + data);
})
// b.js
cacheRequest('/user', data => {
    console.log('我是從B中請求的user，數據爲' + data);
}
複製代碼

實現一個函數，把url裏的querystring轉化爲對象，但願考慮儘可能多的邊界狀況。（沒有query，相同的key，轉義後的字符須要轉回來）
說一下項目，項目是怎麼優化的？優化以後是怎麼度量的？首屏時間的計算？
v-show和v-if的區別
怎麼計算組件在視口內出現了幾回？IntersectionObserver怎麼使用的？怎麼知道一個DOM節點出如今視口內？
vuex的實現機制是什麼？vuex裏用到的設計模式有什麼？還有其餘的嗎？
用過自定義指令嗎？什麼場景下使用？
維護過公共組件嗎？是怎麼作的？有經過npm發包嗎？看過別人開源的組件庫是怎麼作的嗎？
說一下webpack的構建流程
webpack是怎麼處理模塊循環引用的狀況的？
loader和plugin的區別？什麼場景下使用？本身寫過plugin嗎？
瞭解其餘的構建工具嗎？Rollup的使用場景是什麼？
怎麼學習新技術的？最近在關注什麼新技術？

三面

時長：1小時04分鐘，大概聊下項目接着開始作題，面試官挺幽默風趣的。👍

項目相關（這一塊聊得挺多的）
一面的隨機色值我沒作對，面試官讓我繼續作。
寫一個方法，把16進制顏色值轉成10進制。（#fff => rgb(255,255,255)）
問了幾道css題（css權重，相對定位，絕對定位，margin-top爲負值）

CVTE（二面掛）

時長：46分鐘，自我感受通常。

一面

說一下JS事件循環？JS是多線程的嗎？（ps:我前面描述回答有點瑕疵）知道哪些微任務和宏任務？微任務和宏任務的區別？綁定一個事件的回調函數是宏任務仍是微任務？
說一下JS閉包？怎麼建立閉包？有什麼缺陷？怎麼解決？
剛剛你有說到垃圾回收，說一下垃圾回收吧。
若是想知道一個頁面有沒有存在內存泄漏的狀況，怎麼作？
剛剛你有說到性能優化，在這過程當中你是怎麼利用chrome開發者工具的？
WebWorker的缺點是什麼？在worker線程怎麼獲取主線程上下文？解決卡頓的問題除了使用WebWorker還有其餘的解決方案嗎？面試官建議我去了解一下React的fiber。有沒有測試過woker通訊的時間？
項目遇到的技術難題？
虛擬列表是什麼？
Vue雙向綁定的原理
Vue基本原理你會什麼？說一下diff算法，看我能不能聽得懂？（面試官是用React的）
webpack作過哪些構建優化？
封裝公共組件，須要注意什麼？

二面

時長：42分鐘，一半的問題都是回答不知道。

項目相關，問了很久。。。
共同編輯文檔有了解嗎？
說一下面向對象吧，多態是什麼？
說一下vscode插件是怎麼作的？
設計模式有了解嗎？除了觀察者模式還有其餘的嗎，平時用得上的。
說一下微信小程序吧
移動端適配有了解嗎？rem佈局
WebAssembly有了解嗎？
Electron有了解嗎？
TypeScript有了解嗎？
最近有在學什麼新的知識點，除了咱們上面說的。

鬥魚（一面過，但hr說有人接受了offer，沒hc）

時長：1小時13分鐘。兩個面試官輪流問問題，說實話，面完以後口水都有點幹了。

項目相關。
說一下防抖和節流。手寫防抖。
有一個結果，須要經過大量計算才能獲得，咱們把他存在本地，只有在資源發生改變時從新計算，怎麼作？
地址欄輸入url發生了什麼？強緩存和協商緩存分別適用於哪些場景？
有一個場景，一個網頁須要請求的資源在很遠的地方，並且公司沒錢買CDN，要怎麼利用緩存優化呢？
說一下閉包？閉包有什麼用？有什麼缺點？
說一下JS是怎麼作垃圾回收的？
vue雙向綁定原理？調用push給數組添加元素會自動更新嗎？爲何？
看過vue源碼嗎？說一下diff原理
作題

var a = 1 + '2'
var b = 1 - '2'
var c = [1,2] + [3,4]
複製代碼

你是怎麼判斷JS數據類型的？
JS有同步和異步任務，瀏覽器是怎麼處理的？
ES6特性有了解嗎？Promise的基本原理，genertor呢？async-await呢？
怎麼獲取相交鏈表的第一個相交點？
call、apply和bind的區別？call的實現原理？
作題

function lottery(whiteList, participant) {
  
}
// whiteList:類型字符串數組,意義是表示從其餘系統中計算出來的活躍用戶，若是這批用戶參與抽獎，則一定讓他中獎。長度不超過1萬
// participant:類型字符串數組,意義是表示這次活動中真正參與抽獎的用戶，長度約是10萬。

// 函數但願從participant返回 2 萬個用戶，表示中獎用戶，優先選取whiteList上的用戶，若不在whiteList上，對participant 剩餘的隨機 選取便可。
複製代碼

字節（二面掛）

一面

時長：1小時05分鐘，整個面試過程比較輕鬆，點贊👍

說一下rem、em、px、vh、vw
怎麼畫出0.5px的線
css的權重關係？
css哪些屬性會繼承，哪些不會繼承？
margin和padding設置百分比是相對於誰的？
@import 和 link的區別
justify-content的屬性值有什麼？
瀏覽器渲染機制？重繪和重排？dom樹和render樹節點是否一一對應？

const str1 = 'abc'
const str2 = new String('abc')

str1 == str2
str1 === str2
str1.substr()
str2.substr()
複製代碼

var、let、const 的區別？暫時性死區是什麼？

function showName() {
    console.log('Toutiao');
}
showName();
function showName() {
    console.log('OceanEngine');
}
showName();
var myname = "abc"
function showName2(){
  console.log(myname);
  var myname = "aabbcc"
  console.log(myname);
}
showName2();
複製代碼

若是我不想讓別人對obj對象添加或者刪除元素，能夠怎麼作呢？
完善下面函數，實現圖片的加載

function createImg(url){   }
createImg(url).then((value) => {
    document.body.appendChild(value)
})
複製代碼

如何解決ES6的兼容問題？
函數防抖和節流？
Vue雙向綁定原理？虛擬DOM性能？keep-alive？$set的用處？$nextTick？

<template>
  <div>{{a.b}}</div>
</template>

<script> export default { data () { return { a: {} } }, created () { this.a.b = 1 }, mounted () { this.a.b = 2 } } </script>
複製代碼

for(let i=0;i<10;i++){
    this.a = i
    this.$nextTick(() => {
        console.log(this.a)
    })
}
複製代碼

http2的新特性？多路複用的路指的是什麼？https 加密過程？
瀏覽器緩存說一下？
30一、30二、403的含義
web安全攻擊知道有哪些？怎麼防護？
如何解決跨域

二面

自我能力還欠缺，掛了。面完以後沒覆盤，題目已經記不太住了。

招聘 🎉

我入職快手一個星期啦，如今才發這篇文章出來，那確定是要發硬廣的，招前端啦。。。有大量hc，base在北京快手總部，mentor每天都在面試😏，還催咱們要簡歷，不要怕累壞大佬，大佬都是超人來的👍。
須要內推的同窗，能夠加我微信hh18316452113，我們深度交流一波。😊

寫在最後

作事在人，成事在天。面試的時候，把本身會的，都展現出來，過了就是實力到了緣分也到了，沒過的話多是緣分未至。
面試令人成長，經過此次面試，也認識到本身的不足，後續繼續💪。
最後的最後感謝 @小小晴_ 的內推，哈哈哈。