前端常見面試題總結

HTML相關問題

1.H5新特性有哪些？

答：1.新增語意化標簽，

2.新增媒體元素，

3.新增用于繪畫的Canvas元素，

4.新增本地存盤方式，

5.新增webworker、websocket

6.新增表單控制元件，

2.如何理解HTML語意化？

答：1.代碼可讀性，更加能讓人讀懂，

2.更加能讓搜索引擎讀懂（SEO)，

3.如何理解塊級元素、行內元素？

答：塊級元素，獨占一行，行內元素，不是獨占一行，

CSS相關問題

1.盒模型寬度的計算？

答： offsetWidth = （內容寬度 + 內邊距 + 邊框） ，沒有外邊距，如果設定box-sizeing: border-box，寬度等于border-box，

2.margin重疊問題？

答：margin-top和margin-bottom會發生重疊問題，空p標簽也會發生重疊，

3.margin負值問題？

答：margin-top和margin-left 負值，元素向上、向左移動，

margin-bottom負值，元素自身不改變，下面元素向上移動，

margin-right負值，元素自身不改變，右邊元素向左移動，

4.BFC的理解與應用？

答：一塊獨立渲染的區域，內部元素的渲染不會影響外部邊界的元素，

在清除浮動會用到，

5.圣杯布局和雙飛翼布局？

答：1.都是使用float布局，

2.兩側都是使用margin的的負值，使得和中間的內容橫向重疊，

3.防止兩側被覆寫，一個使用padding，一個使用margin，

6.手寫清除浮動？

.clearfix:after { content:"";display:table;clear:both; }

7.flex布局-畫三個骰子，

答：

.container {
  /* 設定flex */
  display: flex; 
  /* 設定兩端對齊 */
  justify-content: space-between;
}

.item {
  /* 骰子樣式 */
}

.item:nth-child(2) {
   /* 第二項居中對齊 */
  align-self: center;
}

.item:nth-child(3) {
  /* 第三項末端對齊 */
  align-self: flex-end;
}

8.absolute 和 relative 定位？

答：relative 定位相對自身定位，

absolute相對最近一層定位元素定位，

9.垂直居中對齊的實作方式？

答：1.inlint 元素：inlint-height的值等于height值，

absolute元素：top：50% + margin-top 50%

absolute元素：transform(-50%,-50%)

absolute元素：top、left、right、bottom 都等于0，margin:auto;

10.水平居中對齊實作方式？

答：inlint 元素：text-align:center;

block元素：margin: auto;

absolute元素：left: 50%,margin-left負值，

11.line-height 如何繼承？

答：1.寫具體數值，如30px,則直接繼承該數值，

2.寫比例，如1，1.5，則直接繼承該比例，

3.寫百分比，如200%，則先算出百分比的值再繼承，

12.CSS常用的單位，

答：px，絕對長度值，最常用，

em，相對長度值，相對于父元素，不常用，

rem,相對長度值，相對于根元素，移動端回應式用到比較多，

vw和vh,相對長度值，相對于視口寬高比例，移動端回應式用到比較多，

瀏覽器相關問題

1.在瀏覽器輸入URL之后發生了什么？

答：1.輸入網址

2.快取決議

3.域名決議，決議到對應的ip地址

4.瀏覽器向服務器發送tcp連接，與瀏覽器建立tcp三次握手，

5.握手成功之后，瀏覽器向服務端發送http請求，請求資料包，

6.服務器處理接收到的請求，將資料回傳給瀏覽器，

7.瀏覽器接收到http回應，

8.讀取頁面內容，瀏覽器渲染，決議html代碼，

9.生成dom樹，決議css樣式，js互動，

10.客戶端與服務端互動，

11.ajax請求，

2.什么是回流與重繪？

答：1.回流，當瀏覽器發現頁面某個部分發生了點變化，影響到布局，需要倒過重新渲染，這個程序叫做回流，

2.重繪，當改變DOM元素的背景顏色邊框顏色，不會影響周圍或者內部布局的屬性時，有一部分要重畫，這一個程序叫做重繪，

3.什么是瀏覽器快取？

答：1.瀏覽器快取即http快取，將資料快取保存在瀏覽器，

2.服務端通過設定http請求頭來設定快取策略，將資源快取到本地瀏覽器，

HTTP協議

1.你http講到了TCP協議，你能講一下TCP三次握手嗎？

JS相關問題

1.JS資料型別有那些？

答：分兩種型別：

基礎型別：string、bumber、boolean、null、undefind、symbol、bigInt

參考型別：object、array、function、Date

2.什么是防抖？什么是節流？

答：相同點都需要設定一個回呼函式，和周期時間，

區別在于：節流：頻繁觸發函式只會定時執行一次，類似于技能冷卻，

防抖：在于頻繁觸發函式都會重新設定定時器，定時器結束完執行一次，

3.this的概念？如何改變this，

答： this就是一個函式的內部物件，我們通常使用bind、apply、call 方法來改變this指向，

4.你知道事件回圈中有兩種任務嗎？分別講講

答：宏任務和微任務，

宏任務：整體代碼塊、setInterval、setTimeout、異步請求，

微任務：new Promise().then、MutationOvserver，

5.為什么有事件回圈？

答：因為JavaScript是單執行緒的，同一時間只能做一件事，而JavaScript中又存在異步http請求，定時器，事件觸發，我們如何知道異步請求什么時候執行完？這時候我們就需要瀏覽器的幫助了，瀏覽器是多執行緒的，可以把這些異步或者事件觸發，定時器回呼放到一個任務佇列中，等待JavaScript的呼叫，JavaScript回圈的從任務佇列中呼叫，這個程序就叫做事件回圈，

6.為什么要有微任務？只有宏任務可以嗎？

答：宏任務秉行著先進先出的概念，但是如果有一些優先級更高的任務時候，我們就需要用到微任務，

7.var 、let 、const有什么區別？

答：1.宣告和賦值：var 和let可以允許先宣告后賦值；const不允許，它宣告變數時必須同時初始化變數，

2.修改變數：var和let允許修改變數的值和型別；const不允許，如果const是參考型別，這是時候不能更改變數的參考，但是可以修改物件內部的屬性，

3.變數宣告提升：var會宣告提升，相當于在函式頂部宣告了變數，const和let不會，

4.重復宣告：var可以重復宣告，const和let不會，

5.宣告作用域：var是函式作用域后者全域作用域，const和let是塊級作用域，

6.全域宣告：var如果在全域作用域中宣告的變數會成為window物件的屬性；let和const不會，

8.什么函式作用域、塊級作用域、全域作用域，詞法作用域？

答：作用域是指，可以訪問變數，函式，物件的集合，

函式作用域：只能在函式體訪問，函式體外不可訪問，

塊級作用域：是指一個代碼段,之外是不可見的，（就是一對大括號{...}包裹的一段代碼）

全域作用域：是指script標簽之中單獨的js代碼都是全域作用域，

詞法作用域：是指在定義他們的作用域之中運行，而不是呼叫方法的作用域運行，

Vue.js 基礎問題

1.v-if 和v-show區別？

答：v-if 控制DOM節點加載和銷毀，
v-show 控制DOM的樣式顯示還是隱藏，

2.什么情況下使用v-if 和v-show?

答：一次性渲染DOM或者不頻繁切換顯示隱藏使用v-if，
頻繁切換顯示隱藏DOM使用v-show，性能更加好，

3.如何遍歷物件?

答：Vue中，陣列和物件都可以用v-for進行遍歷，

4.Key的重要性？

答：key 的作用是為了在 diff 演算法執行時更快的找到對應的DOM節點，優化diff演算法渲染次數，提升渲染性能，如果使用index沒有意義，

5.v-for 和 v-if能不能一起使用？

答：不建議一起使用，v-for 的運算優先級高于v-if，渲染出來每一條資料都進行v-if 進行判斷，影響性能，建議在v-for 的父級進行判斷，

6.雙向系結v-model實作原理？

答：input元素的value 值系結this.name 變數，然后input事件會賦值this.name = $event.target.value ，data更新之后觸發渲染，

7.對MVVM的理解，

答：分別對應三者，Model 、View 、ViewModel，

Model：代表資料模型，資料和業務邏輯都在Model層定義，

View：代表UI視圖，負責資料的展示，

ViewModel：就是界面（View）對應的資料，因為資料庫結構往往不能直接跟界面控制元件一一對應的，所以需要定義一個資料物件專門對應View上控制元件，而ViewModel的作用就是吧model物件封裝成可以顯示和接收輸入的界面上的資料，

8.computed有什么特點？

答：快取，data不變不會重新計算，提高性能，

9.computed 和watch有什么區別？

答： computed 是一個計算屬性，根據依賴的資料計算新的結果，并且設定有快取，

watch 更像一個data里面資料的監聽回呼，當依賴的data的屬性值變動時觸發回呼，

Vue.js 組件問題

1.props和$emit 作用？

答： 父子組件通訊方式之一，props用于父組件傳遞引數給子組件，$emit用于子組件內呼叫父組件方法，

2.什么是自定義事件？

答：Vue實體物件 $on自定義事件，引入同樣Vue實體物件 $emit 觸發自定義事件，只要不直是父子組件，都可以直接互相呼叫，

3.Vue生命周期（單個組件）

答：三個階段，

掛載階段：beforeCreate => created => beforeMount => mounted

更新階段：beforeUpdate => updated

銷毀階段：beforeDestroy => destroyed

4.Vue生命周期（ 父子組件）

答：也是三個階段，

掛載階段：父beforeCreate => 父created =>子beforeCreate =>子created => 子beforeMount => 子mounted => 父beforeMount => 父mounted

更新階段：父beforeUpdate => 子beforeUpdate => 子updated => 父updated

銷毀階段：父beforeDestroy => 子beforeDestroy => 子destroyed => 父destroyed

Vue高級特性

1.$nextTick有什么作用？

答：Vue是異步渲染的，在data改變之后不會立即渲染DOM，而$nextTick的作用就是在DOM渲染完成之后觸發，以便拿到最新的DOM節點，

2.Vue如何異步加載組件?

答：使用import()函式，異步加載，按需加載大組件，

3.什么時候使用keep-alive？

答：是快取組件用的，需要頻繁切換，不要重復渲染的組件，

4.mixin的作用是什么？

答： 抽離多個組件中共同的業務邏輯，方便復用，

5.mixin 有什么問題？

答： 1.變數名來源不明確，不方便閱讀，

2.多個mixin可能造成命名沖突，

3.mixin 和組件可能出現多對多的關系，復雜度較高，

6.React 和 Vue 區別？

答：相同點：都是資料驅動視圖，

不同點：當資料改變時，React是以組為根目錄，默認全部渲染，Vue是自動找到參考組件重新渲染，

7.你是如何優化Vue專案的？

答：編碼階段：1.盡量減少data中的資料，data中的資料都會增加getter和setter，會對應的資料監聽，

2.圖片懶加載，

3.key保證唯一，

4.長串列滾動到可視區域動態加載，

5.防抖、節流，

6.異步組件，路由懶加載，

7.第三方模塊按需引入，

打包階段：1.第三方模塊，cdn引入，

2.壓縮代碼，

3.配置url-loader，圖片轉base64，減少http請求，

4.多執行緒打包配置happypack，

5.圖片壓縮，

6.代碼分割，

8.Vue.use 有什么作用？

答：Vue.use 是用來使用插件的，插件本質就是一個install 方法，install方法內部實作的了什么邏輯就由插件自身的業務實作了，

Webpack相關問題

1.plugin和loader區別？

答：loader是使webpack擁有決議非js檔案的一個能力

plugin 可以擴展webpack的功能，使得webpack更加靈活，可以在構建的程序中通過Webpack的API改變輸出內容，

Axios 相關問題

1.Axios 的原理是什么？

答： 1.首先axios可以在瀏覽器環境和node環境使用的，

2.瀏覽器是用通過XMLHttpRequests實作axios，node是通過內置http模塊實作axios，

3.都是通過promise 物件對結果進行處理，

2.Axios 取消請求原理是什么？

答：Axios是通過CancelToken方法取消請求的,原生是通過XMLHttpRequest 物件的abort方法進行取消的，