2018-2020前端面試題合集

2018-2020年web前端面試題整理成 PDF文檔，內容主要包括有 html、css、JavaScript、DOM、HTTP、Vue、等等

2018面試題：

Html

1，html語義化

2，meta viewport相關

3，canvas 相關

CSS

1，盒模型

1.1，ie盒模型算上border、padding及自身（不算margin），標準的只算上自身窗體的大小 css設置方法

1.2，幾種得到寬高的方式

1.3，拓展 各類得到寬高的方式

1.4，邊距重疊解決方案(BFC) BFC原理

2，css reset 和 normalize.css 有什麼區別

3，居中方法

3.1，水平方向上

3.2，垂直居中

3.3，垂直水平居中根據上方結合

4，css優先級肯定

5，如何清除浮動

6，自適應佈局

7，畫三角形

8，link @import導入css

9，animation

10，長寬比方案

11，display相關

JavaScript

1， ["1", "2", "3"].map(parseInt)

2， [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)]

4， [typeof null, null instanceof Object]

5， js數據類型

6，promise 用法

7，es6 promise ajax

8，閉包

9，什麼是當即執行函數？使用當即執行函數的目的是什麼？

10，async/await 語法

11，深淺拷貝

12，數組去重

13，正則實現trim()功能

14，JS原型

15，es6 class

16，JS 如何實現繼承

17，手寫jquery插件

18，數組合並去重排序

19，call apply

20，for 中setTimeOut

21，sort函數

22，navigator

23，jquery綁定方式

24，事件流向

25，原生操做class

DOM

1，dom事件模型,

2，移動端觸摸事件

3，事件委託

HTTP

1，常見狀態碼

2，緩存

3，Cache-Control 和 Etag 的區別

4，Cookie sessionStorage localStorage

5，GET POST區別,

6，請求行，請求頭，請求體詳解

7，跨域、JSONP 、CORS、postMessage

8，osi模型

9，http2.0 http1

Vue

1，生命週期順序

2，組件通訊

3，Vuex

4，VueRouter,

5，Vue雙向綁定

6，computed watch methods

算法

1，各類排序實現

2，二分查找

3，二叉樹相關

網絡安全相關

1，XSS CSRF

webpack相關

1，打包體積 優化思路

2，Loader

3，plugins

有須要面試題文檔的能夠私信，免費領取！

2019面試題

HTTP、瀏覽器

1，瀏覽器存儲的方式有哪些

2，對先後端跨域能夠說一下嗎？如何解決跨域的？

3，瀏覽器 cookie 和 session 的認識。

4，輸入URL發生什麼？

5，瀏覽器渲染的步驟

6，頁面渲染優化

7，強制緩存和協商緩存

8，GET 和 POST 請求的區別

9，HTTP1.0 / 1.1 / 2.0 及HTTPS

10，介紹下304過程

11，HTTP 狀態碼

12，Web性能優化

CSS

1，盒模型

2，如何實現一個最大的正方形

3，一行水平居中，多行居左

4，水平垂直居中

5，兩欄佈局，左邊固定，右邊自適應，左右不重疊

6，如何實現左右等高佈局

7，畫三角形

8，link @import導入css

9，BFC理解

JS

1，判斷 js 類型的方式

2，ES5 和 ES6 分別幾種方式聲明變量

3，閉包的概念？優缺點？

4，淺拷貝和深拷貝

5，數組去重的方法

6，DOM 事件有哪些階段？談談對事件代理的理解

7，js 執行機制、事件循環

8，介紹下 promise.all

9，async 和 await,

10，ES6 的 class 和構造函數的區別

11，transform、translate、transition 分別是什麼屬性？CSS 中經常使用的實現動畫方式,

12，介紹一下rAF(requestAnimationFrame)

13，javascript 的垃圾回收機制講一下,

14，對前端性能優化有什麼瞭解？通常都經過那幾個方面去優化的？

Vue

1，Vue 雙向綁定原理,

2，描述下 vue 從初始化頁面--修改數據--刷新頁面 UI 的過程？,

3，你是如何理解 Vue 的響應式系統的?,

4，虛擬 DOM 實現原理,

5，既然 Vue 經過數據劫持能夠精準探測數據變化,爲何還須要虛擬 DOM 進行 diff 檢測差別?,

6，Vue 中 key 值的做用？

7，Vue 的生命週期,

8，Vue 組件間通訊有哪些方式?,

9，watch、methods 和 computed 的區別?

10，vue 中怎麼重置 data?,

11，組件中寫 name 選項有什麼做用？

12，vue-router 有哪些鉤子函數?

13，route 和 router 的區別是什麼？

14，說一下 Vue 和 React 的認識，作一個簡單的對比

（1）監聽數據變化的實現原理不一樣

（2）數據流的不一樣

（3）模板渲染方式的不一樣

15，Vue 的 nextTick 的原理是什麼？

（1）爲何須要 nextTick

（2）理解原理前的準備

（3）理解 nextTick

16，Vuex 有哪幾種屬性?

17，vue 首屏加載優化

18，Vue 3.0 有沒有過了解？

19，vue-cli 替咱們作了哪些工做？

有須要面試題文檔的能夠私信，免費領取！

2020面試題

HTML

1，html5有哪些新特性？

2，html5移除了那些元素？

3，如何處理HTML5新標籤的瀏覽器兼容問題？

4，如何區分 HTML 和 HTML5？

CSS

1，CSS 選擇符有哪些？

2，CSS哪些屬性能夠繼承？

3，優先級算法如何計算？

4， CSS3新增僞類有那些？

5，CSS3有哪些新特性？

6，解釋盒模型寬高值得計算方式，邊界塌陷，負值做用，box-sizing概念？

7，BFC（Block Formatting Context） 是什麼？應用？

8，如何實現瀏覽器內多個標籤頁之間的通訊?

9，簡要說一下CSS的元素分類

10，解釋下浮動和它的工做原理，清除浮動的方法？

11，CSS隱藏元素的幾種方法（至少說出三種）

12，如何讓一個盒子水平垂直居中？

JS

一、cookie、localStorage、sessionStorage的區別和使用？

二、如何實現瀏覽器多標籤頁之間的通訊？

三、JavaScript的typeof返回類型有哪些？

四、類型轉換

五、數組的方法

六、ajax請求時get和post的區別？

七、ajax請求時，如何解釋json數據？

八、call和apply的區別？

九、http經常使用狀態碼？

十、你有哪些性能優化的方法？

十一、深拷貝和淺拷貝

Vue

1，什麼是MVVM？

2，mvvm和mvc區別？它和其它框架（jquery）的區別是什麼？哪些場景適合？

3，vue的優勢是什麼？

4，組件之間的傳值？

5，路由之間跳轉

6，vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？

7，vue如何實現按需加載配合webpack設置

8，vuex

（1）vuex是什麼？怎麼使用？哪一種功能場景使用它？

（2）vuex有哪幾種屬性？

（3）不用Vuex會帶來什麼問題？

9， v-show和v-if指令的共同點和不一樣點

10， 如何讓CSS只在當前組件中起做用

11，<keep-alive></keep-alive>的做用是什麼?

12，Vue中引入組件的步驟?

13，指令v-el的做用是什麼?,

14，在Vue中使用插件的步驟

15，請列舉出3個Vue中經常使用的生命週期鉤子函數

16，active-class是哪一個組件的屬性？

17，怎麼定義vue-router的動態路由以及如何獲取傳過來的動態參數？

18，vue-router有哪幾種導航鉤子？

19，生命週期

（1）什麼是vue生命週期

（2）vue生命週期的做用是什麼

（3）vue生命週期總共有幾個階段

（4）第一次頁面加載會觸發哪幾個鉤子

（5）DOM 渲染在 哪一個週期中就已經完成

（6）簡單描述每一個週期具體適合哪些場景

20，說出至少4種vue當中的指令和它的用法？,

21，vue-loader是什麼？使用它的用途有哪些？

22，scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？,

23，爲何使用key？

24，爲何避免 v-if 和 v-for 用在一塊兒,

25，VNode是什麼？虛擬 DOM是什麼？