- 相關(guān)推薦
前端hr面試常問(wèn)的問(wèn)題
面試是通過(guò)書(shū)面、面談或線(xiàn)上交流（視頻、電話(huà)）的形式來(lái)考察一個(gè)人的工作能力與綜合素質(zhì)，通過(guò)面試可以初步判斷應聘者是否可以融入自己的團隊。是一種經(jīng)過(guò)組織者精心策劃的招聘活動(dòng)。下面是小編收集整理的前端hr面試常問(wèn)的問(wèn)題，希望對大家有幫助！
前端hr面試常問(wèn)的問(wèn)題1
普通型
面試中問(wèn)題會(huì )比較的零碎，html/js/css肯定都會(huì )有涉及。知識點(diǎn)不會(huì )有太大的規律，可能幾個(gè)公司面試下來(lái)你遇到的問(wèn)題一個(gè)都不帶重復的。哎，前端的知識點(diǎn)就是乍一看深似海，仔細一看深似黑洞啊。問(wèn)題好的話(huà)，一方面考察了面試人對前端接觸的廣度，深度的話(huà)也可以從中接觸到一些。因為面試的時(shí)間有限，其實(shí)也非�？简灻嬖嚬賹σ粋�(gè)人的洞察能力。
一般如果不是應屆生的話(huà)，也就是會(huì )跟你交流你之前的項目，你擔當的角色，你遇到的難題，怎么解決問(wèn)題，用的框架，與其他工程師的交流溝通協(xié)作等等。 這些其實(shí)你心里肯定是有答案的`(可能也有懵逼的)，就看你的表達，能不能對上面試官的胃口。
進(jìn)階型
除了基本的問(wèn)題，面試中會(huì )有一些明顯設計過(guò)的題目。針對某幾個(gè)知識點(diǎn)，或讓你手寫(xiě)代碼，或讓你提供算法或思路。如果之前沒(méi)有遇到過(guò)這類(lèi)問(wèn)題的話(huà)其實(shí)一下子真的挺難回答，或者直接懵逼了，或者回答不出面試官滿(mǎn)意的答案。這其實(shí)對工程師的要求也是比較的高，不能只是單純的切切頁(yè)面，用用插件，需要對某一類(lèi)問(wèn)題或者模式或者算法有深入的了解，對問(wèn)題的解決思路有很好的把握。
算法可能不是前端工程師的長(cháng)項，但作為優(yōu)秀的工程師，對算法的了解應該會(huì )只深不淺。
這種面試的題目既提現了公司對面試者的要求，也相對而言的會(huì )有所體現公司的水平。
出題型
題目比較的綜合，會(huì )通過(guò)郵件發(fā)給你，或者有專(zhuān)門(mén)的頁(yè)面提供，在面試之前讓你2-3天的時(shí)間做完。題目可能是很有名的某一類(lèi)交互，或游戲，或頁(yè)面，或公司自己出的一類(lèi)小東西。
因為非當場(chǎng)面試，所有有比較充足的時(shí)間來(lái)思考，來(lái)寫(xiě)一些代碼。一般都會(huì )完成，所以其實(shí)比較的關(guān)注點(diǎn)就是對代碼的質(zhì)量，通過(guò)代碼來(lái)考察面試者的思路以及代碼習慣等等。
其未知性也比較多，可能因為有些東西可能沒(méi)法通過(guò)代碼來(lái)傳遞，溝通，其他的思路，或者題目的缺陷等等。所以這只是面試途中的一個(gè)小部分，大多數人其實(shí)都會(huì )能做的很好。
直接上機型
還有的就會(huì )直接給你某一個(gè)交互，或者一張靜態(tài)頁(yè)面，或者一個(gè)布局等等，直接給你臺電腦讓你當場(chǎng)寫(xiě)出來(lái)。寫(xiě)完之后再有所交流，說(shuō)說(shuō)自己的想法或者接著(zhù)談其他的。
當你寫(xiě)代碼時(shí)候，其實(shí)暴露的東西也挺多的。你寫(xiě)的習慣，思路清晰不清晰，對代碼的熟悉程度，可能你平時(shí)都是ctrl C + V的，這時(shí)候你咋辦呢。
這個(gè)可能遇到的比較少，但也會(huì )是有的。
結束語(yǔ)
許多面試可能都會(huì )結合以上的幾種類(lèi)型，多方面的考察面試者，其實(shí)，大家都懂的。
前端hr面試常問(wèn)的問(wèn)題2
1. 常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?
(Q1) 瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(Q2) 內核：Trident，Gecko，Presto，Webkit。
2. 說(shuō)下行內元素和塊級元素的區別？行內塊元素的兼容性使用？（IE8 以下）
(Q1) 行內元素：會(huì )在水平方向排列，不能包含塊級元素，設置width無(wú)效，height無(wú)效(可以設置line-height)，margin上下無(wú)效，padding上下無(wú)效。
塊級元素：各占據一行，垂直方向排列。從新行開(kāi)始結束接著(zhù)一個(gè)斷行。
(Q2) 兼容性：display:inline-block;display:inline;zoom:1;
3. 清除浮動(dòng)有哪些方式？比較好的方式是哪一種？
(Q1)
�。�1）父級div定義height。
�。�2）結尾處加空div標簽clear:both。
�。�3）父級div定義偽類(lèi):after和zoom。
�。�4）父級div定義overflow:hidden。
�。�5）父級div定義overflow:auto。
�。�6）父級div也浮動(dòng)，需要定義寬度。
�。�7）父級div定義display:table。
�。�8）結尾處加br標簽clear:both。
(Q2) 比較八好的是第3種方式，好多網(wǎng)站都這么用。
4. box-sizing常用的屬性有哪些？分別有什么作用？
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進(jìn)行繪制。通過(guò)從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
5. Doctype作用？標準模式與兼容模式各有什么區別?
(Q1) 告知瀏覽器的解析器用什么文檔標準解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì )導致文檔以兼容模式呈現。
(Q2) 標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
6. HTML5 為什么只需要寫(xiě) ？
HTML5不基于 SGML，因此不需要對DTD進(jìn)行引用，但是需要doctype來(lái)規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來(lái)運行）。
而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類(lèi)型。
7. 頁(yè)面導入樣式時(shí)，使用link和@import有什么區別？
�。�1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
�。�2）頁(yè)面被加載的時(shí)，link會(huì )同時(shí)被加載，而@import引用的CSS會(huì )等到頁(yè)面被加載完再加載;
�。�3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無(wú)兼容問(wèn)題。
8. 介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和js引擎。
渲染引擎：負責取得網(wǎng)頁(yè)的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁(yè)的顯示方式，然后會(huì )輸出至顯示器或打印機。
瀏覽器的內核的不同對于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì )有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶(hù)端以及其它需要編輯、顯示網(wǎng)絡(luò )內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來(lái)實(shí)現網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區分的很明確，后來(lái)JS引擎越來(lái)越獨立，內核就傾向于只指渲染引擎。
9. html5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問(wèn)題？如何區分 HTML 和 HTML5？
(Q1)
HTML5 現在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
(1)繪畫(huà) canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線(xiàn)存儲 localStorage 長(cháng)期存儲數據，瀏覽器關(guān)閉后數據不丟失;
(4)sessionStorage 的數據在瀏覽器關(guān)閉后自動(dòng)刪除;
(5)語(yǔ)意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim，
10. 簡(jiǎn)述一下你對HTML語(yǔ)義化的理解？
用正確的標簽做正確的事情。
html語(yǔ)義化讓頁(yè)面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲(chóng)也依賴(lài)于HTML標記來(lái)確定上下文和各個(gè)關(guān)鍵字的權重，利于seo;
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。
JavaScript
1. 介紹js的基本數據類(lèi)型
Undefined、Null、Boolean、Number、String
2. js有哪些內置對象？
數據封裝類(lèi)對象：Object、Array、Boolean、Number 和 String
其他對象：Function、Arguments、Math、Date、RegExp、Error
3. this對象的理解
this總是指向函數的直接調用者（而非間接調用者）；
如果有new關(guān)鍵字，this指向new出來(lái)的那個(gè)對象；
在事件中，this指向觸發(fā)這個(gè)事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。
4. eval是做什么的？
它的功能是把對應的字符串解析成JS代碼并運行；
應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執行）。
由JSON字符串轉換為JSON對象的時(shí)候可以用eval，var obj =eval('('+ str +')')。
5. DOM怎樣添加、移除、移動(dòng)、復制、創(chuàng )建和查找節點(diǎn)
// 創(chuàng )建新節點(diǎn)
createDocumentFragment() //創(chuàng )建一個(gè)DOM片段
createElement() //創(chuàng )建一個(gè)具體的元素
createTextNode() //創(chuàng )建一個(gè)文本節點(diǎn)
// 添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
Before() //在已有的子節點(diǎn)前插入一個(gè)新的子節點(diǎn)
// 查找
getElementsByTagName() //通過(guò)標簽名稱(chēng)
getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯能力較強，會(huì )得到一個(gè)數組，其中包括id等于name值的)
getElementById() //通過(guò)元素Id，唯一性
6. null和undefined的區別？
null是一個(gè)表示"無(wú)"的對象，轉為數值時(shí)為0；undefined是一個(gè)表示"無(wú)"的原始值，轉為數值時(shí)為NaN。
undefined：
�。�1）變量被聲明了，但沒(méi)有賦值時(shí)，就等于undefined。
�。�2) 調用函數時(shí)，應該提供的.參數沒(méi)有提供，該參數等于undefined。
�。�3）對象沒(méi)有賦值的屬性，該屬性的值為undefined。
�。�4）函數沒(méi)有返回值時(shí)，默認返回undefined。
null：
�。�1） 作為函數的參數，表示該函數的參數不是對象。
�。�2） 作為對象原型鏈的終點(diǎn)。
7. new操作符具體干了什么呢?
�。�1）創(chuàng )建一個(gè)空對象，并且 this 變量引用該對象，同時(shí)還繼承了該函數的原型。
�。�2）屬性和方法被加入到 this 引用的對象中。
�。�3）新創(chuàng )建的對象由 this 所引用，并且最后隱式的返回 this 。
8. JSON 的了解？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基于JavaScript的一個(gè)子集。數據格式簡(jiǎn)單, 易于讀寫(xiě), 占用帶寬小。
格式：采用鍵值對，例如：{'age':'12', 'name':'back'}
9. call() 和 apply() 的區別和作用？
apply()函數有兩個(gè)參數：第一個(gè)參數是上下文，第二個(gè)參數是參數組成的數組。如果上下文是null，則使用全局對象代替。
如：function.apply(this,[1,2,3]);
call()的第一個(gè)參數是上下文，后續是實(shí)例傳入的參數序列。
如：function.call(this,1,2,3);
10. 如何獲取UA？
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
其他
1. HTTP狀態(tài)碼知道哪些？
100 Continue 繼續，一般在發(fā)送post請求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認，之后發(fā)送具體參數信息
200 OK 正常返回信息
201 Created 請求成功并且服務(wù)器創(chuàng )建了新的資源
202 Accepted 服務(wù)器已接受請求，但尚未處理
301 Moved Permanently 請求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。
302 Found 臨時(shí)性重定向。
303 See Other 臨時(shí)性重定向，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求后，請求的網(wǎng)頁(yè)未修改過(guò)。
400 Bad Request 服務(wù)器無(wú)法理解請求的格式，客戶(hù)端不應當嘗試再次使用相同的內容發(fā)起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪(fǎng)問(wèn)。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見(jiàn)的服務(wù)器端錯誤。
503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請求（可能是過(guò)載或維護）。
2. 你有哪些性能優(yōu)化的方法？
�。�1） 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁(yè)Gzip，CDN托管，data緩存 ，圖片服務(wù)器。
�。�2） 前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存ajax請求結果，每次操作本地變量，不用請求，減少請求次數
�。�3） 用innerHTML代替DOM操作，減少DOM操作次數，優(yōu)化javascript性能。
�。�4） 當需要設置的樣式很多時(shí)設置className而不是直接操作style。
�。�5） 少用全局變量、緩存DOM節點(diǎn)查找的結果。減少I(mǎi)O讀取操作。
�。�6） 避免使用CSS Expression（css表達式)又稱(chēng)Dynamic properties(動(dòng)態(tài)屬性)。
�。�7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳。
3. 什么叫優(yōu)雅降級和漸進(jìn)增強？
優(yōu)雅降級：web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶(hù)使用的是老式瀏覽器，則代碼會(huì )檢查以確認它們是否能正常工作。
由于IE獨特的盒模型布局問(wèn)題，針對不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級了,為那些無(wú)法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。
漸進(jìn)增強：從被所有瀏覽器支持的基本功能開(kāi)始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無(wú)害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時(shí)，它們會(huì )自動(dòng)地呈現出來(lái)并發(fā)揮作用。
4. 哪些常見(jiàn)操作會(huì )造成內存泄漏？
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象，并計算引用了每個(gè)對象的其他對象的數量。如果一個(gè)對象的引用數量為 0（沒(méi)有其他對象引用過(guò)該對象），或對該對象的惟一引用是循環(huán)的，那么該對象的內存即可回收。
setTimeout 的第一個(gè)參數使用字符串而非函數的話(huà)，會(huì )引發(fā)內存泄漏。
閉包、控制臺日志、循環(huán)（在兩個(gè)對象彼此引用且彼此保留時(shí)，就會(huì )產(chǎn)生一個(gè)循環(huán)）。
5. 線(xiàn)程與進(jìn)程的區別
一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線(xiàn)程。
線(xiàn)程的劃分尺度小于進(jìn)程，使得多線(xiàn)程程序的并發(fā)性高。
另外，進(jìn)程在執行過(guò)程中擁有獨立的內存單元，而多個(gè)線(xiàn)程共享內存，從而極大地提高了程序的運行效率。
線(xiàn)程在執行過(guò)程中與進(jìn)程還是有區別的。每個(gè)獨立的線(xiàn)程有一個(gè)程序運行的入口、順序執行序列和程序的出口。但是線(xiàn)程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個(gè)線(xiàn)程執行控制。
從邏輯角度來(lái)看，多線(xiàn)程的意義在于一個(gè)應用程序中，有多個(gè)執行部分可以同時(shí)執行。但操作系統并沒(méi)有將多個(gè)線(xiàn)程看做多個(gè)獨立的應用，來(lái)實(shí)現進(jìn)程的調度和管理以及資源分配。這就是進(jìn)程和線(xiàn)程的重要區別。
【前端hr面試常問(wèn)的問(wèn)題】相關(guān)文章：
HR面試常問(wèn)的問(wèn)題05-27
hr面試常問(wèn)的問(wèn)題英語(yǔ)04-01