（給前端大學(xué)加星標(biāo)，提升前端技能.）

作者：飄哥233
https://www.cnblogs.com/qianduanpiaoge/p/13857915.html

我是一名前端工程師，通俗地說(shuō)，就是一只程序猿。

雖然大學(xué)專業(yè)也的確是IT相關(guān)專業(yè)，但求學(xué)期間劃水四年，僥幸未掛科并順利畢業(yè)，找的第一份工作是軟件公司的銷售類職位，想著多少也算專業(yè)相關(guān)愉快入職，卻無(wú)論如何適應(yīng)不了酒桌上的觥籌交錯(cuò)，工作得痛苦不堪。某天一沖動(dòng)辭了職，然后因?yàn)橄乱徊經(jīng)]有方向開始了漫長(zhǎng)的失業(yè)生涯。

我已經(jīng)記不太清楚為什么自己當(dāng)時(shí)要選擇前端開發(fā)這一方向了。不過(guò)前端入門確實(shí)簡(jiǎn)單，不需要一點(diǎn)編程知識(shí)你就能做出一個(gè)漂亮的靜態(tài)頁(yè)面，甚至還能做出動(dòng)畫效果，總而言之，非常容易讓人有成就感。或許這就是原因吧。

學(xué)習(xí)了差不多半年，主要是看網(wǎng)上的視頻課程，買了一些學(xué)習(xí)前端的最新的書籍，刷了很多公司面試題，我開始找工作，然后發(fā)現(xiàn)崗位雖然不少，但邀請(qǐng)面試的少之又少。

轉(zhuǎn)行后的第一份工作

第一個(gè)面試機(jī)會(huì)來(lái)自一家初創(chuàng)公司，面試之前我緊張到胃不舒服。面試官直截了當(dāng)?shù)貑?wèn)我一天能做幾個(gè)頁(yè)面。我愣住了，回答從未測(cè)試過(guò)，所以不好說(shuō)，于是他現(xiàn)場(chǎng)讓我做了一個(gè)簡(jiǎn)單的頁(yè)面當(dāng)作測(cè)試，然后對(duì)速度表示大概滿意，隨即示意我通過(guò)了面試。

我對(duì)這樣的輕率感到大為吃驚，又了解到公司并沒(méi)有其他前端人員，思量之下還是拒絕了這個(gè)機(jī)會(huì)。

在面試我現(xiàn)在所在的這家公司的時(shí)候，總監(jiān)面試我的時(shí)候問(wèn)：“為什么之前一直自學(xué)，現(xiàn)在卻決定出來(lái)找工作？”

我回答：“因?yàn)闆](méi)錢了要過(guò)不下去了。”

后來(lái)公司老板面試我的時(shí)候，問(wèn)我：“有沒(méi)有自己學(xué)習(xí)能力不錯(cuò)的實(shí)際證明？”

我想半天回答剛剛總監(jiān)說(shuō)我學(xué)得還挺快的。

后來(lái)我把面試的過(guò)程講給同學(xué)聽的時(shí)候，他笑得前仰后合。不過(guò)好在這場(chǎng)面試的結(jié)局是好的——我順利入職啦。

在這家公司做了大概一年半之久，因?yàn)閭€(gè)人職業(yè)追求，這家公司無(wú)法提供自己專業(yè)和職業(yè)發(fā)展的條件，希望換一家公司，爭(zhēng)取到發(fā)展的條件。

這次和之前剛轉(zhuǎn)行找工作不一樣，投的都是一些大廠，希望自己以后有更好的發(fā)展，當(dāng)然了啦，大公司工資起點(diǎn)高，福利待遇好，這個(gè)是毋庸置疑的。

投了很多公司，字節(jié)跳動(dòng)算是比較心儀的公司，在面試前準(zhǔn)備了很久，刷了很多面試題，，可以說(shuō)準(zhǔn)備得十分充分了。

面經(jīng)部分

一面-70mins

屏幕正中間有個(gè)元素A, 隨著屏幕寬度的增加，
始終需要滿足以下條件：

A元素垂直居中于屏幕***；
A元素距離屏幕左右邊距各10px；
A元素里面的文字”A”的font-size:20px；水平垂直居中;
A元素的高度始終是A元素寬度的50%; (如果搞不定可以實(shí)現(xiàn)為A元素的高度固定為200px;)
請(qǐng)用 html及css 實(shí)現(xiàn)

函數(shù)中的 arguments 是數(shù)組嗎？若不是，如何將它轉(zhuǎn)化為真正的數(shù)組

請(qǐng)說(shuō)出以下代碼打印的結(jié)果

 if ([] == false) {console.log(1);};
 if ({} == false ) {console.log(2);};
 if ([]) {console.log(3);};
 if ([1] == [1]) {console.log(4);};

請(qǐng)說(shuō)出以下代碼打印的結(jié)果

 async function async1() {
 console.log('async1 start');
 await async2();
 console.log('async1 end');
 }
 async function async2() {
 console.log('async2');
 }
 console.log('script start');
 setTimeout(function () {
 console.log('setTimeout');
 }, 0);
 async1();
 new Promise(function (resolve) {
 console.log('promise1');
 resolve();
 }).then(function () {
 console.log('promise2');
 });
 console.log('script end');

實(shí)現(xiàn)ES5中Function原型的bind方法，使得以下程序最后能輸出'success'

 function Animal(name, color) {
  this.name = name;
  this.color = color;
 }
 Animal.prototype.say = function () {
  return `I'm a ${this.color} ${this.name}`;
 };
 const Cat = Animal.bind(null, 'cat');
 const cat = new Cat('white');
 if (cat.say() === 'I\'m a white cat' && cat instanceof Cat && cat instanceof Animal) {
  console.log('success');
 }

請(qǐng)用算法實(shí)現(xiàn)，從給定的無(wú)序、不重復(fù)的數(shù)組data中，取出n個(gè)數(shù)，使其相加和為sum。并給出算法的時(shí)間/空間復(fù)雜度。(不需要找到所有的解，找到一個(gè)解即可)

 function getResult(data, n, sum) {
 }

反問(wèn)環(huán)節(jié)

一面結(jié)束，第二天下午hr打電話約二面。

二面-45mins

代碼運(yùn)行結(jié)果

var a = function () { this.b = 3; }
var c = new a();
a.prototype.b = 9;
var b = 7;
a();
console.log(b);
console.log(c.b);

JS繼承如何實(shí)現(xiàn)
repeat 實(shí)現(xiàn)，使用JS實(shí)現(xiàn)一個(gè)repeat方法，調(diào)用這個(gè) repeatedFunc("hellworld")，會(huì)alert4次 helloworld, 每次間隔3秒

function repeat(func, times, wait) {
}
const repeatFunc = repeat(alert, 4, 3000)

代碼題 + 邏輯：給定一個(gè)整數(shù)數(shù)組，每個(gè)元素大小都在 1- 100 之間，對(duì)這個(gè)數(shù)組進(jìn)行排序。范圍擴(kuò)大到32位整數(shù)怎么辦？（可以敲代碼，也可以講思路）
hash表結(jié)構(gòu)，解決沖突的辦法，hash函數(shù)有什么類型
開放題：學(xué)數(shù)據(jù)結(jié)構(gòu)或者算法過(guò)程中，有沒(méi)有什么地方覺(jué)得很巧妙
反問(wèn)環(huán)節(jié)

二面結(jié)束，當(dāng)晚hr打電話約三面，那個(gè)激動(dòng)啊，終于過(guò)了二面了

三面-50mins

模式匹配，
1234567890 ->1,234,567,890（不是簡(jiǎn)單的JS函數(shù)，是使用正則做的，這邊踩坑了）
瀏覽器的緩存策略
跨域問(wèn)題
項(xiàng)目的技術(shù)難點(diǎn)（講了第一個(gè)‘難點(diǎn)’，大佬說(shuō)，這好像不是難點(diǎn)吧？）
JS如何性能監(jiān)測(cè)，如何監(jiān)測(cè)用戶頁(yè)面是否卡頓（不懂，強(qiáng)答，聊了一會(huì)大佬說(shuō)跳過(guò)這問(wèn)題吧）
解決hash沖突的辦法
數(shù)組和鏈表的區(qū)別
瀏覽器渲染過(guò)程
手頭offer情況
為什么選擇前端？
反問(wèn)環(huán)節(jié)

三面有感：前兩面都是做題 + 原理的面試情況，三面回歸了聊技術(shù)的方式。可能因?yàn)槭谴罄忻妫偢杏X(jué)壓力很大，一股自己涼了的感覺(jué)（可能是因?yàn)樘肆耍總€(gè)問(wèn)題面試都會(huì)一直追問(wèn)，問(wèn)到你答不出來(lái)為止才換問(wèn)題。三面總共有兩次被面試官說(shuō)“不聊這個(gè)了，我們換個(gè)話題吧”。

三面結(jié)束后，真的是慌得一批，復(fù)盤完感覺(jué)每個(gè)問(wèn)題面試官都不是很滿意，感覺(jué)涼了，焦急得等待結(jié)果。恰巧是周五，如果當(dāng)天等不到結(jié)果，那就可能要等到下一周了，果不其然當(dāng)天沒(méi)消息。

周六下午等不住了，發(fā)短息問(wèn)了hr。要特別感謝hr謝謝，非工作時(shí)間幫我查詢結(jié)果，告訴我通過(guò)了，第二天會(huì)聯(lián)系我。（內(nèi)心其實(shí)超級(jí)激動(dòng)）

總結(jié)

從轉(zhuǎn)行到現(xiàn)在，差不多兩年的時(shí)間，雖不能和大佬相比，但也是學(xué)了很多東西。我個(gè)人在學(xué)習(xí)的過(guò)程中，習(xí)慣簡(jiǎn)單做做筆記，方便自己復(fù)習(xí)的時(shí)候能夠快速理解，現(xiàn)在將自己的筆記分享出來(lái)，和大家共同學(xué)習(xí)。

個(gè)人將這段時(shí)間所學(xué)的知識(shí)，分為三個(gè)階段：

第一階段：HTML&CSS&JavaScript基礎(chǔ)

第二階段:移動(dòng)端開發(fā)技術(shù)

第三階段:前端常用框架

PS

推薦學(xué)習(xí)方式：針對(duì)某個(gè)知識(shí)點(diǎn)，可以先簡(jiǎn)單過(guò)一下我的筆記，如果理解，那是最好，可以幫助快速解決問(wèn)題；如果因?yàn)槲业墓P記太過(guò)簡(jiǎn)陋不理解，可以關(guān)注我以后我還會(huì)繼續(xù)分享。
大廠的面試難在，針對(duì)一個(gè)基礎(chǔ)知識(shí)點(diǎn)，比如JS的事件循環(huán)機(jī)制，不會(huì)上來(lái)就問(wèn)概念，而是換個(gè)角度，從題目入手，看你是否真正掌握。所以對(duì)于概念的理解真的很重要。

??愛(ài)心三連擊
點(diǎn)分享
點(diǎn)點(diǎn)贊
點(diǎn)在看

自學(xué)轉(zhuǎn)行成前端工程師，三面拿下字節(jié)跳動(dòng)offer