2018頭條春招前端實習生面試題目總結

LawrenceL發表於2018-04-22
前端面試題

下午去了頭條總部面試前端崗位，掛在二面...自己基礎還是有些差，在這裡總結一下兩輪面試的題目：

一輪面試

typeof實現的原理是什麼？

https://ecma262.docschina.org/#sec-typeof-operator https://stackoverflow.com/questions/45462182/transform-a-javascript-object-to-function-manually https://stackoverflow.com/questions/29353177/what-is-base-value-of-reference-in-ecmascriptecma-262-5-1

js繼承是如何實現的？原理是什麼？

解釋了一下js的原型鏈，但感覺表達的不夠清楚。發現心裡明白是一回事，說明白又是另一回事啊

給一個function A一個function B，A中有屬性手寫實現B繼承A。並做到儘可能優化的繼承實現

當時準備寫一下寄生組合式的繼承方式，不過手寫過程中貌似寫錯不少內容，手寫程式碼能力還是要提高。 寄生組合式繼承實現：

function inheritPrototype(SuperType, SubType) {
    var prototype = Object.create(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

function SuperType(props) {
    this.props = props;
}

function SubType(props) {
    SuperType.call(this, props);
}

inheritPrototype(SuperType, SubType);
複製程式碼

具體到A和B即A為SuperType，B為SubType。
另附Object.create()的實現，在傳入一個引數時Object.create()和下面的object()行為相同。(Object.create()可選傳入第二個引數，其中可以定義新物件的額外屬性，如Object.create(SuperType, {name: {value: 'Test'}})

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
}
複製程式碼

一個簡單的演算法題：求一個陣列中第K大的數字

手寫原生ajax請求

  1. 寫完後面試官在if (xhr.readyState == 4 && xhr.status == 200)的地方又提了很多狀態碼的問題，比如此處的status換成201可不可以
  2. 因為我直接寫了var xhr = new XMLHttpRequest()，沒有提供IE的相容，面試官又問了IE相容的問題。

比較完備的答案：

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        // 相容IE5和IE6
        return new ActiveXObject('Microsoft.XMLHttp');
    }
}

var xhr = createXHR();
xhr.onReadyStateChange = function() {
    if (xhr.readyState == 4) {
    // 狀態碼為200至300之間或304都表示這一請求已經成功
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText)
        } else {
            ...
        }
    }
}
// GET
xhr.open('GET', url);
xhr.send();

// POST
xhr.open('POST', url);
xhr.send(data);
複製程式碼

之後是面試官畫了一個草圖，要求用html和css進行實現，內容涉及到左側固定右側自適應、垂直居中等內容。草圖大概是這樣：

2018頭條春招前端實習生面試題目總結

平時寫程式碼的時候如何進行錯誤處理?

對react和虛擬DOM有了解嗎?

二輪面試

對html語義化有什麼瞭解嗎？有那些語義化的新標籤？

當時就答了一些語義化的標籤。總結一下：
語義化標籤即標籤本身的內容就能表示這個元素的意義給瀏覽者或者開發者。比如<div>和<span>就是沒有語義的元素。而<form>表示一個表單或者<table>表示表格就是語義化的標籤。
H5中提供了很多新的語義元素，比如：

  • <header> <nav> <aside> <footer>幾個標籤用來表示頁面的頭部、導航和側邊欄等不同部分。
  • <article>元素表示文件、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可複用的結構，如在釋出中，它可能是論壇帖子、雜誌或新聞文章、部落格、使用者提交的評論、互動式元件，或者其他獨立的內容專案。
  • <section>包含了一組內容及其標題。
  • <figure>規定獨立的流內容如影像圖表照片程式碼等，<figcaption>定義<figure>的標題。

看過哪些Bootstrap原始碼，Bootstrap有什麼特性？

這裡就說了一下Bootstrap柵格化系統的大概實現，說了一下Bootstrap的響應式。然後面試官又順帶問了Bootstrap如何實現的響應式，我說使用了css的@media。然後他又問我還有沒有什麼其他的特性當時沒想起來

對flex瞭解有多少？flex有哪些基本的屬性？

就答了一下基本的justify-content和align-items flex-direction等等

如何實現兩列等高佈局？

在問的過程中還問了height: 100%相關的問題

如何清除浮動？

這裡就打了使用clear: both，面試官說還有什麼別的方法嗎，說只有clear: both還不夠，沒有答上來。

原理：清除浮動主要的原理就是在浮動元素的父元素上建立塊格式化上下文（Block Formatting Context，BFC），一個BFC中所有的元素都會包含在其中包括浮動元素。很多方式都可以建立一個BFC，最常用的有以下幾個：

  1. display為flex inline-block inline-flex table-cell的元素
  2. overflow為visible之外的元素
  3. position為absolute或fixed的元素
  4. float為none之外的元素

所以只要在float元素的父元素上應用以上屬性即可在父元素上建立BFC以清除浮動。 另外，使用clear:both也可以清除浮動，最好的方法是在父元素上使用偽類:after新增這個用於清除浮動的元素，如：

.parent-box:after{
    clear: both;
    content: '';
    display: block;
}
複製程式碼

這裡的內容來自這篇文章的總結，寫的非常好推薦大家讀一讀

樣式權重的優先順序？

!important > 行內樣式 > id > class > tag 樣式的權重可以疊加
內容轉自:https://juejin.im/post/5a998991f265da237f1dbdf9

css中單位em和rem有什麼區別？

  • rem是相對於根的em，rem即root的em，相對於html根元素
  • em是相對長度單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。事實上，根據W3標準，em單位是相對於使用em單位的元素的字型大小。父元素的字型大小可以影響em值是因為繼承。
  • 總結：rem單位翻譯為畫素值是由html元素的字型大小決定的。此字型大小會被瀏覽器中字型大小的設定影響，除非顯式重寫一個具體單位。em單位轉為畫素值，取決於他們使用的字型大小。 此字型大小受從父元素繼承過來的字型大小，除非顯式重寫與一個具體單位。

這部分內容轉自: https://www.w3cplus.com/css/when-to-use-em-vs-rem.html © w3cplus.com

如何將文字超出元素的部分變成省略號（...）

如果實現單行文字溢位變成省略號，需要幾個css屬性結合使用：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
複製程式碼

多行則在webkit核心瀏覽器中可以得到比較滿意的效果，下面指定了顯示2行，多餘2行的部分顯示為省略號：

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
複製程式碼

手寫一個倒數計時頁面

  1. 這裡因為我用了var date = new Date()，所以面試官就又問了這個date的時間是什麼時間？是當前時區的事件還是電腦的時間還是什麼別的？這個沒答上。答案是如果沒有輸入任何引數，則Date的構造器會依據系統設定的當前時間來建立一個Date物件。
  2. 因為我本身用的setInterval()去實現倒數計時，裡面寫的是1000毫秒執行一次，所以面試官就又問了一下js任務佇列的內容，問我是不是瀏覽器能保證1000毫秒執行一次。我說由於任務佇列的關係主執行緒不一定能保證1000毫秒執行一次，他又問我有什麼優化方式嗎？我說可以使用requestAnimationFrame進行迴圈呼叫，這樣瀏覽器自身會進行優化，面試官又問我瀏覽器是怎麼優化的(真是一問到底)，這裡就答不上來了。

如何判斷一個變數是不是陣列？

js中instanceof是如何實現的？

使用過ES6哪些新特性，js的基本資料型別是哪些？ES6中有新的資料型別嗎？

我就答了箭頭函式、Map、Set等，面試官問了箭頭函式的特點。ES6中多了Symbol這個新的原始資料型別，以前沒怎麼使用過，沒有答上來。然後在提到Promise的時候問了Promise的問題：

Promise是如何實現的？能不能自己寫一個函式實現Promise？

以前沒有寫過，就大概自己寫了一個函式，結果面試官提出了我寫的程式碼的各種問題，總之就是寫的基本是錯的。。

http和https的區別？https的特點？

最常問的：從輸入url到網頁呈現的過程

這裡問到了傳送http請求和DNS查詢的順序先後問題。

DOM樹和渲染樹的載入先後？html、css、js的載入順序是什麼？(大概是這麼問的)

這裡除了載入順序還深入的問了比如DOM樹是完全載入完畢在進行css的渲染嗎？還是一邊進行DOM樹的構建一邊進行css的渲染？如果html中有一段js程式碼進行很長時間的迴圈會不會影響頁面的呈現？
這裡基本上被問倒了，因為沒仔細鑽研過載入順序的問題。總共的問題想起來的就這些，面完之後感覺自己的基礎還是不夠好，再就是面試時有些緊張，平時會的很多東西表達不出來。
希望對準備找前端崗位的大家有所幫助。

相關文章