2018前端面試題集錦

時間 2019-11-21

標籤端面試題集錦简体版

原文原文鏈接

`就題目談答案不是目的，瞭解更深層次的東西纔是根本。不只要知道，還要答的漂亮。`

1.描述盒子模型。

2.兩個並列的display：inline-block的子元素之間的爲何有空隙。

答案很簡單，這些空隙就是空白符。
怎麼去掉這個空白符呢，就是把父元素的樣式設爲font-size:0;別忘了子元素本身也要設置字號，否則就會繼承父元素的字號變成0了。

3.舉幾個行內元素的例子。

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

4.cookie、localStorage、sessionStorage的區別。

Http cookie，一般叫作cookie，用於在客戶端存儲簡單的會話信息，長度不超過4095B，由名稱、值、域、路徑、失效時間、安全標誌組成。須要注意的是，除了名值對是在Request Headers中一塊兒發送給服務器的，其餘的只有Response Headers纔會有，是服務器給瀏覽器的指示。
sessionStorage對象用於存儲特定於某個會話的數據，瀏覽器關閉數據就會消失，他能夠跨越頁面刷新而存在。能夠用getItem(), setItem()， removeItem() 等去操做數據。
localStorage對象用於儲存持久的大量的客戶端數據，只有同域名同協議通端口的頁面才能夠訪問。

5.如何實現瀏覽器的跨tab通訊，就是兩個Tab頁面，在第一個裏面好比點擊了一下，而後另外一個Tab頁面會有相應的反應。

這個問題就是上面的客戶端存儲問題涉及到的一個用法，對sessionStorage和localStorage的操做會觸發storage事件，經過監聽這個事件就能夠知道其餘的同源的頁面對sessionStorage或者localStorage的操做。

6.css實現三角形，不是svg那些。

7.實現元素的垂直水平居中。

8.position定位的四種屬性，分別表示什麼。

9.如何解決移動端適配的問題。

10.js的基本數據類型有哪些，ES6新增了什麼？

基本數據類型：Undefined,Null,Boolean,Number,String,Symbol（ES6新增，一種數據類型，它的實例是惟一且不可改變的）；
引用數據類型：Object；
基本數據類型和引用數據類型的區別：在將一個值賦給變量時，解析器會去肯定這個值是基本類型值仍是引用類型值。基本數據類型是按值訪問，能夠操做保存在變量中的實際的值；而引用數據類型是保存在內存中的對象，JavaScript不容許直接訪問內存中的位置，也就是說不能直接操做對象的內存空間，在操做對象時，其實是在操做對象的引用而不是實際的對象，爲此，引用類型的值是按引用訪問的。引用是一個指向對象實際位置的指針。

11.跨域請求的方法，重點問了jsonp的實現原理。

12.如何按需加載js，就是知足某個條件就加載這段script，不須要就不加載。

舉個栗子吧：javascript

<body>
    <div onclick='loadjs()'>click me!</div>
    <div onclick='loadjs2()'>click me!</div>
</body>
<script>
    // 指望的狀態。
    function loadjs() {
        var script = document.createElement('script');
        script.src = '//cdn.bootcss.com/jquery/1.12.4/jquery.min.js';
        document.getElementsByTagName('html')[0].append(script);
    }
    // 對比。
    function loadjs2() {
        document.write('<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8" async defer><\/script>');
    }
</script>
複製代碼

13.bind、call、apply的區別及使用場景。

這一篇講的很簡潔明瞭

14.事件傳播會通過哪些階段。而後接着問，事件捕獲的原理是什麼，爲何綁定在父元素的事件，在子元素觸發。addEventListener第二個參數的默認值是什麼。

三個階段：事件捕獲階段、處於目標階段、事件冒泡階段。
當時說的是子元素從父元素那裏繼承了這個事件。
addEventListener的第二個參數是默認值是false，true表示在事件捕獲階段調用事件處理程序，false表示在事件冒泡階段調用事件處理程序。

15.描述什麼是原型鏈，prototype和proto的區別是什麼。

js中每一個對象都有一個私有屬性（稱之爲[[Prototype]]），它指向建立它的函數對象的原型對象（prototype）。
該 prototype 對象又具備一個本身的 prototype，層層向上直到一個對象的原型爲null。根據定義，null沒有原型，並做爲這個原型鏈中的最後一個環。其實原型鏈的頂端就是Object.prototype.proto,也即爲null。
[[Prototype]]就是主流瀏覽器所說的__proto__。

16.let、var的區別，一條考爛了的題。

for(var i = 0; i < 10; i ++) {
    setTimeout(function(){
        console.log(i);
    },0);
}
複製代碼

會輸出什麼，如何讓他輸出0-9呢，若是回答了把var換成let，緊接着會問，爲何換成let就能輸出0-9，原理是什麼。css

會輸出10。這裏會輸出10的緣由是，setTimeout是異步任務執行，會被加入到任務隊列中，等執行棧中的同步任務都執行完畢，任務隊列中的異步任務纔會被調用，這是影響因素之一；影響因素二就是var沒有塊級做用域，全部的i都指向同一個引用，而i的累加會先於異步任務執行，再次以前i已經變成了10；
這個使用let，每一次循環會生成獨立的執行環境，每個i指向不一樣的引用，因此最終打印出來就是不同的。

17.數組去重。

// Set
function unique(arr) {
    return [...new Set(array)];
}
複製代碼

算了，仍是看這個吧。html

18.編寫一個會被兩次調用的函數，如add(2)(3),結果是5。

function add(a) {
    return function(b) {
        return a + b;
    }
}
複製代碼

19.實現斐波那契數列。

// 遞歸實現，看上去比較優雅。
function Fib(n) { 
    return n < 2 ? n : (Fib(n - 1) + Fib(n - 2)); 
}
// for循環非遞歸實現
function fib(n) {
    if (n < 2) {
        return 1;
    }
    var a = 1, b = 1;
    for (var i = 2; i < n - 1; i++) {
        b = a + b;
        a = b - a;
    }
    return a + b;
}
複製代碼

20.實現一個求算術平方根的函數。

21.不使用循環實現數組元素的累加（遞歸和非遞歸兩種實現）。

22.ES6中的.repeat()方法的polyfill。

我猜那個題就是從這裏直接拿過來的！給的栗子都一毛同樣

23.返回數組中包含aa的元素['aaa','abc','bbc','dadadeq',['aaa','bbb','ccc',['aaa','bac','ccc','ewee',['aaa','asasa']]]，使得返回值爲['aaa','aaa','aaa','aaa']，差很少就這個意思，只不過裏面具體的元素不是這些。

24.vue的不一樣生命週期的函數鉤子?

// 源碼直接給出
export const LIFECYCLE_HOOKS = [
    'beforeCreate',
    'created',
    'beforeMount',
    'mounted',
    'beforeUpdate',
    'updated',
    'beforeDestroy',
    'destroyed',
    'activated',
    'deactivated',
    'errorCaptured'
]
複製代碼

25.瀏覽器性能優化。

參考這個吧，仍是那句話，有條理，適合答題，顯得專業。

26.控制緩存問題。

谷歌的這篇大概夠全面吧。
當時還說到jQuery的$.ajax的cache配置項設置也能夠控制此次的請求內容要不要緩存。

27.如何避免用戶看到未渲染完成的頁面。

這篇好，連前兩個問題都有說到。

28.如何解決移動端1px被渲染爲2px的問題。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 
  和 transform: scale(0.5) 來處理 
複製代碼

<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />
複製代碼

上面兩種是針對*2的屏，若是有*3的屏，0.5就會是0.3333333

//更加通用的方法
  var dpr = window.devicePixelRatio;
  meta.setAttribute('content', 'initial-scale=' + 1/dpr + ',maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ',user-scalable=no');
複製代碼

29.知道SEO嗎，用了vue或者react以後怎麼作SEO，問vue仍是react視簡歷而定，你寫的什麼你會用什麼，他就問什麼。

服務器端渲染的頁面作SEO的過程，在<meta><title>標籤裏面設置要設置合適的關鍵詞，關鍵詞在整個頁面裏面出現的概率爲5%-8%比較合適。
在根目錄建一個sitemap.xml
和其餘網站交換友鏈
若是使用了vue，尤大大也說了，用了vue也不必定要寫成SPA，若是不是SPA而是而是服務器端渲染的，那麼SEO仍是上面的，若是既想要SPA的強交互性又想要SEO，可使用SSR。

30.如何評價各類前端技術棧，好大的題目，怎麼回答，見仁見智了。

這個題我感受按照31的思路去說也是能夠的。

31.vue、react、jquery等的優劣對比。

這種題目單純的對比優劣能夠參考的帖子不少。
可是選擇什麼最終要服務於要實現什麼，選擇最適合本身網站的技術棧纔是根本，不妨從這個角度去談優劣對比更有說服力，畢竟所謂優劣更多都是相對而言的。
那就先從單頁面應用和多頁應用提及吧，參考
簡而言之，若是追求強交互性選擇SPA，若是對SEO要求比較高、交互性需求比較通常可使用MPA，若是無論怎麼樣既要交互性又要SEO，vue給出的解決方案就SSR。
而後從幾個角度去談具體的優劣：DOM操做、虛擬DOM、響應式、組件化、性能、學習成本等等方面分別談一談各有優劣。
而後說到SPA說到性能，可能會談的首屏加載太慢的問題，這算是本身給本身挖坑嗎，除了基本的CDN加速，壓縮靜態資源，按需引入組件，要麼就是服務器端渲染。
參考：Vue SPA 首屏加載優化實踐、vue、react、angular三大框架對比 && 與jQuery的對比

32.看你項目裏面jq用的挺多的，讀過源碼嗎？

我：沒有。前端

好了，今天的面試結束了，回去吧。vue

後來又是一場問到這個問題，我就回答了「稍微看了一點」，而後就問，那你對jq的架構設計或者底層原理知道什麼，說說看。java

emmm....，問的卻是一點都不客氣。react

33.這是一個比較personal的問題，一個聊天室，我用了ajax輪詢實現的消息的獲取，當時是侷限於後端不支持websocket，因此沒能使用這個更好的技術實現。因而此處引出兩個問題，1）ajax輪詢若是某一次請求的返回結果比較慢，甚至比後一次的返回結果還晚，如何避免由於這種延時形成消息顯示的混亂；2）瞭解過websocket嗎，若是用它要怎麼去實現？

websokcet的使用，我沒有用過，先貼一個websocket教程吧

34.通常你是怎麼寫babel配置文件的讓ES6的代碼可以兼容各類老的瀏覽器。

35.this做用域。

36.閉包確定少不了了。

37.如何解決點擊穿透問題。

touchstart 300ms以後會觸發click時間，在300ms以內，若是上面的一層已經消失，click就會做用到下面一層，若是下面一層剛好能夠點擊，就會發生點擊穿透。
解決方法，只用touch事件，若是全局沒有click事件，就不會觸發後續的click事件了。
只用click事件會致使任何交互都有300ms的延時，體驗不太好。
touch事件350ms以後再隱藏彈層，那麼click就不會觸發到下面的元素了。
這篇提供的其餘方法做爲參考吧

38.ios的scroll問題怎麼解決。

39.移動端適配若是使用rem的話，rem的根節點的font-size的值一般怎麼計算。

rem = document.documentElement.clientWidth * dpr / 10
除以10是爲了方便計算，其實能夠是任何值。
我的以爲這個只是一種約定俗成的辦法，也不是非這樣不可吧。
參考

40.列舉一些用到的css3的屬性，着重問了animation的使用方法。

41.ES6的箭頭函數與ES5的function除了this的不一樣點，還有什麼不一樣點。

箭頭函數不能夠看成構造函數。
箭頭函數不存在arguments對象。
不可使用yield命令，所以箭頭函數不能用做 Generator 函數。

42.Vue的響應式是經過什麼實現的。

Object.defineProperty

43.通常平時經過什麼途徑獲取前端的知識或者資訊。

44.列舉一個本身以爲比較滿意的項目，並說明作了哪些功能上的優化。

45.npm版本號通常有哪些寫法

emmm.....仍是看senmver吧

46.npm的script裏面通常寫些什麼。

參考

47.webpack的hash的用法

48.git若是某一次提交中有一個文件提交錯了，該如何操做。

git reset <文件名>

49.SPA首屏比較慢，能夠如何優化。

參照31

50.const定義的數組或者對象能夠改變嗎

數組和對象能夠改
const實際上保證的，並非變量的值不得改動，而是變量指向的那個內存地址不得改動。對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，所以等同於常量。但對於複合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指針，const只能保證這個指針是固定的，至於它指向的數據結構是否是可變的，就徹底不能控制了。

51.Objects和Maps的區別

一個對象一般都有本身的原型,因此一個對象總有一個"prototype"鍵。不過，從 ES5 開始可使用 map = Object.create(null) 來建立一個沒有原型的對象。
一個對象的鍵只能是字符串或者 Symbols，但一個 Map的鍵能夠是任意值。
能夠經過size屬性很容易地獲得一個Map的鍵值對個數，而對象的鍵值對個數只能手動確認。