社招中級前端筆試面試題總結

記錄本人在廣州面試中遇到的一些問題（主要是技術一面），公司中小企業居多，也有大廠（非BAT）。崗位通常寫的中級前端開發或1～3年經驗崗位。問題主要選取一些高頻和基礎的問題。（問題的回答只是本人的理解，非參考答案，有些答案只給個提示，詳解可谷歌百度或在掘金內搜索相關文章）html

題目

考察頻率指相關問題的考察頻率，並不是只是提到的點。

JavaScript基礎

一、聲明提高類問題（考察頻率：高）前端

變量聲明和函數聲明都會提高，但函數會提高到變量前。具體解釋可參考《你不知道的JavaScript（上卷）》vue

二、js存儲方式（考察頻率：中）node

cookie
sessionStorage
localStorage
indexedDB

三、什麼狀況下會遇到跨域，怎麼解決？（考察頻率：高）nginx

同源策略是瀏覽器的一個安全功能，不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方資源。若地址裏面的協議、域名和端口號均相同則屬於同源。
jsonp跨域、nginx反向代理、node.js中間件代理跨域、後端設置http header、後端在服務器上設置cors。

四、Promise中的執行順序（考察頻率：高）es6

參考阮一峯老師書中的例子面試

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved
複製代碼

上面代碼中，Promise 新建後當即執行，因此首先輸出的是Promise。而後，then方法指定的回調函數，將在當前腳本全部同步任務執行完纔會執行，因此resolved最後輸出。vuex

五、JavaScript事件循環機制相關問題（考察頻率：高）json

事件循環機制的概念

關鍵字：單線程非阻塞、執行棧、事件隊列、宏任務(setTimeout()、setInterval())、微任務(new Promise())segmentfault

可參考： zhuanlan.zhihu.com/p/33058983

宏任務、微任務、同步任務的執行順序

setTimeout(function () {
    console.log(1);
});

new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})
console.log(4);
// 2
// 4
// 3
// 1
複製代碼

先按順序執行同步任務，Promise新建後當即執行輸出2，接着輸出4，異步任務等同步任務執行完後執行，且同一次事件循環中，微任務永遠在宏任務以前執行。這時候執行棧空了，執行事件隊列，先取出微任務，輸出3，最後取出一個宏任務，輸出1。

六、for循環中的做用域問題（考察頻率：高）

寫出如下代碼輸出值，嘗試用es5和es6的方式進行改進輸出循環中的i值。

for (var i=1; i<=5; i++) { 
    setTimeout(function timer() { 
       console.log(i); 
    }, i*1000); 
}
複製代碼

輸出5個6，由於回調函數在for循環以後執行，全部函數共享一個i的引用。
es5:

for (var i=1; i<=5; i++) { 
    (function(j) { 
        setTimeout(function timer() { 
            console.log(j); 
        }, j*1000); 
    })(i); 
}

複製代碼

es6:

for (let i=1; i<=5; i++) { 
    setTimeout(function timer() { 
        console.log(i);
    }, i*1000); 
}

複製代碼

七、閉包的做用（考察頻率：中）

閉包的目的是外部函數能夠訪問內部函數的做用域（局部做用域）。好比訪問到內部做用域的變量。

八、原型及原型鏈（考察頻率：中）

參考小冊《Web 前端面試指南與高頻考題解析》

原型的理解

全部的引用類型（數組、對象、函數），都具備對象特性，便可自由擴展屬性（null除外）
全部的引用類型（數組、對象、函數），都有一個__proto__屬性，屬性值是一個普通的對象
全部的函數，都有一個prototype屬性，屬性值也是一個普通的對象
全部的引用類型（數組、對象、函數），__proto__屬性值指向它的構造函數的prototype屬性值

原型鏈的理解

一段代碼以下：

// 構造函數
function Foo(name, age) {
    this.name = name
}
Foo.prototype.alertName = function () {
    alert(this.name)
}
// 建立示例
var f = new Foo('zhangsan')
f.printName = function () {
    console.log(this.name)
}
// 測試
f.printName()
f.alertName()
f.toString()
複製代碼

由於f自己沒有toString()，而且f.__proto__（即Foo.prototype）中也沒有toString。當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的__proto__（即它的構造函數的prototype）中尋找。

若是在f.__proto__中沒有找到toString，那麼就繼續去f.__proto__.__proto__中尋找，由於f.__proto__就是一個普通的對象而已嘛！

f.__proto__即Foo.prototype，沒有找到toString，繼續往上找 f.__proto__.__proto__即Foo.prototype.__proto__。Foo.prototype就是一個普通的對象，所以Foo.prototype.__proto__就是Object.prototype，在這裏能夠找到toString。所以f.toString最終對應到了Object.prototype.toString 這樣一直往上找，你會發現是一個鏈式的結構，因此叫作「原型鏈」。若是一直找到最上層都沒有找到，那麼就宣告失敗，返回undefined。最上層是什麼 —— Object.prototype.__proto__ === null

九、重繪和迴流（考察頻率：中）

重繪：當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並從新繪製它，這個過程稱爲重繪。
迴流：當Render Tree（DOM）中部分或所有元素的尺寸、結構、或某些屬性發生改變時，瀏覽器從新渲染部分或所有文檔的過程稱爲迴流。
迴流要比重繪消耗性能開支更大。
迴流必將引發重繪，重繪不必定會引發迴流。
參考：juejin.cn/post/684490…

十、實現一個深拷貝（思路）（考察頻率：中）
對象中可能又存在對象，因此須要深拷貝。首先須要知道這是一個遞歸調用，而後要判斷一些特殊類型（數組，正則對象，函數）進行具體的操做，能夠經過Object.prototype.toString.call(obj)進行判斷。

參考：juejin.cn/post/684490…

十一、js浮點數運算精度問題（0.1+0.2!==0.3）
好比在 JavaScript 中計算 0.1 + 0.2時，到底發生了什麼呢？

首先，十進制的0.1和0.2都會被轉換成二進制，但因爲浮點數用二進制表達時是無窮的，例如。

JavaScript 代碼:
0.1 -> 0.0001100110011001...(無限)
0.2 -> 0.0011001100110011...(無限)
IEEE 754 標準的 64 位雙精度浮點數的小數部分最多支持 53 位二進制位，因此二者相加以後獲得二進制爲：

JavaScript 代碼: 0.0100110011001100110011001100110011001100110011001100
因浮點數小數位的限制而截斷的二進制數字，再轉換爲十進制，就成了 0.30000000000000004。因此在進行算術計算時會產生偏差。
參考：blog.csdn.net/helloxiaoli…

瀏覽器相關

十二、瀏覽器從加載到渲染的過程，好比輸入一個網址到顯示頁面的過程。（考察頻率:高）

加載過程：

瀏覽器根據 DNS 服務器解析獲得域名的 IP 地址
向這個 IP 的機器發送 HTTP 請求
服務器收到、處理並返回 HTTP 請求
瀏覽器獲得返回內容

渲染過程：

根據 HTML 結構生成 DOM 樹
根據 CSS 生成 CSSOM
將 DOM 和 CSSOM 整合造成 RenderTree
根據 RenderTree 開始渲染和展現
遇到<script>時，會執行並阻塞渲染

1三、瀏覽器緩存機制（策略）（考察頻率：中）

參考：segmentfault.com/a/119000000…

1四、性能優化（考察頻率：中）

參考小冊《Web 前端面試指南與高頻考題解析》

優化的方向有兩個：

減小頁面體積，提高網絡加載
優化頁面渲染

減小頁面體積，提高網絡加載

靜態資源的壓縮合並（JS 代碼壓縮合並、CSS 代碼壓縮合並、雪碧圖）
靜態資源緩存（資源名稱加 MD5 戳）
使用 CDN 讓資源加載更快

優化頁面渲染

CSS 放前面，JS 放後面
懶加載（圖片懶加載、下拉加載更多）
減小DOM 查詢，對 DOM 查詢作緩存
減小DOM 操做，多個操做盡可能合併在一塊兒執行（DocumentFragment）
事件節流
儘早執行操做（DOMContentLoaded）
使用 SSR 後端渲染，數據直接輸出到 HTML 中，減小瀏覽器使用 JS - 模板渲染頁面 HTML 的時間

Vue

1五、組件通訊方式（考察頻率：高）

1)父->子

props(v-bind)
$refs

2)子->父

events(v-on)
$parent $root

3)非父子組件

event bus
vuex

1六、雙向綁定原理（考察頻率：高）

網上各類文章不少，原理能夠講淺也能夠講深，看面試官本身的瞭解程度和他想考察的深度。最基本的要講清楚數據劫持Object.defineProperty(), 講清楚依賴收集（Watcher、Dep）。

參考：一、 juejin.cn/post/684490…
二、juejin.cn/post/684490…

1七、路由導航鉤子（導航守衛）（考察頻率：中）

全局鉤子
路由獨享鉤子
組件內鉤子

看文檔：router.vuejs.org/zh-cn/advan…

1八、v-if和v-show的共同點和區別（考察頻率：中）
參考官方文檔

都是用來作條件渲染，經過條件控制元素的顯示與隱藏。

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

總結

面試第一看眼緣，其次看實力，面試官以爲你自信，跟公司的崗位匹配，就會推薦你。