個(gè)人經(jīng)歷

本人211學(xué)校，回想我大一的時(shí)候，讀的是機(jī)電工程，因?yàn)閷τ?jì)算機(jī)專業(yè)好就業(yè)比較看重，后來在大一下的時(shí)候開始了自己雙學(xué)位之路，開始了學(xué)計(jì)算機(jī)專業(yè)，從此開始了科班生的生涯。接觸前端也大概是在大一下學(xué)期，在一個(gè)叫騰訊課堂的地方偶然發(fā)現(xiàn)了一套 JS 的視頻，看著感覺不錯(cuò)，想深入這個(gè)領(lǐng)域，但后來發(fā)現(xiàn)越往后面學(xué)越需要一些計(jì)算機(jī)科班的專業(yè)基礎(chǔ)，于是我當(dāng)時(shí)果斷轉(zhuǎn)到了計(jì)算機(jī)。因此這一步選擇算得上偶然，也是一個(gè)必然。

大二上學(xué)校的課程壓力比較大，不溫不火地學(xué)了一個(gè)學(xué)期，中途有過做全棧的想法，報(bào)了個(gè) Python Web 培訓(xùn)班，但是學(xué)的不好，后來直接放棄了，決定還是回過頭來好好把前端搞扎實(shí)吧，重新學(xué)了一遍 JS，然后看了看 JQuery，研究了里面選擇器實(shí)現(xiàn)的源碼，然后去學(xué) Vue，當(dāng)然也跟著網(wǎng)上的教程做了一些項(xiàng)目，比如慕課網(wǎng)上黃軼老師的餓了么項(xiàng)目和炸雞音樂Web App，還有 Dell Lee 的 Vue去哪兒網(wǎng)實(shí)戰(zhàn)，一步步做完感覺對自己實(shí)戰(zhàn)能力的提升還是很大的，起碼能自己獨(dú)立倒騰一個(gè)項(xiàng)目出來了。

大二下學(xué)期我開始接下了人生當(dāng)中第一個(gè)外包項(xiàng)目，也參加了計(jì)算機(jī)設(shè)計(jì)大賽，賺來了三千多的第一桶金，也拿到了中南賽區(qū)二等獎的證書。這一切在外人看來其實(shí)是相當(dāng)不錯(cuò)的經(jīng)歷了，但對我而言，我一直能夠感受到一種強(qiáng)烈的危機(jī)，由于項(xiàng)目一直在趕時(shí)間，很多時(shí)候秉著能出來效果就行的心態(tài)來做，很多細(xì)節(jié)并沒有我想象中做的那么完美，而且框架里面偶爾會出一些問題，但是我并沒有時(shí)間去理解其中的原理。我覺得這并不是我要追求的東西。這種心態(tài)，說的好聽點(diǎn)叫追求極致，難聽點(diǎn)，就是強(qiáng)迫癥。

在這種心態(tài)的驅(qū)使下，完成了外包和比賽后，我馬上了投入了更深一步的學(xué)習(xí)。《JavaScript高級程序設(shè)計(jì)》好好再翻一遍，ES6 重新好好學(xué)一遍，看了一遍珠峰周嘯天的 JavaScript 視頻，在 CSDN 上做了相關(guān)的筆記(我覺得不算博客)，以及在慕課網(wǎng)上學(xué)習(xí)了webpack的課程，React的入門視頻，一路狂奔，學(xué)了很多。

也正是大二下學(xué)期期末的時(shí)候，我開始了在掘金發(fā)表第一篇文章，標(biāo)志著寫博客的經(jīng)歷正式開始。讓我驚喜的是，發(fā)表出來的第一篇博客就被掘金社區(qū)的公眾號轉(zhuǎn)載了，我喜出望外，感覺特別驚喜，于是準(zhǔn)備繼續(xù)寫下去，不斷規(guī)劃和輸出新的內(nèi)容。

很快，大二下結(jié)束后，暑假就到來了。在這個(gè)時(shí)間有些小伙伴已經(jīng)出去找實(shí)習(xí)了，但我深知自己離 offer 還有一些差距，于是又感受到了一絲危機(jī)。我曾經(jīng)問過自己: 如果我要去找實(shí)習(xí)，會遇到哪些問題？

• 首先，項(xiàng)目自己覺得深度不夠，拿不出手。
• 其次，計(jì)算機(jī)基礎(chǔ)并不扎實(shí)，數(shù)據(jù)結(jié)構(gòu)和算法掌握的并不好，計(jì)算機(jī)網(wǎng)絡(luò)也沒基礎(chǔ)。
• 最后，前端技術(shù)的一些原理知之甚少，更別說框架源碼了。

因此，在大三前的暑假開始，我開始給我的未來實(shí)習(xí)布道。首當(dāng)其沖的就是自己去做一個(gè)讓自己滿意的項(xiàng)目，這個(gè)項(xiàng)目必須足夠的精致，同時(shí)不是為了應(yīng)付任何人。這個(gè)項(xiàng)目采用 React 來做的，當(dāng)時(shí)是統(tǒng)一用的 class 組件，后來想試用一下 hooks 特性，發(fā)現(xiàn)真香，直接用 hooks 重構(gòu)了。這個(gè)項(xiàng)目也就是我那本掘金小冊項(xiàng)目的前身。當(dāng)我把代碼放到 Github 上的時(shí)候，沒幾天的時(shí)間就收獲了上百了個(gè) star，讓我感到特別意外，而不久之后就有同學(xué)在 issue 區(qū)留言，覺得是一個(gè)不錯(cuò)的練習(xí)項(xiàng)目，能不能弄個(gè)教程出來。接下來我嘗試著這個(gè)項(xiàng)目更大的價(jià)值，事實(shí)上我也做到了，寫成了小冊放到社區(qū)，反響還不錯(cuò)。關(guān)于項(xiàng)目具體細(xì)節(jié)，詳情請點(diǎn)這里查看。

關(guān)于計(jì)算機(jī)基礎(chǔ)，我在大三上學(xué)期花了不少的精力學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)和算法，首先學(xué)完了慕課網(wǎng) bobo 老師的數(shù)據(jù)結(jié)構(gòu)從入門到進(jìn)階、算法與數(shù)據(jù)結(jié)構(gòu)綜合提升以及玩轉(zhuǎn)算法面試這三門課程，夯實(shí)了所有的基礎(chǔ)之后，開始鋪天蓋地地刷 leetcode，一學(xué)期刷了 100 多道算法題。對于計(jì)算機(jī)網(wǎng)絡(luò)，當(dāng)時(shí)確實(shí)沒有時(shí)間學(xué)了，就把這部分的計(jì)劃放在了寒假。

最后是前端技術(shù)的深入學(xué)習(xí)，分為 3 個(gè)方向精進(jìn)，JS 基礎(chǔ)、瀏覽器和框架。

一方面是JS的學(xué)習(xí)，對我而言，JS 明明學(xué)了很多遍了，但是實(shí)際上忘的也很快的，我打算重讀一遍紅寶書，然后重新建立完整的 JS 知識體系。緊接著我開始了《JS靈魂之問》系列博客的創(chuàng)作，嘗試著去系統(tǒng)地整理 JS 的知識點(diǎn)，又必須要達(dá)到一定的深度，當(dāng)時(shí)對我來說其實(shí)是一個(gè)相當(dāng)大的挑戰(zhàn)。在這個(gè)整理的過程當(dāng)中，我也逼著自己去參考了大量的資料和博客，說實(shí)話學(xué)到了不少，更讓我意外的是，這個(gè)系列讓我從此在掘金大火，幫助了許許多多在 JS 進(jìn)階路上的前端。

在瀏覽器這塊，其實(shí)很多運(yùn)行原理之前也是一知半解，直到一個(gè)偶然的機(jī)會，發(fā)現(xiàn)了極客時(shí)間上一個(gè)口碑不錯(cuò)的專欄，專門講瀏覽器的，耐下心來讀完之后，感覺收獲還是挺大的，推薦大家去好好看看，解開了之前很多關(guān)于瀏覽器原理的疑惑。

然后是前端框架，我后面逼自己去讀完了 Vue 源碼，原因很簡單，為了面試，但沒想到的是，我目前遇到的面試對我源碼方面問的并不深，只是非常常規(guī)的一些原理性的問題，但無疑的是，通讀源碼這個(gè)指標(biāo)對面試的評估來講是相當(dāng)加分的，并且能夠讓自己站在一個(gè)更高的高度去應(yīng)對面試，遇到相關(guān)的面試問題會非常從容。更重要的是，閱讀完源碼，對我個(gè)人對于 JS 的理解和 SDK 設(shè)計(jì)以及設(shè)計(jì)模式的理解更加深入了一步，這是我當(dāng)時(shí)沒有想到的，也是很長一段時(shí)間讓我受益的財(cái)富?？赡苡腥藭柲闶窃趺淳妥龅降?，關(guān)于源碼的閱讀方法，話題有點(diǎn)大，后面再介紹吧。

大三上就準(zhǔn)備了這么一些東西，順帶著整理了自己的博客，期末的時(shí)候已經(jīng)上架小冊、粉絲過萬了。

緊接著到了寒假，我把數(shù)據(jù)結(jié)構(gòu)和算法重新復(fù)習(xí)了一遍，TCP 和 HTTP 好好系統(tǒng)學(xué)了一遍，同時(shí)看了一些 chromium 的源碼，復(fù)習(xí)了一波 Vue 源碼，感覺火候差不多了就開始投遞簡歷了，于是投了阿里和字節(jié)跳動，便有上面的面經(jīng)了。

親身經(jīng)驗(yàn)分享

目前的經(jīng)歷分享就這些，可能會有些記流水賬的感覺，但正是這樣我覺得才足夠真實(shí)，因?yàn)閷η岸硕裕豢赡苷罩粋€(gè)系統(tǒng)的學(xué)習(xí)路徑按部就班，然后達(dá)到一個(gè)很高的水平，這種美化過的經(jīng)歷說出來連我自己都不信，誰的人生不是這么誤打誤撞過來的呢？那你可能就會問了，你憑什么能夠把基礎(chǔ)學(xué)的那么扎實(shí)，通過這些大廠的面試呢？

我覺得有兩點(diǎn)，一點(diǎn)是外在的因素，一點(diǎn)是內(nèi)在的因素。

對外在的方面，我在輸入一些信息的同時(shí)，會加入自己的思考和推敲，然后用自己的方式來輸出，整理成博客，這使得我能夠?qū)χR體系本身有更加深刻的理解，同時(shí)也能在忘記這部分知識點(diǎn)之后，重新回顧的時(shí)候能夠很快撿起來，節(jié)省了非常多復(fù)習(xí)的時(shí)間。

對內(nèi)在的方面，我覺得自驅(qū)力是一個(gè)比較重要的因素，即自己驅(qū)動自己學(xué)習(xí)的能力。其實(shí)說起來容易，做起來是非常難的，因?yàn)橥饨绲恼T惑實(shí)在是太多，而且學(xué)習(xí)本身就是脫離舒適區(qū)的活動，是一種反人性的活動，本身就是讓人不舒服的，因此很多人不愿意主動學(xué)習(xí)，這是完全可以理解的。那我為什么會有這種強(qiáng)烈的自驅(qū)力呢？

因?yàn)?strong>危機(jī)感，危機(jī)感隨之帶來了恐懼。

為什么這么說？

以前聽《得到》APP上的梁寧老師講過，人性其實(shí)只有兩大痛點(diǎn): 一個(gè)是愉悅，一個(gè)是恐懼。 愉悅感可以讓人沉浸在一件事情當(dāng)中干一萬小時(shí)，成為高手，而恐懼帶來的動力更加顯著。對產(chǎn)品來說，要么就讓用戶爆爽，要么就去幫助他抵御恐懼，否則就不是一個(gè)優(yōu)秀的產(chǎn)品。那么對于個(gè)人的成長而言，你做一件事情，沒有找到任何愉悅的感覺，也沒有產(chǎn)生過任何恐懼，那么他基本上在這個(gè)領(lǐng)域一事無成。

換句話說，如果一件事情讓你非常瘋狂地去做，要么這件事讓你爆爽，要么它幫助你抵御恐懼。

對我來講，真正驅(qū)動我的是后者。危機(jī)意識讓我挖掘出真正的痛點(diǎn)，發(fā)現(xiàn)自己的恐懼所在，從而帶來強(qiáng)大的自驅(qū)力。如果說僅僅是學(xué)一些東西來炫耀一番，或者只是去迎合外界的期望，這種動力可以有，但僅僅只是暫時(shí)的。當(dāng)你走出舒適區(qū)，面對外界無數(shù)誘惑的時(shí)候，真正能 carry 你繼續(xù)學(xué)習(xí)的是你內(nèi)心的痛點(diǎn)。

我覺得明白這一點(diǎn)，比所謂的學(xué)習(xí)路徑、學(xué)習(xí)方法重要得多。因?yàn)榇蠖鄶?shù)時(shí)候我們不是缺少學(xué)習(xí)資料，或者沒有掌握什么高效的學(xué)習(xí)方法，只是因?yàn)槟?code>動力不足、容易懈怠罷了。每個(gè)人情況都各不相同，但我覺得想要成長，挖掘自己真正的痛點(diǎn)是最重要的一件事情。

字節(jié)跳動三輪技術(shù)+一輪HR

技術(shù)一面（60min）

• 剛開始就問我的項(xiàng)目，問的很詳細(xì)。
• webpack 提高構(gòu)建速度的方式
• loader 輸入什么產(chǎn)出什么 ？
• webpack 原理
• webpack 動態(tài)加載的原理
• webpack 熱更新
• 如何寫一個(gè) webpack plugin
• AST 的應(yīng)用
• 如何解析一個(gè) html 文本，還是考 AST
• babel 原理，怎么寫 babel 插件
• 如何設(shè)計(jì)一個(gè)沙盒 sandbox ？
• 小程序的 API 做了什么處理，能夠做到全局變量的隱藏，如果是你，怎么設(shè)計(jì) ？
• 基礎(chǔ)題考閉包的，我講對了思路，結(jié)果沒做對。
• 實(shí)現(xiàn)顏色轉(zhuǎn)換 'rgb(255, 255, 255)' -> '#FFFFFF' 的多種思路。
• 提供一個(gè)數(shù)字 n，生成一組 0~n-1 的整數(shù)，打亂順序組成數(shù)組，打亂幾次，如何能夠看起來平衡，說出你能想到的所有方法。
• leetcode 239
• 隨便問環(huán)節(jié)，我問了考閉包的那道題，我答得很好。

二面技術(shù) leader（60min）

• 業(yè)務(wù)，業(yè)務(wù)，還是業(yè)務(wù)，項(xiàng)目復(fù)盤有沒有更好的解決方案。
• 如何處理一個(gè)重大事故 bug
• 監(jiān)控體系
• 虛擬 dom 有什么好的地方？ 框架為什么要設(shè)計(jì)虛擬 dom？
• webpack 的缺點(diǎn)，讓你設(shè)計(jì)一個(gè)新的構(gòu)建打包工具，你會怎么設(shè)計(jì)？
• 在線文檔編輯，如何處理兩人的沖突，如何展示，考慮各種場景
• excel 文檔沖突高級處理，文章沖突呢？是上個(gè)問題的深化。
• 基礎(chǔ)題，直接寫出答案：

let x = [1, 2, 3]; 
let y = x; 
let z = [4, 5, 6]; 
y[0] = 10; 
y = z; 
z[1] = 20; 
x[2] = z = 30; 
console.log(x, y, z);
復(fù)制代碼

• 基礎(chǔ)題：簡單實(shí)現(xiàn)一個(gè) LRU
• 隨便問環(huán)節(jié)

三面業(yè)務(wù) leader（60min）

• 算法題：從數(shù)組 [1, 5, 8, 10, 12] 中找到兩個(gè)數(shù)和為 9，返回 [1, 8] 這樣的結(jié)果。
• 算法題：從數(shù)組 [1, 5, 8, 10, 12] 中找到三個(gè)數(shù)和為 19，返回 [1, 8， 10] 這樣的結(jié)果。
• 算法題 leetcode 300：給定一個(gè)無序的整數(shù)數(shù)組，找到其中最長上升子序列的長度。
• 針對我的項(xiàng)目提問，大概 40 分鐘吧。

HR 面:(30min)

• 做項(xiàng)目的初衷在什么地方？

• 歌曲倍速播放的功能是怎么實(shí)現(xiàn)的？為什么要想到這個(gè)？

• 公司的業(yè)務(wù)可能會壓榨自己開源分享的時(shí)間，你會介意嗎？

• 公司內(nèi)的一些代碼不能開源，和你自己的開源分享沖突了，你怎么辦？

• 你為什么不早點(diǎn)去實(shí)習(xí)？現(xiàn)在才開始找實(shí)習(xí)？

• 看了你的 GPA ，還是蠻靠前的，你怎么平衡學(xué)校的學(xué)業(yè)和技術(shù)的學(xué)習(xí)的？

• 怎么看待別人在你博客下面發(fā)一些懟你的評論？

• 在學(xué)校有社團(tuán)經(jīng)歷嗎？

• 自己平時(shí)有什么興趣愛好？

• 和室友關(guān)系咋樣？

是的，我的字節(jié)跳動面試順利，這一面算法沒有難倒我，基本上看到題目我就能想出解法。雖然我簡歷上的項(xiàng)目偏簡單了點(diǎn)，但好在我有好好總結(jié)和復(fù)盤（最終有驚無險(xiǎn)拿到了offer！）………

學(xué)習(xí)經(jīng)歷及經(jīng)驗(yàn)

面試經(jīng)驗(yàn)分享

準(zhǔn)備階段

在面試之前，可能很多人會跟我一樣感到焦慮，覺得自己還沒準(zhǔn)備好，想多復(fù)習(xí)一些東西，可越復(fù)習(xí)越感覺自己不會的東西更多，從而遲遲不敢出去面試。這其實(shí)是個(gè)悖論，原因就在于技術(shù)本身就是學(xué)不完的，此時(shí)我們需要好好調(diào)整一下自己的心態(tài)，做兩手準(zhǔn)備:

• 劃清知識體系和邊界
• 給自己安排一個(gè)截止日期(deadline)

準(zhǔn)備時(shí)間是有限的，我們需要做的就是利用有限的時(shí)間達(dá)到最大效益的產(chǎn)出，因此盡量地做一些復(fù)習(xí)鞏固和查漏補(bǔ)缺，發(fā)揮自己的優(yōu)勢，而不要去為了面試學(xué)新技術(shù)，或者深挖自己從未涉獵的領(lǐng)域。我根據(jù)自己目前的實(shí)際水平，制定了這樣一份面試知識體系:

其實(shí)當(dāng)時(shí)有些知識并沒有完全掌握，但是又需要出去面試，所以給了自己一個(gè)截止日期，在 3 月 10 號之前，盡全力準(zhǔn)備，到了 deadline，無論如何都要投簡歷出去。這樣，后面的一系列面試就順理成章了，沒有拖得太久，同時(shí)準(zhǔn)備的還不錯(cuò)。

另外，關(guān)于前端面試基礎(chǔ)知識以及計(jì)算機(jī)基礎(chǔ)，我已經(jīng)在博客里面面試題做了系統(tǒng)的梳理和給出了參考解析，下面給大家一些已經(jīng)產(chǎn)出的內(nèi)容，讓大家可以完整地學(xué)習(xí):

第一章 HTML（★★）

1.瀏覽器頁面有哪三層構(gòu)成，分別是什么，作用是什么?

2.HTML5的優(yōu)點(diǎn)與缺點(diǎn)？

3.Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

4.HTML5有哪些新特性、移除了哪些元素？

5.你做的網(wǎng)頁在哪些瀏覽器測試過,這些瀏覽器的內(nèi)核分別是什么?

6.每個(gè)HTML文件里開頭都有個(gè)很重要的東西，Doctype，知道這是干什么的嗎？

7.說說你對HTML5認(rèn)識?（是什么,為什么）

8.對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識?.

9.HTML5行內(nèi)元素有哪些,塊級元素有哪些, 空元素有哪些?.

10.什么是WebGL,它有什么優(yōu)點(diǎn)?.

11.請你描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?.

12.說說你對HTML語義化的理解?.

13.link和@import的區(qū)別?.

14.說說你對SVG理解?.

15.HTML全局屬性(global attribute)有哪些?.

16.說說超鏈接target屬性的取值和作用？

17.data-屬性的作用是什么？

18.介紹一下你對瀏覽器內(nèi)核的理解？

19.常見的瀏覽器內(nèi)核有哪些？

20.iframe有那些缺點(diǎn)？

21.Label的作用是什么，是怎么用的？

22.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?.

23.如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？

24.title與h3的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

25.實(shí)現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果？

26.HTML5標(biāo)簽的作用?(用途)

27.簡述一下src與href的區(qū)別？

28.談?wù)勀銓anvas的理解？

29.WebSocket與消息推送？

30.mg的title和alt有什么區(qū)別？

31.表單的基本組成部分有哪些，表單的主要用途是什么？

32.表單提交中Get和Post方式的區(qū)別？

33.HTML5 有哪些新增的表單元素？

34.HTML5 廢棄了哪些 HTML4 標(biāo)簽？

35.HTML5 標(biāo)準(zhǔn)提供了哪些新的 API？

36.HTML5 存儲類型有什么區(qū)別？

37.HTML5 應(yīng)用程序緩存和瀏覽器緩存有什么區(qū)別？

38.HTML5 Canvas 元素有什么用？

39.除了 audio 和 video，HTML5 還有哪些媒體標(biāo)簽？

40.HTML5 中如何嵌入視頻？

41.HTML5 中如何嵌入音頻？

42.新的 HTML5 文檔類型和字符集是？

第二章 CSS （★★★）

1. 解釋一下CSS的盒子模型？

2. 請你說說CSS選擇器的類型有哪些，并舉幾個(gè)例子說明其用法？

3請你說說CSS有什么特殊性?（優(yōu)先級、計(jì)算特殊值）

4要動態(tài)改變層中內(nèi)容可以使用的方法？

5. 常見瀏覽器兼容性問題與解決方案？

6. 列出display的值并說明他們的作用？

7. 如何居中div, 如何居中一個(gè)浮動元素?

8. CSS中 link 和@import 的區(qū)別是？

9. 請列舉幾種清除浮動的方法(至少兩種)?

10. block，inline和inlinke-block細(xì)節(jié)對比？

11. 什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？

12. 說說浮動元素會引起的問題和你的解決辦法.

13.你有哪些性能優(yōu)化的方法？

14.為什么要初始化CSS樣式？

15.解釋下浮動和它的工作原理？清除浮動的技巧？

16.CSS樣式表根據(jù)所在網(wǎng)頁的位置，可分為哪幾種樣式表？

17.談?wù)勀銓SS中刻度的認(rèn)識？

18.請你說說em與rem的區(qū)別？

19.請你說說box-sizing屬性的的用法？

20.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？

21.怪異Quirks模式是什么，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別？

22.說說你對邊距折疊的理解?

23.內(nèi)聯(lián)與塊級標(biāo)簽有何區(qū)別？

24.說說隱藏元素的方式有哪些？

25.為什么重置瀏覽器默認(rèn)樣式，如何重置默瀏覽器認(rèn)樣式？

26.談?wù)勀銓FC與IFC的理解？(是什么，如何產(chǎn)生，作用)

27.說說你對頁面中使用定位(position)的理解？

28.如何解決多個(gè)元素重疊問題？

29.頁面布局的方式有哪些？

30.overflow :hidden是否形成新的塊級格式化上下文？

第三章 前端基礎(chǔ) （★★★）

1.說一下http和https. 55

2.tcp三次握手，一句話概括

3.TCP和UDP的區(qū)別

4.WebSocket的實(shí)現(xiàn)和應(yīng)用

5.HTTP請求的方式，HEAD方式

6.一個(gè)圖片url訪問后直接下載怎樣實(shí)現(xiàn)？

7.說一下web Quality（無障礙）

8.幾個(gè)很實(shí)用的BOM屬性對象方法?

9.說一下HTML5 drag api

10.說一下http2.0

11.補(bǔ)充400和401、403狀態(tài)碼

12.fetch發(fā)送2次請求的原因

13.Cookie、sessionStorage、localStorage的區(qū)別

14說一下web worker

15.對HTML語義化標(biāo)簽的理解

16.iframe是什么？有什么缺點(diǎn)？

17.Doctype作用?嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

18.Cookie如何防范XSS攻擊

19.Cookie和session的區(qū)別

20.一句話概括RESTFUL

21.講講viewport和移動端布局

22.click在ios上有300ms延遲，原因及如何解決？

23.addEventListener參數(shù)

24.cookie sessionStorage localStorage區(qū)別

25.cookie session區(qū)別

26.介紹知道的http返回的狀態(tài)碼

27.http常用請求頭

28.強(qiáng)，協(xié)商緩存

29.HTTP狀態(tài)碼說說你知道的

30.講講304

31.前端優(yōu)化

32.GET和POST的區(qū)別

33.301和302的區(qū)別

34.HTTP支持的方法

35.如何畫一個(gè)三角形

36.狀態(tài)碼304和 200

37.說一下瀏覽器緩存

38.HTML5新增的元素

39.在地址欄里輸入一個(gè)URL,到這個(gè)頁面呈現(xiàn)出來，中間會發(fā)生什么？

40.cookie和session的區(qū)別，localstorage和sessionstorage的區(qū)別

41.常見的HTTP的頭部

42.HTTP2.0 的特性

43.cache-control的值有哪些

44.瀏覽器在生成頁面的時(shí)候，會生成那兩顆樹？

45.csrf和xss的網(wǎng)絡(luò)攻擊及防范

46.怎么看網(wǎng)站的性能如何

47.介紹HTTP協(xié)議(特征)

48.輸入U(xiǎn)RL到頁面加載顯示完成發(fā)生了什么?

49.說一下對Cookie和Session的認(rèn)知，Cookie有哪些限制？

50.描述一下XSS和CRSF攻擊？防御方法？

51.知道304嗎，什么時(shí)候用304？

52.具體有哪些請求頭是跟緩存相關(guān)的

53.cookie和session的區(qū)別

54.cookie有哪些字段可以設(shè)置

55.cookie有哪些編碼方式？

56.既然你看過圖解http，那你回答下200和304的區(qū)別

57.除了cookie，還有什么存儲方式。說說cookie和localStorage的區(qū)別

58.瀏覽器輸入網(wǎng)址到頁面渲染全過程

59.HTML5和CSS3用的多嗎？你了解它們的新屬性嗎？有在項(xiàng)目中用過嗎？

60.HTTP狀態(tài)碼

61.http常見的請求方法

62.get和post的區(qū)別

63.說說302，301，304的狀態(tài)碼

64.web性能優(yōu)化

65.瀏覽器緩存機(jī)制

66.post和get區(qū)別

67.說一下css盒模型

68.畫一條0.5px的線

69.link標(biāo)簽和import標(biāo)簽的區(qū)別

70.transition和animation的區(qū)別

71.Flex布局

72.BFC（塊級格式化上下文，用于清楚浮動，防止margin重疊等）

73.垂直居中的方法

74.關(guān)于js動畫和css3動畫的差異性

75.說一下塊元素和行元素

76.多行元素的文本省略號

77.visibility=hidden, opacity=0，display:none

78.雙邊距重疊問題（外邊距折疊）

79.position屬性 比較

80.浮動清除

81.css3新特性

82.CSS選擇器有哪些，優(yōu)先級呢

83.清除浮動的方法，能講講嗎

84.怎么樣讓一個(gè)元素消失，講講

85.介紹一下盒模型

86.position相關(guān)屬性

87.css動畫如何實(shí)現(xiàn)

88.如何實(shí)現(xiàn)圖片在某個(gè)容器中居中的？

89.如何實(shí)現(xiàn)元素的垂直居中

90.CSS3中對溢出的處理

91.float的元素，display是什么

92.隱藏頁面中某個(gè)元素的方法

93.三欄布局的實(shí)現(xiàn)方式，盡可能多寫，浮動布局時(shí)，三個(gè)div的生成順序有沒有影響

94.什么是BFC

95.calc屬性

96.有一個(gè)width300，height300，怎么實(shí)現(xiàn)在屏幕上垂直水平居中

97.display：table和本身的table有什么區(qū)別

98.position屬性的值有哪些及其區(qū)別

99.z-index的定位方法

100.CSS盒模型

101.如果想要改變一個(gè)DOM元素的字體顏色，不在它本身上進(jìn)行操作？

102.對CSS的新屬性有了解過的嗎？

103.用的最多的css屬性是啥？

104.line-height和height的區(qū)別

105.設(shè)置一個(gè)元素的背景顏色，背景顏色會填充哪些區(qū)域？

106.知道屬性選擇器和偽類選擇器的優(yōu)先級嗎

107.inline-block、inline和block的區(qū)別；為什么img是inline還可以設(shè)置寬高

108.用css實(shí)現(xiàn)一個(gè)硬幣旋轉(zhuǎn)的效果

109.了解重繪和重排嗎，知道怎么去減少重繪和重排嗎，讓文檔脫離文檔流有哪些方法

110.CSS畫正方體，三角形

111.overflow的原理

112.清除浮動的方法

113.box-sizing的語法和基本用處

114.使元素消失的方法有哪些？

115.兩個(gè)嵌套的div，position都是absolute，子div設(shè)置top屬性，那么這個(gè)top是相對于父元素的哪個(gè)位置定位的。

116.說說盒子模型

117.display

118.怎么隱藏一個(gè)元素

119.display:none和visibilty:hidden的區(qū)別

120.相對布局和絕對布局，position:relative和obsolute。

121.flex布局

122..block、inline、inline-block的區(qū)別。

123.css的常用選擇器

124.css布局

125.css定位

126.relative定位規(guī)則

127.垂直居中

128.css預(yù)處理器有什么

129.get請求傳參長度的誤區(qū)

130.補(bǔ)充get和post請求在緩存方面的區(qū)別

131.說一下閉包

132.說一下類的創(chuàng)建和繼承

133.如何解決異步回調(diào)地獄

134.說說前端中的事件流

135.如何讓事件先冒泡后捕獲

136.說一下事件委托

137.說一下圖片的懶加載和預(yù)加載

138.mouseover和mouseenter的區(qū)別

139.js的new操作符做了哪些事情

140.改變函數(shù)內(nèi)部this指針的指向函數(shù)（bind，apply，call的區(qū)別）

141.js的各種位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的區(qū)別？

142.js拖拽功能的實(shí)現(xiàn)

143.異步加載js的方法

144.Ajax解決瀏覽器緩存問題

145.js的節(jié)流和防抖

146.JS中的垃圾回收機(jī)制

147.eval是做什么的

148.如何理解前端模塊化

149.說一下Commonjs、AMD和CMD

150.對象深度克隆的簡單實(shí)現(xiàn)

151.實(shí)現(xiàn)一個(gè)once函數(shù)，傳入函數(shù)參數(shù)只執(zhí)行一次

152.將原生的ajax封裝成promise

153.js監(jiān)聽對象屬性的改變

154.如何實(shí)現(xiàn)一個(gè)私有變量，用getName方法可以訪問，不能直接訪問

155.==和===、以及Object.is的區(qū)別

156.setTimeout、setInterval和requestAnimationFrame之間的區(qū)別

157.實(shí)現(xiàn)一個(gè)兩列等高布局，講講思路

158.自己實(shí)現(xiàn)一個(gè)bind函數(shù)

159.用setTimeout來實(shí)現(xiàn)setInterval

160.用setTimeout來實(shí)現(xiàn)setInterval

161.代碼的執(zhí)行順序

162.如何實(shí)現(xiàn)sleep的效果（es5或者es6）

163.簡單的實(shí)現(xiàn)一個(gè)promise

164.Function.proto(getPrototypeOf)是什么？

165.實(shí)現(xiàn)js中所有對象的深度克隆（包裝對象，Date對象，正則對象）

166.簡單實(shí)現(xiàn)Node的Events模塊

167箭頭函數(shù)中this指向舉例

168.js判斷類型

169.數(shù)組常用方法

170.數(shù)組去重

171.閉包 有什么用
...

??篇幅有限，更詳細(xì)的內(nèi)容點(diǎn)擊我獲取完整版pdf查看??

第四章 前端核心（★★★★★）

1.JavaScript 有幾種類型

2.深淺拷貝

3．作用域

4.原型和繼承

5.new和this

6.apply、call、bind

7.數(shù)據(jù)處理

8.Event Loop

9.瀏覽器頁面渲染過程

10.JSONP的缺點(diǎn)

11.跨域（jsonp，ajax）

12.如何實(shí)現(xiàn)跨域

13.dom是什么，你的理解？

14.關(guān)于dom的api有什么

15.ajax返回的狀態(tài)

16.實(shí)現(xiàn)一個(gè)Ajax

17.如何實(shí)現(xiàn)ajax請求，假如我有多個(gè)請求，我需要讓這些ajax請求按照某種順序一次執(zhí)行，有什么辦法呢？如何處理ajax跨域

18.寫出原生Ajax

19.如何實(shí)現(xiàn)一個(gè)ajax請求？如果我想發(fā)出兩個(gè)有順序的ajax需要怎么做？

20.Fetch和Ajax比有什么優(yōu)缺點(diǎn)？

21.移動應(yīng)用和web應(yīng)用的關(guān)系

22.知道PWA嗎

23.做過移動端嗎

24.知道touch事件嗎

25.移動端的DEMO什么的有沒有做過點(diǎn)的

第五章 前端進(jìn)階（★★★）

1. 前端測試

2. 作為一個(gè)項(xiàng)目負(fù)責(zé)人怎么協(xié)調(diào)多人協(xié)作

3. 接口文檔的制定

4. 需求不明確，接口文檔是不是越詳細(xì)越好

5.webpack和gulp區(qū)別（模塊化與流的區(qū)別）

6.redux用處

7.redux里常用方法

8.angularJs和react區(qū)別

9.vue雙向綁定原理

10.說說vue react angularjs jquery的區(qū)別

11.node的事件方法講講看

12.node的特性，適合處理什么場景

13.你有用到Express,講講Express

14.promise的狀態(tài)有那些

15.數(shù)組移除第一個(gè)元素的方法有哪些？

??篇幅有限，更詳細(xì)的內(nèi)容點(diǎn)擊我獲取完整版pdf查看??

第六章 移動端開發(fā)（★★★）

1.介紹一下react

2.React單項(xiàng)數(shù)據(jù)流

3.react生命周期函數(shù)和react組件的生命周期

4.react和Vue的原理，區(qū)別，亮點(diǎn)，作用，

5.reactJs的組件交流

6.有了解過react的虛擬DOM嗎，虛擬DOM是怎么對比的呢

7.項(xiàng)目里用到了react，為什么要選擇react，react有哪些好處

8.怎么獲取真正的dom

9. 選擇react的原因

10.react的生命周期函數(shù)

11.setState之后的流程

12.react高階組件知道嗎？

13. React的jsx，函數(shù)式編程

14.React的生命周期

15.說說自己理解的react

16.react的組件是通過什么去判斷是否刷新的

17.其他移動APP開發(fā)框架（PhoneGap，AppCan，HTML5+，F(xiàn)ramework7）

第七章 計(jì)算機(jī)基礎(chǔ)（★★★）

1.TCP建立連接的三次握手過程

2.cdn原理

3.說一下用戶從輸入url到顯示頁面這個(gè)過程發(fā)生了什么

4.HTTP的頭部包含哪些內(nèi)容。常見的請求方法（我為什么要說后面的options，head，connect）

5.請求方法head特性

6.HTTP狀態(tài)碼，301和302有什么具體區(qū)別，200和304 的區(qū)別

7.OSI七層模型

8.TCP和UDP的區(qū)別，為什么三次握手四次揮手

9.HTTP緩存機(jī)制

10.websocket和ajax的區(qū)別是什么，websocket的應(yīng)用場景有哪些

11.TCP/IP的網(wǎng)絡(luò)模型

12.知道什么跨域方式嗎，jsonp具體流程是什么，如何實(shí)現(xiàn)原生Jsonp封裝，優(yōu)化，對于CORS，服務(wù)器怎么判斷它該不該跨域呢

13.怎么生成token，怎么傳遞，

14.操作系統(tǒng)進(jìn)程和線程的區(qū)別

15.什么是進(jìn)程 線程

16.線程的那些資源共享，那些資源不共享

17. linux指令用的多嗎，怎么進(jìn)行進(jìn)程間通信

18. kill指令了解過嗎

19.操作系統(tǒng)里面進(jìn)程和線程的區(qū)別

20.Linux查詢進(jìn)程指令，查詢端口，殺進(jìn)程，

21.進(jìn)程間的通信方式有哪些？

22.Redis和 mysql

第八章 算法與數(shù)據(jù)結(jié)構(gòu)（★★★★）

1.二叉樹層序遍歷

2.B樹的特性，B樹和B+樹的區(qū)別

3.尾遞歸

4.如何寫一個(gè)大數(shù)階乘？遞歸的方法會出現(xiàn)什么問題？

5.把多維數(shù)組變成一維數(shù)組的方法

6.知道的排序算法 說一下冒泡快排的原理

7. 說一下你了解的數(shù)據(jù)結(jié)構(gòu) 區(qū)別

8.Heap排序方法的原理？復(fù)雜度？

9.幾種常見的排序算法，手寫

10.數(shù)組的去重，盡可能寫出多個(gè)方法

11.如果有一個(gè)大的數(shù)組，都是整型，怎么找出最大的前10個(gè)數(shù)

12.知道數(shù)據(jù)結(jié)構(gòu)里面的常見的數(shù)據(jù)結(jié)構(gòu)

13.找出數(shù)組中第k大的數(shù)組出現(xiàn)多少次，比如數(shù)組【1，2，4，4，3，5】第二大的數(shù)字是4，出現(xiàn)兩次，所以返回2

14.合并兩個(gè)有序數(shù)組

15.給一個(gè)數(shù)，去一個(gè)已經(jīng)排好序的數(shù)組中尋找這個(gè)數(shù)的位置（通過快速查找，二分查找）

第九章 設(shè)計(jì)模式（★★★★）

1.設(shè)計(jì)模式：單例，工廠，發(fā)布訂閱

2.看過一些設(shè)計(jì)模式的書？你覺得設(shè)計(jì)模式怎么樣？

??篇幅有限，更詳細(xì)的內(nèi)容點(diǎn)擊我獲取完整版pdf查看??

接下來進(jìn)入面試的階段。

關(guān)于算法：

算法的準(zhǔn)備那是一定一定要刷題的，大概分為這樣的步驟：
第一階段：對于某一個(gè)具體的算法，首先要搞清楚這個(gè)算法解決的問題是什么，可能是實(shí)現(xiàn)一個(gè)具體的功能，也可能是在某些方面，比如時(shí)間復(fù)雜度或者空間復(fù)雜度方面很卓越，總之搞清楚這個(gè)算法被研究出來的目的是什么。

第二階段：然后就要弄清楚這個(gè)算法的生存環(huán)境了，也就是看看你此時(shí)研究的東西是不是對別的知識有依賴，應(yīng)該先把底層依賴的知識理解并掌握。這些問題都解決之后，就進(jìn)入到算法本身的學(xué)習(xí)，理解一個(gè)算法是一件辛苦的事情，剛開始看必然會產(chǎn)生很多的困惑，比如經(jīng)常會懷疑作者講述的內(nèi)容的重要性？這些內(nèi)容和這個(gè)算法有什么聯(lián)系呢？經(jīng)常會有這種摸不著頭腦的感覺，其實(shí)作者做的鋪墊都是為了建立起描述算法主要內(nèi)容的基礎(chǔ)，只有接受和理解這些基礎(chǔ)，才能逐漸觸碰到算法的精髓，所以耐心是很重要的。

第三階段：算法的主要過程看完之后，往往還是會感到困惑，主要是不知道這個(gè)過程好在哪，這就進(jìn)入了下一個(gè)階段，理解作者對這個(gè)過程在功能性或者效率卓越這件事上的解釋和證明。這才真正觸碰到算法最精髓的部分，也就是深度的理解算法的主要過程所帶來的好處，這才是最鍛煉人理解能力的地方。

第四階段：上面幾點(diǎn)是算法學(xué)習(xí)階段的過程了，接下來就是研究算法的代碼實(shí)現(xiàn)，自己設(shè)計(jì)測試用例親自跑一下代碼，以及從代碼運(yùn)行時(shí)間的角度分析這個(gè)算法的優(yōu)勢，這也是加深對算法的理解的過程。

第五階段：最后是配合相應(yīng)的題目練習(xí)，讓自己通過題目練習(xí)的方式，會用、善用學(xué)習(xí)到的算法，并對這個(gè)算法產(chǎn)生一定的敏感程度，具體是指看到某些題目時(shí)，能夠根據(jù)題目的特點(diǎn)，產(chǎn)生與該算法的對應(yīng)，也就是具備舉一反三的能力。

面試階段

從上面的面經(jīng)中可以看到不同方向、不同級別的面試官各自的偏好不一樣，因此對于不同的面試官，采取的策略也應(yīng)有所不同。但我更想分享的是一些具有共性的地方，這些策略可以適用于絕大部分的面試場景，讓自己獲得更大的競爭優(yōu)勢。當(dāng)然，所謂的面試策略，都是基于你前期充分的準(zhǔn)備，不然都只是天方夜譚，毫無可行性。

策略一: 備好殺手锏

面試官一天可能要面5-6人，甚至十幾人，那么你是否想過: 他憑什么對你印象更加深刻？

心理學(xué)有一個(gè)效應(yīng)叫峰終效應(yīng)，就是人在一個(gè)有限的活動當(dāng)中，對一件陌生事物的看法大致由兩個(gè)時(shí)間點(diǎn)所決定: 一個(gè)是高潮點(diǎn)，一個(gè)是結(jié)尾的點(diǎn)。

對面試而言，我認(rèn)為同樣是適用，具體來講，和面試官的交流，其實(shí)也就是和一個(gè)陌生人的交流，如何來給他留下更深刻的印象？需要在高潮點(diǎn)展現(xiàn)自己，在結(jié)尾點(diǎn)保護(hù)自己，在面試的過程中適當(dāng)給面試官一些和別人不一樣的回答和見解，使之感到驚艷，而在結(jié)尾的時(shí)候，你說的話其實(shí)更容易被面試官記住，這個(gè)時(shí)候由于面試已經(jīng)接近尾聲，你可能沒有當(dāng)時(shí)那么緊張，這個(gè)時(shí)候需要適當(dāng)?shù)闹?jǐn)慎一些，不要徹底放松，避免不小心說出一些對自己處境不利的話。

其實(shí)，我更想強(qiáng)調(diào)的是前者，即如何將面試帶上一個(gè)高潮點(diǎn)，并且讓面試官感到驚艷。其實(shí)這并不是什么簡單的事情，畢竟能驚艷的只是少數(shù)，那么如果才能做到這一點(diǎn)呢？

在面試前，不妨準(zhǔn)備好自己的殺手锏。什么是殺手锏？就是每當(dāng)面試官問到相關(guān)的問題的時(shí)候，你能夠有自信比 90% 的人理解得更深刻，回答更出色。以我自己為例，我準(zhǔn)備的殺手锏并不少，HTTPS 所有加密算法，chromium 進(jìn)程 IPC 原理，斐波拉契第 n 數(shù)的 logn 解法，瀏覽器渲染過程，vue 編譯器架構(gòu)，vue 雙向綁定，快排以及手寫 V8 排序......

在其它基礎(chǔ)知識都 OK 的前提下，這些殺手锏是你技術(shù)上的核心競爭力，這是你和其他人相比體現(xiàn)不可替代性的地方。當(dāng)然，時(shí)間有限，不可能每個(gè)角度都能研究很深入，但如果你不準(zhǔn)備，跟大家背一樣的答案，很難從人群當(dāng)中脫穎而出。

策略二: 適當(dāng)暗示

面試的過程其實(shí)就是一個(gè)和面試官互相試探的過程，一方面是他對你提問，另一方面你需要給他一些信號，引導(dǎo)他去挖掘你的閃光點(diǎn)。

其實(shí)有兩個(gè)時(shí)機(jī)可以發(fā)一些暗示的信號，一個(gè)是自我介紹的環(huán)節(jié)，這個(gè)環(huán)節(jié)中可以向面試官展示出你之前深入研究過哪一塊的技術(shù)，指引他往那個(gè)方向問，另一個(gè)是技術(shù)細(xì)節(jié)的提問，可以在回答的時(shí)候適當(dāng)發(fā)揮，大部分面試官是愿意聽你展開的。

最后

暫時(shí)先分享這么多吧，希望大家都能在春招當(dāng)中拿到自己滿意的 offer。