匯總了一些前端常見的面試題，

@目錄

一、HTML 篇
- 1. 簡述一下你對 HTML 語意化的理解？
- 2. 標簽上 title 與 alt 屬性的區別是什么？
- 3. iframe的優缺點？
- 4. href 與 src？
二、CSS 篇
- 1. 介紹一下 CSS 的盒子模型？
- 2. css 選擇器優先級？
- 3. 垂直居中幾種方式？
- 4. 簡明說一下 CSS link 與 @import 的區別和用法？
- 5. rgba和opacity的透明效果有什么不同？
- 6. display:none和visibility:hidden的區別？
- 7. position的值， relative和absolute分別是相對于誰進行定位的？
三、HTML / CSS 混合篇
- 1. HTML5、CSS3 里面都新增了那些新特性？
- 2. BFC 是什么？
- 3. 常見兼容性問題？
四、JS 篇
- 1. JS 資料型別 ?
- 2. 判斷一個值是什么型別有哪些方法？
- 3. null 和 undefined 的區別？
- 4. 怎么判斷一個變數arr的話是否為陣列（此題用 typeof 不行）？
- 5. “ ===”、“ ==”的區別？
- 6. “eval是做什么的？
- 7. 箭頭函式有哪些特點？
- 8. var、let、const 區別？
- 9. new運算子具體干了什么呢？
- 10. JSON 的了解？
- 11. documen.write 和 innerHTML 的區別？
- 12. ajax程序？
- 13. 請解釋一下 JavaScript 的同源策略？
- 14. 介紹一下閉包和閉包常用場景？
- 15. javascript的記憶體(垃圾)回識訓制？
- 16. JavaScript原型，原型鏈 ? 有什么特點？
五、Vue 篇
- 1. 談談你對MVVM開發模式的理解？
- 2. v-if 和 v-show 有什么區別？
- 3. 你使用過 Vuex 嗎？
- 4. 說說你對 SPA 單頁面的理解，它的優缺點分別是什么？
- 5. Class 與 Style 如何動態系結？
- 6. 怎樣理解 Vue 的單向資料流？
- 7. computed 和 watch 的區別和運用的場景？
- 8. 直接給一個陣列項賦值，Vue 能檢測到變化嗎？
- 9. 談談你對 Vue 生命周期的理解？
- 10. Vue 的父組件和子組件生命周期鉤子函式執行順序？
- 11. 父組件可以監聽到子組件的生命周期嗎？
- 12. 談談你對 keep-alive 的了解？
- 13. 組件中 data 為什么是一個函式？
- 14. v-model 的原理？
- 15. Vue 組件間通信有哪幾種方式？
- 16. 使用過 Vue SSR 嗎？說說 SSR？
- 17. vue-router 路由模式有幾種？
- 18. 能說下 vue-router 中常用的 hash 和 history 路由模式實作原理嗎？
- 19. Vue 框架怎么實作物件和陣列的監聽？
- 20. Vue 是如何實作資料雙向系結的？
- 21. Vue 怎么用 vm.$set() 解決物件新增屬性不能回應的問題？
- 22. 虛擬 DOM 的優缺點？
- 23. 虛擬 DOM 實作原理？
- 24. Vue 中的 key 有什么作用？
- 25. 你有對 Vue 專案進行哪些優化？
- 26. 對于 vue3.0 特性你有什么了解的嗎？
六、其他雜項篇
- 1. 常見的瀏覽器內核有哪些？
- 2. 網頁前端性能優化的方式有哪些？
- 3. 網頁從輸入網址到渲染完成經歷了哪些程序？
- 4. 執行緒與行程的區別？
- 5. HTTP常見的狀態碼？
- 6. 圖片懶加載？
- 7. 移動端性能優化？
- 8. TCP 傳輸的三次握手、四次揮手策略
- 9. HTTP 和 HTTPS，為什么HTTPS安全？
七、主觀題篇
- 1. 你都做過什么專案呢？具體聊某一個專案中運用的技術.
- 2. 你遇到過比較難的技術問題是？你是如何解決的？
- 3. 常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？
- 4. 除了前端以外還了解什么其它技術么？你最最厲害的技能是什么？
- 5. 對前端開發工程師這個職位是怎么樣理解的？它的前景會怎么樣？
- 6. 你的優點是什么？缺點是什么？
覺得有幫助的小伙伴點個贊~

一、HTML 篇

1. 簡述一下你對 HTML 語意化的理解？

用正確的標簽做正確的事情，
html 語意化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎決議；即使在沒有樣式 CSS 情況下也以一種檔案格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于 HTML 標記來確定背景關系和各個關鍵字的權重，利于 SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解，

2. 標簽上 title 與 alt 屬性的區別是什么？

alt 是給搜索引擎識別，在影像無法顯示時的替代文本；
title 是關于元素的注釋資訊，主要是給用戶解讀，
當滑鼠放到文字或是圖片上時有 title 文字顯示，（因為 IE 不標準）在 IE 瀏覽器中 alt 起到了 title 的作用，變成文字提示，
在定義 img 物件時，將 alt 和 title 屬性寫全，可以保證在各種瀏覽器中都能正常使用，

3. iframe的優缺點？

優點：

解決加載緩慢的第三方內容如圖示和廣告等的加載問題

Security sandbox

并行加載腳本

缺點：

iframe會阻塞主頁面的Onload事件

即時內容為空，加載也需要時間

沒有語意

4. href 與 src？

href (Hypertext Reference)指定網路資源的位置，從而在當前元素或者當前檔案和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關系，（目的不是為了參考資源，而是為了建立聯系，讓當前標簽能夠鏈接到目標地址，）

src source（縮寫），指向外部資源的位置，指向的內容將會應用到檔案中當前標簽所在位置，

href與src的區別

1、請求資源型別不同：href 指向網路資源所在位置，建立和當前元素（錨點）或當前檔案（鏈接）之間的聯系，在請求 src 資源時會將其指向的資源下載并應用到檔案中，比如 JavaScript 腳本，img 圖片；

2、作用結果不同：href 用于在當前檔案和參考資源之間確立聯系；src 用于替換當前內容；

3、瀏覽器決議方式不同：當瀏覽器決議到src ，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等也如此，類似于將所指向資源應用到當前內容，這也是為什么建議把 js 腳本放在底部而不是頭部的原因，

二、CSS 篇

1. 介紹一下 CSS 的盒子模型？

有兩種， IE 盒子模型、W3C 盒子模型；
盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
區別： IE 的 content 部分把 border 和 padding 計算了進去;

2. css 選擇器優先級？

!important > 行內樣式（比重1000）> ID 選擇器（比重100） > 類選擇器（比重10） > 標簽（比重1） > 通配符 > 繼承 > 瀏覽器默認屬性

3. 垂直居中幾種方式？

單行文本: line-height = height
圖片: vertical-align: middle;
absolute 定位: top: 50%;left: 50%;transform: translate(-50%, -50%);
flex: display:flex;margin:auto

4. 簡明說一下 CSS link 與 @import 的區別和用法？

link 是 XHTML 標簽，除了加載CSS外，還可以定義 RSS 等其他事務；@import 屬于 CSS 范疇，只能加載 CSS，
link 參考 CSS 時，在頁面載入時同時加載；@import 需要頁面網頁完全載入以后加載，
link 是 XHTML 標簽，無兼容問題；@import 是在 CSS2.1 提出的，低版本的瀏覽器不支持，
link 支持使用 Javascript 控制 DOM 去改變樣式；而@import不支持，

5. rgba和opacity的透明效果有什么不同？

opacity 會繼承父元素的 opacity 屬性，而 RGBA 設定的元素的后代元素不會繼承不透明屬性，

6. display:none和visibility:hidden的區別？

display:none 隱藏對應的元素，在檔案布局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在，
visibility:hidden 隱藏對應的元素，但是在檔案布局中仍保留原來的空間，

7. position的值， relative和absolute分別是相對于誰進行定位的？

relative:相對定位，相對于自己本身在正常檔案流中的位置進行定位，
absolute:生成絕對定位，相對于最近一級定位不為static的父元素進行定位，
fixed: （老版本IE不支持）生成絕對定位，相對于瀏覽器視窗或者frame進行定位，
static:默認值，沒有定位，元素出現在正常的檔案流中，
sticky:生成粘性定位的元素，容器的位置根據正常檔案流計算得出，

三、HTML / CSS 混合篇

1. HTML5、CSS3 里面都新增了那些新特性？

HTML5

新的語意標簽

article 獨立的內容，

aside 側邊欄，

header 頭部，

nav 導航，

section 檔案中的節，

footer 頁腳，

畫布(Canvas) API

地理(Geolocation) API

本地離線存盤 localStorage 長期存盤資料，瀏覽器關閉后資料不丟失；
sessionStorage 的資料在瀏覽器關閉后自動洗掉

新的技術webworker, websocket, Geolocation

拖拽釋放(Drag and drop) API

音頻、視頻API(audio,video)

表單控制元件，calendar、date、time、email、url、searc

CSS3

2d，3d變換

Transition, animation

媒體查詢

新的單位（rem, vw，vh 等）

圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），旋轉（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

rgba

2. BFC 是什么？

BFC 即 Block Formatting Contexts (塊級格式化背景關系)，它屬于普通流，即：元素按照其在 HTML 中的先后位置至上而下布局，在這個程序中，行內元素水平排列，直到當行被占滿然后換行，塊級元素則會被渲染為完整的一個新行，除非另外指定，否則所有元素默認都是普通流定位，也可以說，普通流中元素的位置由該元素在 HTML 檔案中的位置決定，
可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部，
只要元素滿足下面任一條件即可觸發 BFC 特性

body 根元素

浮動元素：float 除 none 以外的值

絕對定位元素：position (absolute、fixed)

display 為 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

3. 常見兼容性問題？

瀏覽器默認的margin和padding不同，解決方案是加一個全域的*{margin:0;padding:0;}來統一，

Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

四、JS 篇

1. JS 資料型別 ?

資料型別主要包括兩部分：

基本資料型別： Undefined、Null、Boolean、Number 和 String

參考資料型別： Object (包括 Object 、Array 、Function)

ECMAScript 2015 新增:Symbol(創建后獨一無二且不可變的資料型別 )

2. 判斷一個值是什么型別有哪些方法？

typeof 運算子

instanceof 運算子

Object.prototype.toString 方法

3. null 和 undefined 的區別？

null 表示一個物件被定義了，值為“空值”；
undefined 表示不存在這個值，
（1）變數被宣告了，但沒有賦值時，就等于undefined，（2) 呼叫函式時，應該提供的引數沒有提供，該引數等于undefined，（3）物件沒有賦值的屬性，該屬性的值為undefined，（4）函式沒有回傳值時，默認回傳undefined，

4. 怎么判斷一個變數arr的話是否為陣列（此題用 typeof 不行）？

arr instanceof Array
arr.constructor == Array
Object.protype.toString.call(arr) == '[Object Array]'

5. “ ===”、“ ==”的區別？

==，當且僅當兩個運算元相等時，它回傳 true，即不檢查資料型別
===，只有在無需型別轉換運算元就相等的情況下，才回傳 true，需要檢查資料型別

6. “eval是做什么的？

它的功能是把對應的字串決議成 JS 代碼并運行；
應該避免使用 eval，不安全，非常耗性能（2次，一次決議成 js 陳述句，一次執行），

7. 箭頭函式有哪些特點？

不需要function關鍵字來創建函式
省略return關鍵字
改變this指向

8. var、let、const 區別？

var 存在變數提升，
let 只能在塊級作用域內訪問，
const 用來定義常量，必須初始化，不能修改（物件特殊）

9. new運算子具體干了什么呢？

1、創建一個空物件，并且 this 變數參考該物件，同時還繼承了該函式的原型，
2、屬性和方法被加入到 this 參考的物件中，
3、新創建的物件由 this 所參考，并且最后隱式的回傳 this ，

10. JSON 的了解？

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式，
它是基于JavaScript的一個子集，資料格式簡單, 易于讀寫, 占用帶寬小
{'age':'12', 'name':'back'}

11. documen.write 和 innerHTML 的區別？

document.write 只能重繪整個頁面
innerHTML 可以重繪頁面的一部分

12. ajax程序？

(1)創建XMLHttpRequest物件,也就是創建一個異步呼叫物件.
(2)創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證資訊.
(3)設定回應HTTP請求狀態變化的函式.
(4)發送HTTP請求.
(5)獲取異步呼叫回傳的資料.
(6)使用JavaScript和DOM實作區域重繪.

13. 請解釋一下 JavaScript 的同源策略？

概念:同源策略是客戶端腳本（尤其是Netscape Navigator2.0，其目的是防止某個檔案或腳本從多個不同源裝載，
這里的同源策略指的是：協議，域名，埠相同，同源策略是一種安全協議，
指一段腳本只能讀取來自同一來源的視窗和檔案的屬性，

14. 介紹一下閉包和閉包常用場景？

閉包是指有權訪問另一個函式作用域中的變數的函式，創建閉包常見方式，就是在一個函式的內部創建另一個函式

使用閉包主要為了設計私有的方法和變數，閉包的優點是可以避免變數的污染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體泄露，在js中，函式即閉包，只有函式才會產生作用域的概念，

閉包有三個特性：

函式嵌套函式

函式內部可以參考外部的引數和變數

引數和變數不會被垃圾回識訓制回收

應用場景，設定私有變數的方法

不適用場景：回傳閉包的函式是個非常大的函式

閉包的缺點就是常駐記憶體，會增大記憶體使用量，使用不當會造成記憶體泄漏

15. javascript的記憶體(垃圾)回識訓制？

垃圾回收器會每隔一段時間找出那些不再使用的記憶體，然后為其釋放記憶體

一般使用標記清除方法(mark and sweep), 當變數進入環境標記為進入環境，離開環境標記為離開環境
垃圾回收器會在運行的時候給存盤在記憶體中的所有變數加上標記，然后去掉環境中的變數以及被環境中變數所參考的變數（閉包），在這些完成之后仍存在標記的就是要洗掉的變數了

還有參考計數方法(reference counting), 在低版本IE中經常會出現記憶體泄露，很多時候就是因為其采用參考計數方式進行垃圾回收，參考計數的策略是跟蹤記錄每個值被使用的次數，當宣告了一個變數并將一個參考型別賦值給該變數的時候這個值的參考次數就加1，如果該變數的值變成了另外一個，則這個值得參考次數減1，當這個值的參考次數變為0的時候，說明沒有變數在使用，這個值沒法被訪問了，因此可以將其占用的空間回收，這樣垃圾回收器會在運行的時候清理掉參考次數為0的值占用的空間，

在IE中雖然JavaScript物件通過標記清除的方式進行垃圾回收，但BOM與DOM物件卻是通過參考計數回收垃圾的，也就是說只要涉及BOM及DOM就會出現回圈參考問題，

16. JavaScript原型，原型鏈 ? 有什么特點？

每個物件都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個物件的屬性時，
如果這個物件內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，
于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念，

關系：instance.constructor.prototype = instance.proto

特點：
JavaScript物件是通過參考來傳遞的，我們創建的每個新物件物體中并沒有一份屬于自己的原型副本，當我們修改原型時，與之相關的物件也會繼承這一改變，

五、Vue 篇

1. 談談你對MVVM開發模式的理解？

MVVM分為Model、View、ViewModel三者，
Model 代表資料模型，資料和業務邏輯都在Model層中定義；
View 代表UI視圖，負責資料的展示；
ViewModel 負責監聽 Model 中資料的改變并且控制視圖的更新，處理用戶互動操作；
Model 和 View 并無直接關聯，而是通過 ViewModel 來進行聯系的，Model 和 ViewModel 之間有著雙向資料系結的聯系，因此當 Model 中的資料改變時會觸發 View 層的重繪，View 中由于用戶互動操作而改變的資料也會在 Model 中同步，
這種模式實作了 Model 和 View 的資料自動同步，因此開發者只需要專注對資料的維護操作即可，而不需要自己操作 dom，

2. v-if 和 v-show 有什么區別？

v-if 是真正的條件渲染，會控制這個 DOM 節點的存在與否，因為它會確保在切換程序中條件塊內的事件監聽器和子組件適當地被銷毀和重建；也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊，

v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 的 “display” 屬性進行切換，

當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理，

3. 你使用過 Vuex 嗎？

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，每一個 Vuex 應用的核心就是 store（倉庫），“store” 基本上就是一個容器，它包含著你的應用中大部分的狀態 ( state )，

（1）Vuex 的狀態存盤是回應式的，當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新，

（2）改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation，這樣使得我們可以方便地跟蹤每一個狀態的變化，

主要包括以下幾個模塊：

State => 基本資料，定義了應用狀態的資料結構，可以在這里設定默認的初始狀態，

Getter => 從基本資料派生的資料，允許組件從 Store 中獲取資料，mapGetters 輔助函式僅僅是將 store 中的 getter 映射到區域計算屬性，

Mutation => 是唯一更改 store 中狀態的方法，且必須是同步函式，

Action => 像一個裝飾器，包裹mutations，使之可以異步，用于提交 mutation，而不是直接變更狀態，可以包含任意異步操作，

Module => 模塊化Vuex，允許將單一的 Store 拆分為多個 store 且同時保存在單一的狀態樹中，

4. 說說你對 SPA 單頁面的理解，它的優缺點分別是什么？

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML、JavaScript 和 CSS，一旦頁> 面加載完成，SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉；取而代之的是利用路由機制實作 > HTML 內容的變換，UI 與用戶的互動，避免頁面的重新加載，

優點：
用戶體驗好、快，內容的改變不需要重新加載整個頁面，避免了不必要的跳轉和重復渲染；
基于上面一點，SPA 相對對服務器壓力小；
前后端職責分離，架構清晰，前端進行互動邏輯，后端負責資料處理；

缺點：
初次加載耗時多：為實作單頁 Web 應用功能及顯示效果，需要在加載頁面的時候將 JavaScript、CSS 統一> 加載，部分頁面按需加載；
前進后退路由管理：由于單頁應用在一個頁面中顯示所有的內容，所以不能使用瀏覽器的前進后退功能，所> 有的頁面切換需要自己建立堆疊管理；
SEO 難度較大：由于所有的內容都在一個頁面中動態替換顯示，所以在 SEO 上其有著天然的弱勢，

5. Class 與 Style 如何動態系結？

Class 可以通過物件語法和陣列語法進行動態系結：

物件語法：

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: {
	isActive: true,
  	hasError: false
}

陣列語法：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Style 也可以通過物件語法和陣列語法進行動態系結：

物件語法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

陣列語法：

<div v-bind:style="[styleColor, styleSize]"></div>
data: {
  styleColor: {
     color: 'red'
   },
  styleSize:{
     fontSize:'23px'
  }
}

6. 怎樣理解 Vue 的單向資料流？

所有的 prop 都使得其父子 prop 之間形成了一個單向下行系結：父級 prop 的更新會向下流動到子組件中，但是反過來則不行，
這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的資料流向難以理解，
額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會重繪為最新的值，
這意味著你不應該在一個子組件內部改變 prop，如果你這樣做了，Vue 會在瀏覽器的控制臺中發出警告，
子組件想修改時，只能通過 $emit 派發一個自定義事件，父組件接收到后，由父組件修改，

7. computed 和 watch 的區別和運用的場景？

computed：是計算屬性，依賴其它屬性值，并且 computed 的值有快取，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；

watch：更多的是「觀察」的作用，類似于某些資料的監聽回呼，每當監聽的資料變化時都會執行回呼進行后續操作；

運用場景：

當我們需要進行數值計算，并且依賴于其它資料時，應該使用 computed，因為可以利用 computed 的快取特性，避免每次獲取值時，都要重新計算；

當我們需要在資料變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行異步操作 ( 訪問一個 API )，限制我們執行該操作的頻率，并在我們得到最終結果前，設定中間狀態，這些都是計算屬性無法做到的，

8. 直接給一個陣列項賦值，Vue 能檢測到變化嗎？

由于 JavaScript 的限制，Vue 不能檢測到以下陣列的變動：

當你利用索引直接設定一個陣列項時，例如：vm.items[indexOfItem] = newValue

當你修改陣列的長度時，例如：vm.items.length = newLength

為了解決第一個問題，Vue 提供了以下操作方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一個別名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

為了解決第二個問題，Vue 提供了以下操作方法：

// Array.prototype.splice
vm.items.splice(newLength)

9. 談談你對 Vue 生命周期的理解？

生命周期是什么？

Vue 實體有一個完整的生命周期，也就是從開始創建、初始化資料、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載等一系列程序，我們稱這是 Vue 的生命周期，

各個生命周期的作用

生命周期描述

beforeCreate 組件實體被創建之初，組件的屬性生效之前

created 組件實體已經完全創建，屬性也系結，但真實 dom 還沒有生成，$el 還不可用

beforeMount 在掛載開始之前被呼叫：相關的 render 函式首次被呼叫

mounted el 被新創建的 vm.$el 替換，并掛載到實體上去之后呼叫該鉤子

beforeUpdate 組件資料更新之前呼叫，發生在虛擬 DOM 打補丁之前

updated 組件資料更新之后

activited keep-alive 專屬，組件被激活時呼叫

deadctivated keep-alive 專屬，組件被銷毀時呼叫

beforeDestory 組件銷毀前呼叫

destoryed 組件銷毀后呼叫

生命周期	描述
beforeCreate	組件實體被創建之初，組件的屬性生效之前
created	組件實體已經完全創建，屬性也系結，但真實 dom 還沒有生成，$el 還不可用
beforeMount	在掛載開始之前被呼叫：相關的 render 函式首次被呼叫
mounted	el 被新創建的 vm.$el 替換，并掛載到實體上去之后呼叫該鉤子
beforeUpdate	組件資料更新之前呼叫，發生在虛擬 DOM 打補丁之前
updated	組件資料更新之后
activited	keep-alive 專屬，組件被激活時呼叫
deadctivated	keep-alive 專屬，組件被銷毀時呼叫
beforeDestory	組件銷毀前呼叫
destoryed	組件銷毀后呼叫

10. Vue 的父組件和子組件生命周期鉤子函式執行順序？

Vue 的父組件和子組件生命周期鉤子函式執行順序可以歸類為以下 4 部分：

加載渲染程序 :
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子組件更新程序 :
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父組件更新程序 :
父 beforeUpdate -> 父 updated

銷毀程序 :
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

11. 父組件可以監聽到子組件的生命周期嗎？

比如有父組件 Parent 和子組件 Child，如果父組件監聽到子組件掛載 mounted 就做一些邏輯處理，可以通過以下寫法實作：

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

以上需要手動通過 $emit 觸發父組件的事件，更簡單的方式可以在父組件參考子組件時通過 @hook 來監聽即可，如下所示：

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父組件監聽到 mounted 鉤子函式 ...');
},

//  Child.vue
mounted(){
   console.log('子組件觸發 mounted 鉤子函式 ...');
},    

// 以上輸出順序為：
// 子組件觸發 mounted 鉤子函式 ...
// 父組件監聽到 mounted 鉤子函式 ...

當然 @hook 方法不僅僅是可以監聽 mounted，其它的生命周期事件，例如：created，updated 等都可以監聽，

12. 談談你對 keep-alive 的了解？

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，避免重新渲染，其有以下特性：

一般結合路由和動態組件一起使用，用于快取組件；

提供 include 和 exclude 屬性，兩者都支持字串或正則運算式， include 表示只有名稱匹配的組件會被快取，exclude 表示任何名稱匹配的組件都不會被快取，其中 exclude 的優先級比 include 高；

對應兩個鉤子函式 activated 和 deactivated ，當組件被激活時，觸發鉤子函式 activated，當組件被移除時，觸發鉤子函式 deactivated，

13. 組件中 data 為什么是一個函式？

為什么組件中的 data 必須是一個函式，然后 return 一個物件，而 new Vue 實體里，data 可以直接是一個物件？

因為組件是用來復用的，且 JS 里物件是參考關系，如果組件中 data 是一個物件，那么這樣作用域沒有隔離，子組件中的 data 屬性值會相互影響，

如果組件中 data 選項是一個函式，那么每個實體可以維護一份被回傳物件的獨立的拷貝，組件實體之間的 data 屬性值不會互相影響；而 new Vue 的實體，是不會被復用的，因此不存在參考物件的問題，

14. v-model 的原理？

我們在 vue 專案中主要使用 v-model 指令在表單 input、textarea、select 等元素上創建雙向資料系結，我們知道 v-model 本質上不過是語法糖，v-model 在內部為不同的輸入元素使用不同的屬性并拋出不同的事件：

text 和 textarea 元素使用 value 屬性和 input 事件；

checkbox 和 radio 使用 checked 屬性和 change 事件；

select 欄位將 value 作為 prop 并將 change 作為事件，

以 input 表單元素為例：

<input v-model='something'>

相當于

<input v-bind:value=https://www.cnblogs.com/zheroXH/p/"something" v-on:input="something = $event.target.value">

如果在自定義組件中，v-model 默認會利用名為 value 的 prop 和名為 input 的事件，如下所示：

父組件：
<ModelChild v-model="message"></ModelChild>

子組件：
<div>{{value}}</div>

props:{
    value: String
},
methods: {
  test1(){
     this.$emit('input', '小紅')
  },
},

15. Vue 組件間通信有哪幾種方式？

Vue 組件間通信是面試常考的知識點之一，這題有點類似于開放題，你回答出越多方法當然越加分，表明你對 Vue 掌握的越熟練，

Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信，下面我們分別介紹每種通信方式且會說明此種方法可適用于哪類組件間通信，
（1）props / $emit 適用父子組件通信

這種方法是 Vue 組件的基礎，相信大部分同學耳聞能詳，所以此處就不舉例展開介紹，

（2）ref 與 $parent / $children適用父子組件通信

ref：如果在普通的 DOM 元素上使用，參考指向的就是 DOM 元素；如果用在子組件上，參考就指向組件實體

$parent / $children：訪問父 / 子實體

（3）EventBus （$emit / $on）適用于父子、隔代、兄弟組件通信

這種方法通過一個空的 Vue 實體作為中央事件總線（事件中心），用它來觸發事件和監聽事件，從而實作任何組件間的通信，包括父子、隔代、兄弟組件，

（4）$attrs/$listeners適用于隔代組件通信

$attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性系結 ( class 和 style 除外 )，當一個組件沒有宣告任何 prop 時，這里會包含所有父作用域的系結 ( class 和 style 除外 )，并且可以通過 v-bind="$attrs" 傳入內部組件，通常配合 inheritAttrs 選項一起使用，

$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器，它可以通過 v-on="$listeners" 傳入內部組件

（5）provide / inject適用于隔代組件通信

祖先組件中通過 provider 來提供變數，然后在子孫組件中通過 inject 來注入變數，provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間建立了一種主動提供與依賴注入的關系，

（6）Vuex適用于父子、隔代、兄弟組件通信

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，每一個 Vuex 應用的核心就是 store（倉庫），“store” 基本上就是一個容器，它包含著你的應用中大部分的狀態 ( state )，

Vuex 的狀態存盤是回應式的，當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新，

改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation，這樣使得我們可以方便地跟蹤每一個狀態的變化，

16. 使用過 Vue SSR 嗎？說說 SSR？

Vue.js 是構建客戶端應用程式的框架，默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM，然而，也可以將同一個組件渲染為服務端的 HTML 字串，將它們直接發送到瀏覽器，最后將這些靜態標記"激活"為客戶端上完全可互動的應用程式，

即：SSR大致的意思就是vue在客戶端將標簽渲染成的整個 html 片段的作業在服務端完成，服務端形成的html 片段直接回傳給客戶端這個程序就叫做服務端渲染，

服務端渲染 SSR 的優缺點如下：

（1）服務端渲染的優點：

更好的 SEO：因為 SPA 頁面的內容是通過 Ajax 獲取，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內容；而 SSR 是直接由服務端回傳已經渲染好的頁面（資料已經包含在頁面中），所以搜索引擎爬取工具可以抓取渲染好的頁面；

更快的內容到達時間（首屏加載更快）：SPA 會等待所有 Vue 編譯后的 js 檔案都下載完成后，才開始進行頁面的渲染，檔案下載等需要一定的時間等，所以首屏渲染需要一定的時間；SSR 直接由服務端渲染好頁面直接回傳顯示，無需等待下載 js 檔案及再去渲染等，所以 SSR 有更快的內容到達時間；

（2) 服務端渲染的缺點：

更多的開發條件限制：例如服務端渲染只支持 beforCreate 和 created 兩個鉤子函式，這會導致一些外部擴展庫需要特殊處理，才能在服務端渲染應用程式中運行；并且與可以部署在任何靜態檔案服務器上的完全靜態單頁面應用程式 SPA 不同，服務端渲染應用程式，需要處于 Node.js server 運行環境；

更多的服務器負載：在 Node.js 中渲染完整的應用程式，顯然會比僅僅提供靜態檔案的 server 更加大量占用CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預料在高流量環境 ( high traffic ) 下使用，請準備相應的服務器負載，并明智地采用快取策略，

17. vue-router 路由模式有幾種？

vue-router 有 3 種路由模式：hash、history、abstract，對應的原始碼如下所示：

switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `invalid mode: ${mode}`)
    }
}

其中，3 種路由模式的說明如下：

hash: 使用 URL hash 值來作路由，支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；

history : 依賴 HTML5 History API 和服務器配置，具體可以查看 HTML5 History 模式；

abstract : 支持所有 JavaScript 運行環境，如 Node.js 服務器端，如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式.

18. 能說下 vue-router 中常用的 hash 和 history 路由模式實作原理嗎？

（1）hash 模式的實作原理
早期的前端路由的實作就是基于 location.hash 來實作的，其實作原理很簡單，location.hash 的值就是 URL 中 # 后面的內容，比如下面這個網站，它的 location.hash 的值為 '#search'：
https://www.word.com#search
hash 路由模式的實作主要是基于下面幾個特性：

URL 中 hash 值只是客戶端的一種狀態，也就是說當向服務器端發出請求時，hash 部分不會被發送；

hash 值的改變，都會在瀏覽器的訪問歷史中增加一個記錄，因此我們能通過瀏覽器的回退、前進按鈕控制hash 的切換；

可以通過 a 標簽，并設定 href 屬性，當用戶點擊這個標簽后，URL 的 hash 值會發生改變；或者使用 JavaScript 來對 loaction.hash 進行賦值，改變 URL 的 hash 值；

我們可以使用 hashchange 事件來監聽 hash 值的變化，從而對頁面進行跳轉（渲染），

（2）history 模式的實作原理
HTML5 提供了 History API 來實作 URL 的變化，其中做最主要的 API 有以下兩個：history.pushState() 和 history.repalceState()，這兩個 API 可以在不進行重繪的情況下，操作瀏覽器的歷史紀錄，
唯一不同的是，前者是新增一個歷史記錄，后者是直接替換當前的歷史記錄，如下所示：
window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);
history 路由模式的實作主要基于存在下面幾個特性：

pushState 和 repalceState 兩個 API 來操作實作 URL 的變化；

我們可以使用 popstate 事件來監聽 url 的變化，從而對頁面進行跳轉（渲染）；

history.pushState() 或 history.replaceState() 不會觸發 popstate 事件，這時我們需要手動觸發頁面跳轉（渲染），

19. Vue 框架怎么實作物件和陣列的監聽？

Vue 資料雙向系結主要是指：資料變化更新視圖，視圖變化更新資料，
即：

輸入框內容變化時，Data 中的資料同步變化，即 View => Data 的變化，

Data 中的資料變化時，文本節點的內容同步變化，即 Data =https://www.cnblogs.com/zheroXH/p/> View 的變化，

其中，View 變化更新 Data ，可以通過事件監聽的方式來實作，所以 Vue 的資料雙向系結的作業主要是如何根據 Data 變化更新 View，
Vue 主要通過以下 4 個步驟來實作資料雙向系結的：

實作一個監聽器 Observer：對資料物件進行遍歷，包括子屬性物件的屬性，利用 Object.defineProperty() 對屬性都加上 setter 和 getter，這樣的話，給這個物件的某個值賦值，就會觸發 setter，那么就能監聽到了資料變化，

實作一個決議器 Compile：決議 Vue 模板指令，將模板中的變數都替換成資料，然后初始化渲染頁面視圖，并將每個指令對應的節點系結更新函式，添加監聽資料的訂閱者，一旦資料有變動，收到通知，呼叫更新函式進行資料更新，

實作一個訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁，主要的任務是訂閱 Observer 中的屬性值變化的訊息，當收到屬性值變化的訊息時，觸發決議器 Compile 中對應的更新函式，

實作一個訂閱器 Dep：訂閱器采用發布-訂閱設計模式，用來收集訂閱者 Watcher，對監聽器 Observer 和訂閱者 Watcher 進行統一管理，

20. Vue 是如何實作資料雙向系結的？

如果被問到 Vue 怎么實作資料雙向系結，大家肯定都會回答通過 Object.defineProperty() 對資料進行劫持，但是 Object.defineProperty() 只能對屬性進行資料劫持，不能對整個物件進行劫持，
同理無法對陣列進行劫持，但是我們在使用 Vue 框架中都知道，Vue 能檢測到物件和陣列（部分方法的操作）的變化，那它是怎么實作的呢？我們查看相關代碼如下：

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])  // observe 功能為監測資料的變化
    }
  }

  /**
   * 對屬性進行遞回遍歷
   */
  let childOb = !shallow && observe(val) // observe 功能為監測資料的變化

通過以上 Vue 原始碼部分查看，我們就能知道 Vue 框架是通過遍歷陣列和遞回遍歷物件，從而達到利用 Object.defineProperty() 也能對物件和陣列（部分方法的操作）進行監聽，

21. Vue 怎么用 vm.$set() 解決物件新增屬性不能回應的問題？

受現代 JavaScript 的限制，Vue 無法檢測到物件屬性的添加或洗掉，
由于 Vue 會在初始化實體時對屬性執行 getter/setter 轉化，所以屬性必須在 data 物件上存在才能讓 Vue 將它轉換為回應式的，
但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)來實作為物件添加回應式屬性，那框架本身是如何實作的呢？

我們查看對應的 Vue 原始碼：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 為陣列
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改陣列的長度, 避免索引>陣列長度導致splcie()執行有誤
    target.length = Math.max(target.length, key)
    // 利用陣列的splice變異方法觸發回應式
    target.splice(key, 1, val)
    return val
  }
  // key 已經存在，直接修改屬性值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是回應式資料, 直接賦值
  if (!ob) {
    target[key] = val
    return val
  }
  // 對屬性進行回應式處理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我們閱讀以上原始碼可知，vm.$set 的實作原理是：

如果目標是陣列，直接使用陣列的 splice 方法觸發相應式；

如果目標是物件，會先判讀屬性是否存在、物件是否是回應式，最終如果要對屬性進行回應式處理，則是通過呼叫 defineReactive 方法進行回應式處理（ defineReactive 方法就是 Vue 在初始化物件時，給物件屬性采用 Object.defineProperty 動態添加 getter 和 setter 的功能所呼叫的方法）

22. 虛擬 DOM 的優缺點？

優點：

保證性能下限：框架的虛擬 DOM 需要適配任何上層 API 可能產生的操作，它的一些 DOM 操作的實作必須是普適的，所以它的性能并不是最優的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虛擬 DOM 至少可以保證在你不需要手動優化的情況下，依然可以提供還不錯的性能，即保證性能的下限；

無需手動操作 DOM：我們不再需要手動去操作 DOM，只需要寫好 View-Model 的代碼邏輯，框架會根據虛擬 DOM 和資料雙向系結，幫我們以可預期的方式更新視圖，極大提高我們的開發效率；

跨平臺：虛擬 DOM 本質上是 JavaScript 物件,而 DOM 與平臺強相關，相比之下虛擬 DOM 可以進行更方便地跨平臺操作，例如服務器渲染、weex 開發等等，

缺點:

無法進行極致優化：雖然虛擬 DOM + 合理的優化，足以應對絕大部分應用的性能需求，但在一些性能要求極高的應用中虛擬 DOM 無法進行針對性的極致優化，

23. 虛擬 DOM 實作原理？

虛擬 DOM 的實作原理主要包括以下 3 部分：

用 JavaScript 物件模擬真實 DOM 樹，對真實 DOM 進行抽象；

diff 演算法 — 比較兩棵虛擬 DOM 樹的差異；

pach 演算法 — 將兩個虛擬 DOM 物件的差異應用到真正的 DOM 樹，

24. Vue 中的 key 有什么作用？

key 是為 Vue 中 vnode 的唯一標記，通過這個 key，我們的 diff 操作可以更準確、更快速，
Vue 的 diff 程序可以概括為：oldCh 和 newCh 各有兩個頭尾的變數 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它們會新節點和舊節點會進行兩兩對比，即一共有4種比較方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex，如果以上 4 種比較都沒匹配，如果設定了key，就會用 key 再進行比較，在比較的程序中，遍歷會往中間靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一個已經遍歷完了，就會結束比較，
所以 Vue 中 key 的作用是：key 是為 Vue 中 vnode 的唯一標記，通過這個 key，我們的 diff 操作可以更準確、更快速!

更準確：因為帶 key 就不是就地復用了，在 sameNode 函式 a.key === b.key 對比中可以避免就地復用的情況，所以會更加準確，

更快速：利用 key 的唯一性生成 map 物件來獲取對應節點，比遍歷方式更快，原始碼如下：

function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

25. 你有對 Vue 專案進行哪些優化？

（1）代碼層面的優化

v-if 和 v-show 區分使用場景

computed 和 watch 區分使用場景

v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if

長串列性能優化

事件的銷毀

圖片資源懶加載

路由懶加載

第三方插件的按需引入

優化無限串列性能

服務端渲染 SSR or 預渲染

（2）Webpack 層面的優化

Webpack 對圖片進行壓縮

減少 ES6 轉為 ES5 的冗余代碼

提取公共代碼

模板預編譯

提取組件的 CSS

優化 SourceMap

構建結果輸出分析

Vue 專案的編譯優化

（3）基礎的 Web 技術的優化

開啟 gzip 壓縮

瀏覽器快取

CDN 的使用

使用 Chrome Performance 查找性能瓶頸

26. 對于 vue3.0 特性你有什么了解的嗎？

Vue 3.0 的目標是讓 Vue 核心變得更小、更快、更強大，因此 Vue 3.0 增加以下這些新特性：

（1）監測機制的改變
3.0 將帶來基于代理 Proxy 的 observer 實作，提供全語言覆寫的反應性跟蹤，這消除了 Vue 2 當中基于 Object.defineProperty 的實作所存在的很多限制：

只能監測驗性，不能監測物件

檢測驗性的添加和洗掉；

檢測陣列索引和長度的變更；

支持 Map、Set、WeakMap 和 WeakSet，

新的 observer 還提供了以下特性：

用于創建 observable 的公開 API，這為中小規模場景提供了簡單輕量級的跨組件狀態管理解決方案，

默認采用惰性觀察，在 2.x 中，不管反應式資料有多大，都會在啟動時被觀察到，如果你的資料集很大，這可能會在應用啟動時帶來明顯的開銷，在 3.x 中，只觀察用于渲染應用程式最初可見部分的資料，

更精確的變更通知，在 2.x 中，通過 Vue.set 強制添加新屬性將導致依賴于該物件的 watcher 收到變更通知，在 3.x 中，只有依賴于特定屬性的 watcher 才會收到通知，

不可變的 observable：我們可以創建值的“不可變”版本（即使是嵌套屬性），除非系統在內部暫時將其“解禁”，這個機制可用于凍結 prop 傳遞或 Vuex 狀態樹以外的變化，

更好的除錯功能：我們可以使用新的 renderTracked 和 renderTriggered 鉤子精確地跟蹤組件在什么時候以及為什么重新渲染，

（2）模板
模板方面沒有大的變更，只改了作用域插槽，2.x 的機制導致作用域插槽變了，父組件會重新渲染，而 3.0 把作用域插槽改成了函式的方式，這樣只會影響子組件的重新渲染，提升了渲染的性能，
同時，對于 render 函式的方面，vue3.0 也會進行一系列更改來方便習慣直接使用 api 來生成 vdom ，

（3）物件式的組件宣告方式
vue2.x 中的組件是通過宣告的方式傳入一系列 option，和 TypeScript 的結合需要通過一些裝飾器的方式來做，雖然能實作功能，但是比較麻煩，
3.0 修改了組件的宣告方式，改成了類式的寫法，這樣使得和 TypeScript 的結合變得很容易，
此外，vue 的原始碼也改用了 TypeScript 來寫，其實當代碼的功能復雜之后，必須有一個靜態型別系統來做一些輔助管理，
現在 vue3.0 也全面改用 TypeScript 來重寫了，更是使得對外暴露的 api 更容易結合 TypeScript，靜態型別系統對于復雜代碼的維護確實很有必要，

（4）其它方面的更改
vue3.0 的改變是全面的，上面只涉及到主要的 3 個方面，還有一些其他的更改：

支持自定義渲染器，從而使得 weex 可以通過自定義渲染器的方式來擴展，而不是直接 fork 原始碼來改的方式，

支持 Fragment（多個根節點）和 Protal（在 dom 其他部分渲染組建內容）組件，針對一些特殊的場景做了處理，

基于 treeshaking 優化，提供了更多的內置功能，

六、其他雜項篇

1. 常見的瀏覽器內核有哪些？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎，

渲染引擎：負責取得網頁的內容（HTML、XML、影像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示幕或列印機，瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同，所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要內核，

JS引擎則：決議和執行javascript來實作網頁的動態效果，

最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎，

常見內核

Trident 內核：IE, MaxThon, TT, The World, 360, 搜狗瀏覽器等，[又稱 MSHTML]

Gecko 內核：Netscape6 及以上版本，FF, MozillaSuite / SeaMonkey 等

Presto 內核：Opera7 及以上， [Opera內核原為：Presto，現為：Blink;]

Webkit 內核：Safari, Chrome等， [ Chrome的：Blink（WebKit 的分支）]

2. 網頁前端性能優化的方式有哪些？

1.壓縮 css, js, 圖片
2.減少 http 請求次數，合并 css、js 、合并圖片（雪碧圖）
3.使用 CDN
4.減少 dom 元素數量
5.圖片懶加載
6.靜態資源另外用無 cookie 的域名
7.減少 dom 的訪問（快取 dom）
8.巧用事件委托
9.樣式表置頂、腳本置低

3. 網頁從輸入網址到渲染完成經歷了哪些程序？

大致可以分為如下7步：

輸入網址；

發送到DNS服務器，并獲取域名對應的web服務器對應的ip地址；

與web服務器建立TCP連接；

瀏覽器向web服務器發送http請求；

web服務器回應請求，并回傳指定url的資料（或錯誤資訊，或重定向的新的url地址）；

瀏覽器下載web服務器回傳的資料及決議html源檔案；

生成DOM樹，決議css和js，渲染頁面，直至顯示完成；

4. 執行緒與行程的區別？

一個程式至少有一個行程,一個行程至少有一個執行緒.

執行緒的劃分尺度小于行程，使得多執行緒程式的并發性高，

另外，行程在執行程序中擁有獨立的記憶體單元，而多個執行緒共享記憶體，從而極大地提高了程式的運行效率，

執行緒在執行程序中與行程還是有區別的，每個獨立的執行緒有一個程式運行的入口、順序執行序列和程式的出口，但是執行緒不能夠獨立執行，必須依存在應用程式中，由應用程式提供多個執行緒執行控制，

從邏輯角度來看，多執行緒的意義在于一個應用程式中，有多個執行部分可以同時執行，但作業系統并沒有將多個執行緒看做多個獨立的應用，來實作行程的調度和管理以及資源分配，這就是行程和執行緒的重要區別，

5. HTTP常見的狀態碼？

100 Continue 繼續，一般在發送post請求時，已發送了http header之后服務端將回傳此資訊，表示確認，之后發送具體引數資訊
200 OK 正常回傳資訊
201 Created 請求成功并且服務器創建了新的資源
202 Accepted 服務器已接受請求，但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置，
302 Found 臨時性重定向，
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI，
304 Not Modified 自從上次請求后，請求的網頁未修改過，
400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求，
401 Unauthorized 請求未授權，
403 Forbidden 禁止訪問，
404 Not Found 找不到如何與 URI 相匹配的資源，
500 Internal Server Error 最常見的服務器端錯誤，
503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護），

6. 圖片懶加載？

當頁面滾動的時間被觸發 -> 執行加載圖片操作 -> 判斷圖片是否在可視區域內 -> 在，則動態將data-src的值賦予該圖片

7. 移動端性能優化？

盡量使用css3影片，開啟硬體加速

適當使用touch時間代替click時間

避免使用css3漸變陰影效果

可以用transform: translateZ(0) 來開啟硬體加速

不濫用float，float在渲染時計算量比較大，盡量減少使用

不濫用web字體，web字體需要下載，決議，重繪當前頁面

合理使用requestAnimationFrame影片代替setTimeout

css中的屬性（css3 transitions、css3 3D transforms、opacity、webGL、video）會觸發GUP渲染，耗電

8. TCP 傳輸的三次握手、四次揮手策略

三次握手：
為了準確無誤地吧資料送達目標處，TCP協議采用了三次握手策略，用TCP協議把資料包送出去后，TCP不會對傳送后的情況置之不理，他一定會向對方確認是否送達，握手程序中使用TCP的標志：SYN和ACK

發送端首先發送一個帶SYN的標志的資料包給對方

接收端收到后，回傳一個帶有SYN/ACK標志的資料包以示傳達確認資訊

最后，發送端再回傳一個帶ACK的標志的資料包，代表“握手”結束

如在握手程序中某個階段莫明中斷，TCP協議會再次以相同的順序發送相同的資料包

斷開一個TCP連接需要“四次揮手”

第一次揮手：主動關閉方發送一個FIN，用來關注主動方到被動關閉方的資料傳送，也即是主動關閉方告誡被動關閉方：我已經不會再給你發資料了（在FIN包之前發送的資料，如果沒有收到對應的ACK確認報文，主動關閉方依然會重發這些資料），但是，此時主動關閉方還可以接受資料

第二次揮手：被動關閉方收到FIN包后，發送一個ACK給對方，確認序號收到序號 +1（與SYN相同，一個 FIN占用一個序號）

第三次揮手：被動關閉方發送一個 FIN，用來關閉被動關閉方到主動關閉方的資料傳送，也就是告訴主動關閉方，我的資料也發送完了，不會給你發送資料了

第四次揮手：主動關閉方收到FIN后，發送一個ACK給被動關閉方，確認序號為收到序號+1，至此，完成四次揮手

9. HTTP 和 HTTPS，為什么HTTPS安全？

HTTP協議通常承載與 TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了我們常說的HTTPS

默認HTTP的埠號為80，HTTPS的埠號為443

因為網路請求需要中間有很多的服務器路由的轉發，中間的節點都可能篡改資訊，而如果使用HTTPS，密鑰在你和終點站才有，https之所有說比http安全，是因為他利用ssl/tls協議傳輸，包含證書，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等，保障了傳輸程序的安全性

七、主觀題篇

1. 你都做過什么專案呢？具體聊某一個專案中運用的技術.

注意：用心找自己做的專案中自己感覺最拿出來手的（復雜度最高，用的技術最多的專案），描述的時候盡可能往里面添加一些技術名詞
布局我們用html5+css3
我們會用reset.css重置瀏覽器的默認樣式
JS框架的話我們選用的是jQuery(也可能是Zepto)
我們用版本控制工具git來協同開發
我們會基于gulp搭建的前端自動化工程來開發（里面包含有我們的專案結構、我們需要參考的第三方庫等一些資訊，我們還實作了sass編譯、CSS3加前綴等的自動化）
我們的專案中還用到了表單驗證validate插件、圖片懶加載Lazyload插件

2. 你遇到過比較難的技術問題是？你是如何解決的？

3. 常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？

4. 除了前端以外還了解什么其它技術么？你最最厲害的技能是什么？

5. 對前端開發工程師這個職位是怎么樣理解的？它的前景會怎么樣？

前端是最貼近用戶的程式員，比后端、資料庫、產品經理、運營、安全都近，
1、實作界面互動
2、提升用戶體驗
3、有了Node.js，前端可以實作服務端的一些事情
前端是最貼近用戶的程式員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，
參與專案，快速高質量完成實作效果圖，精確到1px；
與團隊成員，UI設計，產品經理的溝通；
做好的頁面結構，頁面重構和用戶體驗；
處理hack，兼容、寫出優美的代碼格式；
針對服務器的優化、擁抱最新前端技術，

6. 你的優點是什么？缺點是什么？

覺得有幫助的小伙伴點個贊~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/69570.html

標籤：其他

上一篇：git rebase 與 merge 的那些事兒~（詳細圖解，通俗易懂）

下一篇：Vue Cli 3 初體驗（全面詳解）

前端面試題匯總大全（含答案）-- 持續更新

一、HTML 篇

1. 簡述一下你對 HTML 語意化的理解？

2. 標簽上 title 與 alt 屬性的區別是什么？

3. iframe的優缺點？

4. href 與 src？

二、CSS 篇

1. 介紹一下 CSS 的盒子模型？

2. css 選擇器優先級？

3. 垂直居中幾種方式？

4. 簡明說一下 CSS link 與 @import 的區別和用法？

5. rgba和opacity的透明效果有什么不同？

6. display:none和visibility:hidden的區別？

7. position的值， relative和absolute分別是相對于誰進行定位的？

三、HTML / CSS 混合篇

1. HTML5、CSS3 里面都新增了那些新特性？

2. BFC 是什么？

3. 常見兼容性問題？

四、JS 篇

1. JS 資料型別 ?

2. 判斷一個值是什么型別有哪些方法？

3. null 和 undefined 的區別？

4. 怎么判斷一個變數arr的話是否為陣列（此題用 typeof 不行）？

5. “ ===”、“ ==”的區別？

6. “eval是做什么的？

7. 箭頭函式有哪些特點？

8. var、let、const 區別？

9. new運算子具體干了什么呢？

10. JSON 的了解？

11. documen.write 和 innerHTML 的區別？

12. ajax程序？

13. 請解釋一下 JavaScript 的同源策略？

14. 介紹一下閉包和閉包常用場景？

15. javascript的記憶體(垃圾)回識訓制？

16. JavaScript原型，原型鏈 ? 有什么特點？

五、Vue 篇

1. 談談你對MVVM開發模式的理解？

2. v-if 和 v-show 有什么區別？

3. 你使用過 Vuex 嗎？

4. 說說你對 SPA 單頁面的理解，它的優缺點分別是什么？

5. Class 與 Style 如何動態系結？

6. 怎樣理解 Vue 的單向資料流？

7. computed 和 watch 的區別和運用的場景？

8. 直接給一個陣列項賦值，Vue 能檢測到變化嗎？

9. 談談你對 Vue 生命周期的理解？

10. Vue 的父組件和子組件生命周期鉤子函式執行順序？

11. 父組件可以監聽到子組件的生命周期嗎？

12. 談談你對 keep-alive 的了解？

13. 組件中 data 為什么是一個函式？

14. v-model 的原理？

15. Vue 組件間通信有哪幾種方式？

16. 使用過 Vue SSR 嗎？說說 SSR？

17. vue-router 路由模式有幾種？

18. 能說下 vue-router 中常用的 hash 和 history 路由模式實作原理嗎？

19. Vue 框架怎么實作物件和陣列的監聽？

20. Vue 是如何實作資料雙向系結的？

21. Vue 怎么用 vm.$set() 解決物件新增屬性不能回應的問題 ？

22. 虛擬 DOM 的優缺點？

23. 虛擬 DOM 實作原理？

24. Vue 中的 key 有什么作用？

25. 你有對 Vue 專案進行哪些優化？

26. 對于 vue3.0 特性你有什么了解的嗎？

六、其他雜項篇

1. 常見的瀏覽器內核有哪些？

2. 網頁前端性能優化的方式有哪些？

3. 網頁從輸入網址到渲染完成經歷了哪些程序？

4. 執行緒與行程的區別？

5. HTTP常見的狀態碼？

6. 圖片懶加載？

7. 移動端性能優化？

8. TCP 傳輸的三次握手、四次揮手策略

9. HTTP 和 HTTPS，為什么HTTPS安全？

七、主觀題篇

1. 你都做過什么專案呢？具體聊某一個專案中運用的技術.

2. 你遇到過比較難的技術問題是？你是如何解決的？

3. 常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？

4. 除了前端以外還了解什么其它技術么？你最最厲害的技能是什么？

5. 對前端開發工程師這個職位是怎么樣理解的？它的前景會怎么樣？

6. 你的優點是什么？缺點是什么？

覺得有幫助的小伙伴點個贊~

21. Vue 怎么用 vm.$set() 解決物件新增屬性不能回應的問題？