2019屆網易雲音樂前端實習生電面心得

阿新 • • 發佈：2018-12-31

電面進行了38分鐘，雖然總的來說回答的並不是很好，但是也初步瞭解了一線技術崗對前端崗位的需求和要求，收穫很大。
之前學習前端的心一直飄來飄去，沒有靜下來學習基礎知識和深入理解原理，只停留在對工具框架的使用學習上

面試的心得一句話來說就是基礎很重要，
比喻說來就是，我去應聘車廠的員工，面試官會比較關心汽車零部件的型號大小和使用和維修方法勝過對駕駛技巧的考核。
這可能是從針對本科生的角度來考核，如果是社會招聘可能除了基礎要紮實，可能對於一些框架的使用和理解也要有一定深度吧

第一次面試因為基礎不牢，只答對了很少的題目，但是面試官很Nice，說沒關係，繼續引導和提問下一個方面的問題。雖然最後沒有告訴我名字，但還是十分感謝！
知乎程墨老師在live裡說過面試的英文是interview，重點是inter，互動是雙方的，心態很重要，和麵試官的地位也是平等的，會什麼就說什麼，要不卑不亢。

會我就說，不會我就學，下次再來不是嗎?

自我介紹

blabla簡要介紹自己的姓名學校專業，專案經歷和學習過程，介紹的可以不必太細，但是亮點可以著重介紹，引導面試官接下來提問，

專案經歷

小程式

雖然寫在了專案的第一個，但是面試官一句話都沒問，可能是網易雲對小程式方面沒有業務需求，或者說實現的原理較為簡單，就沒有考核

J2EE選課系統

這是你一個人做的嗎？

這是你的課程設計嗎？

為什麼用jsp做前端？

偏向於後臺對嗎？

可能對後臺方面的考核不是重點，專案也沒什麼亮點，問完這個問題，面試官就過了

js遊戲引擎

是使用還是自己開發？

談一下印象比較深刻的技術嗎？

談到Game Loop面試管還是很感興趣的，但是可惜自己沒有深入研究

Game Loop實現方法

通過函式控制

initialize();
while(game running) {
    input();
    update();
    draw();
}

具體的實現方法

回答的不好..

var _runLoop = function() {
    if(mIsLoopRunning) {
        // stepA: set up for next call to _runLoop and update input 
!
        requestAnimationFrame( function() {_runLoop.call(mMyGame);});

        // stepB:compute elapsed time since last RunLoop was executed
        mCurrentTime = Date.now();
        mElapsedTime = mCurrentTime - mPreviousTime;
        mPreviousTime = mCurrentTime;
        mLagTime += mElapsedTime;

        // stepC:update the game the appropiate number of times.
        // update only every Milliseconds per frame.
        // if lag larger then update frames, update until caugth up.
        while((mLageTime >= kMPF) && mIsLoopRunning) {
            this.update();
            mLagTime -= KMPF;
        }

        // stepD:now let's draw
        this.draw(); // call MyGame.draw()

    }
}

canvas表現動態效果的原因

getContext()控制canvas

方法應該是隻能呼叫一次的呀，為什麼能夠實現動態變化呢？

通過update函式進行定時重新整理

具體的函式方法能介紹一下嗎？類似setTimeOut()和setInterval()的一個函式

getContext()引數的取值

“2d”, 導致建立一個 CanvasRenderingContext2D 物件代表一個二維渲染上下文。

“webgl” (或”experimental-webgl”) 這將建立一個 WebGLRenderingContext 代表三維渲染上下文物件。這種情況下只能在瀏覽器實現WebGL 版本1(OpenGL ES 2.0)。

“webgl2” (或 “experimental-webgl2”) 這將建立一個 WebGL2RenderingContext 代表三維渲染上下文物件。這種情況下只能在瀏覽器實現 WebGL 版本2 (OpenGL ES 3.0)。

“bitmaprenderer” 這將建立一個 ImageBitmapRenderingContext 只提供功能去替換指定 canvas 的ImageBitmap內容

在你們這個專案中使用的是那種型別的引數呢？

webgl

canvas不支援webgl的替代支援的型別是那個？

遊戲開始載入過程器的執行邏輯？

資源管理的過程，保證遊戲流暢性

基礎部分

CSS

盒模型的組成

css中指的是那個部分

chorme 中的寬度屬性100px 指的是哪幾個部分？

box-sizing 屬性

content-box
這是由 CSS2.1 規定的寬度高度行為。
寬度和高度分別應用到元素的內容框。
在寬度和高度之外繪製元素的內邊距和邊框。
border-box
為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit
規定應從父元素繼承 box-sizing 屬性的值。

清除浮動的方法

父級DIV定義高度
結尾處加空標籤 clear:both;
父級DIV定義偽類:after
父級DIV overflow:hidden;
父級DIV overflow:auto;
父級DIV 一起浮動
父級DIV display:table
結尾br定義 clear:both;

clear:both是不是要在每一個清除浮動的元素上面都設定這個屬性呢？能不能通過偽類來做呢？

可以通過一個額外的類加在dom上

div:after

IE8 和非IE瀏覽器才支援:after,zoom屬性可以解決IE6，iE7的浮動問題

css中的動畫屬性

css瞭解不多，用過wx小程式的api

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

說來聽聽

真的不該給自己挖坑的…wx動畫的api是封裝的，沒有理解過原理

是用js做的動畫嗎

css中的單臂(?)變化，就是對元素進行平移和縮放操作的話

transform: none|transform-functions;

能列舉一下它的屬性嗎

translateX(x)
translateY(y)
…

能列舉幾個選擇器嗎

類，id,標籤，後代，子元素選擇器…

相鄰兄弟選擇器:
h1 + p {margin-top:50px;}

選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素

面試官：嗯嗯好好行…

知道啥是偽類選擇器不

用在a元素上的
link
visited
hover
active

那個優先順序高呢？

love & hate
Link–visited–hover–active

id 和類選擇器優先順序

有沒有辦法讓類選擇高於id選擇器？能不能解釋下？

當時沒想到..

!important 提升樣式規則的優先權

偽類和偽元素的概念

CSS 偽類用於向某些選擇器新增特殊的效果。
CSS 偽元素用於將特殊的效果新增到某些選擇器。

// 偽類
p>i:first-child { color: red; }
// 偽元素
p:first-leter { color: red; }

<p><i class="first-child">test</i></p>
<p>test</p>

偽類的效果可以通過新增一個實際的類來達到，而偽元素的效果則需要通過新增一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為偽元素的原因。

JS

document.querySelectorAll()用過嗎

沒有..

返回與指定的選擇器組匹配的文件中的元素列表 (使用深度優先的先序遍歷文件的節點)。返回的物件是 NodeList

刪除陣列第一個元素，用陣列的原生方法做到

array.splice(index,len,[item]):會改變原有資料
array.shift()
array.slice(start,end):不改變原有資料

咋麼用呢？作用是啥呢？

pipeOf方法..？

這個沒理解面試官的考點

jQuery()

each()方法怎麼用，引數是啥？

each() 方法規定為每個匹配元素規定執行的函式。

$(selector).each(function(index,element))

ES6

箭頭函式好處都有啥？

相當於匿名函式，簡化了函式定義
修復了this指向，簡化this繫結

更換方法的this物件

如果不支援bind()呢,就是bind函式的相容性知道嗎？

非同步請求你用的是jQuery封裝好的嗎？自己實現過嗎？

考察ajax的實現方法

啥時候表示非同步請求已經完成了呢？

xhr.readyState == 4 && xhr.status == 200

服務端資料如何轉換為json物件

JSON.stringify() (JSON -> 字串)
JSON.parse() (字串-> JSON)

當時不知道怎麼就說了個toJSON()方法…

那個物件有這個方法呢？

Date.toJSON()方法..

js中有哪些本地儲存的方法呢？

比如說cookie呢，類似的還有別的方法嗎？

localstorage , sessionStorage

cookie有了解過嗎？

怎麼樣使用localStorage設定一個值呢？

localStorage本身帶有方法有

　　新增鍵值對：localStorage.setItem(key,value)

　　獲取鍵值：localStorage.getItem(key)

　　刪除鍵值對：localStorage.removeItem(key)。

　　清除所有鍵值對：localStorage.clear()。

　　獲取localStorage的屬性名稱（鍵名稱）：localStorage.key(index)。
　　

如果讓你做一個彈窗的遮罩咋做

.modal {
    position:fixed:
    width:100%;
    height:100%;
    top:0px; //！！
    left:0px;  //!!
}
<div class="modal"></div>

這個div放在哪裡

我以為是問div相對文字流的位置，然後面試官是我其實想問的是在html程式碼裡，你把遮罩的html程式碼放在哪裡
我說開頭，我感覺這麼問可能是有優化空間，我問面試官，他說，我就隨便問問哈..幽默..

對於這個div還有別的設定嗎？

z-index設定層級

position:fixed相對於那裡定位

相對於瀏覽器的視窗

如果想讓它可以上下滾動呢？

position:absolute

position:fixed可以設定相對的物件嗎？

就是預設相對瀏覽器定位，有辦法改變這個行為嗎？

fixed相對父容器定位，不通過top和left等樣式,通過margin定位

Es6你用的比較溜的有哪些

箭頭函式，解構賦值, await async

await async 你是怎麼使用的呢？

用過promise嗎？

用過..(別挖坑了行嗎…)

promise有哪些狀態呢

等待（pending）、已完成（fulfilled）、已拒絕（rejected）

你能說一下怎麼建立一個promise呢

ES6的class新特性用過嗎?

可能面試官是想了解class基本語法，但是沒能回答出來

你平時是怎麼學習前端的呢？

可能是想了解學習路線和遇到問題時和解決問題的方法

平時技術選型是自己來定的，你是怎麼決定的呢？

比如說Angular像React等，你在專案立項的時候是如何來確定專案使用的技術呢？

多考慮一些呢？除了對它是否熟悉之外？有沒有別的考慮？

面試官可能想了解對框架的理解深度，回答的不是很好..

你有什麼想問的嗎？

您的筆名或者名字方便透露嗎？

不太方便hhh..

JD中類React框架的使用場景？

專案組的技術棧和技術人員比例？

由於雲音樂立項早，大部分用的是NEJ，已經有一些不太適合新的專案的開發，逐漸用React來取代原來的NEJ，所以對React有一些要求，最好能夠熟悉，如果不瞭解也沒關係

前端 * 1.5 ~ 2.0 = 後臺

然後就是標準結局：有訊息再通知你吧

結語

基礎很重要，由於基礎不太好，不太瞭解面試官想考什麼，想讓我回答什麼，和這個知識引申出的其他知識點有啥…這導致沒辦法和麵試官做進一步的交流，也無法給面試官留下一個好的印象

不要小看大廠的面試官，如果覺得你不瞭解，會繼續問下去，所以最好避免給自己挖坑，當然這只是小事，重點還是需要提升自身的實力

並且對於專案來說一定要有亮點，或者說是對某一個知識點有自己的看法，可以和麵試官深入討論下去，引導面試官對你熟悉的東西進行提問，讓他了解你對這個知識的瞭解深度，避免讓面試官問你一些比較官方的內容來評價你的水平

嗯就這麼多，第一次參加面試雖然失利但是確實能靜下心來學習基礎的知識了，明年三月再戰。