背景

「
記一下近大半個月的面試，後面繼續補充內容跟答案css

先放個圖放鬆一下html

html篇

1.html5新特性有哪些？

css篇

1.css盒子模型？

答：盒子模型分爲兩種：IE盒子模型，標準盒子模型。 IE盒子模型 box-sizing:border-box;他的寬高爲border+padding+content。標準盒子模型：box-sizing:content-box;；他的寬高就是content的寬高。vue

2.什麼BFC？BFC能夠怎麼玩？

答：全稱：block format context（塊級格式化上下文）。是一個獨立不干擾外界也不受外界干擾的盒子。建立bfc的經常使用方式有：position：absolute;display:inline-block;float:left/right;overflow:hidden; BFC佈局規則： 1.內部的Box會在垂直方向，一個接一個地放置。 2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊 3.每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。 4.BFC的區域不會與float box重疊。 5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。 6.計算BFC的高度時，浮動元素也參與計算。html5

3.水平垂直居中方法？

答：比較多，能夠自行百度react

4.說一下css3 僞元素？其餘的css3特性？

答：before，after CSS3 特性建議看一遍，深究的話看公司需求。webpack

5.說一下css3動畫吧？

答：連接同上css3

6.說一下css3選擇器？

答：連接同上web

js篇

1.說一下什麼是事件委託？事件冒泡？事件捕獲？爲何瀏覽器有兩種事件機制？

答：瀏覽器爲何有兩種事件機制，是由於各個瀏覽器的差別問題，在IE使用的是事件冒泡，其餘瀏覽器則是事件捕獲。面試

2.改變this指向的問題？bind，call，apply的區別。bind，call，apply是放在哪一個原型鏈上的？爲何

答：bind，apply，call是放在Function.prototype上

3.說一下addEventListener？

答：第三個參數是默認事件在冒泡階段執行，默認爲false，true則爲在捕獲階段執行。

4.說一下promise？口述一下怎麼實現一個promise？promise的其餘api

答：Promise

5.說一下let，const，var的區別

答：let,const,var區別

6.談一下閉包吧?

答：個人理解是在外層函數內部經過return 一個內層函數將外層函數內部的執行上下文保存到外部引用。tips：不管什麼時候聲明新函數並將其賦值給變量，都要存儲函數定義和閉包，閉包包含在函數建立時做用域中的全部變量，相似於揹包，函數定義附帶一個小揹包，包裏存儲了函數定義建立時做用域中的全部變量。

11.談一下怎麼判斷是數組？

答：經常使用的 1. arr instanceof Array 2.Object.prototype.toString.call(arr) 3.Array.isArray(arr)

12.談一下js數據類型？

答：基本類型：

string（字符串）
boolean（布爾值）
number（數字）
symbol（符號）
null（空值）
undefined（未定義）

tips：

string 、number 、boolean 和 null undefined 這五種類型統稱爲原始類型（Primitive），表示不能再細分下去的基本類型;
symbol是ES6中新增的數據類型，symbol 表示獨一無二的值，經過 Symbol 函數調用生成，因爲生成的 symbol 值爲原始類型，因此 Symbol 函數不能使用new 調用；
null 和 undefined 一般被認爲是特殊值，這兩種類型的值惟一，就是其自己。

引用類型：Object

13.談一下能夠改變數組的方法？他們的區別？

答：【乾貨】js 數組詳細操做方法及解析合集

14.談一下防抖節流？怎麼實現？

答：JS的防抖與節流

vue篇

1.談一下vue的雙向綁定原理?

答：

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

實現一個解析器 Compile：解析 Vue 模板指令，將模板中的變量都替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，調用更新函數進行數據更新。

實現一個訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通訊的橋樑，主要的任務是訂閱 Observer 中的屬性值變化的消息，當收到屬性值變化的消息時，觸發解析器 Compile 中對應的更新函數。

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

借個圖（來自書籍深刻淺出Vue.js）：

2.談一下computed和watch的區別？

答：

computed：是計算屬性，依賴其它屬性值，而且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時纔會從新計算 computed 的值；

watch：更多的是「觀察」的做用，相似於某些數據的監聽回調，每當監聽的數據變化時都會執行回調進行後續操做；

運用場景：1.當咱們須要進行數值計算，而且依賴於其它數據時，應該使用 computed，由於能夠利用 computed 的緩存特性，避免每次獲取值時，都要從新計算；

2.當咱們須要在數據變化時執行異步或開銷較大的操做時，應該使用 watch，使用 watch 選項容許咱們執行異步操做 ( 訪問一個 API )，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這些都是計算屬性沒法作到的。

3.談一下vue的生命週期吧？

答：借圖

4.談一下vue至關於原生js的好處有哪些？vue的特色？

答：可根據我的狀況簡述。

1.數據雙向綁定2.虛擬dom3.組件化系統4.vue生態5.市場

MVVM 是 Model-View-ViewModel 的縮寫 Model: 表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。咱們能夠把Model稱爲數據層，由於它僅僅關注數據自己，不關心任何行爲 View: 用戶操做界面。當ViewModel對Model進行更新的時候，會經過數據綁定更新到View ViewModel：業務邏輯層，View須要什麼數據，ViewModel要提供這個數據；View有某些操做，ViewModel就要響應這些操做，因此能夠說它是Model for View. 總結： MVVM模式簡化了界面與業務的依賴，解決了數據頻繁更新。MVVM 在使用當中，利用雙向綁定技術，使得 Model 變化時，ViewModel 會自動更新，而 ViewModel 變化時，View 也會自動變化。

5.談一下vue的編譯原理？

答：

解析器（parser）的做用是將模板字符串轉換成 element ASTs。

優化器（optimizer）的做用是找出那些靜態節點和靜態根節點並打上標記。

代碼生成器（code generator）的做用是使用 element ASTs 生成 render函數代碼（generate render function code from element ASTs）。

解析器（parser）的原理是一小段一小段的去截取字符串，而後維護一個 stack 用來保存DOM深度，每截取到一段標籤的開始就 push 到 stack 中，當全部字符串都截取完以後也就解析出了一個完整的 AST。

優化器（optimizer）的原理是用遞歸的方式將全部節點打標記，表示是不是一個靜態節點，而後再次遞歸一遍把靜態根節點也標記出來。

代碼生成器（code generator）的原理也是經過遞歸去拼一個函數執行代碼的字符串，遞歸的過程根據不一樣的節點類型調用不一樣的生成方法，若是發現是一顆元素節點就拼一個_c(tagName, data, children) 的函數調用字符串，而後 data 和 children 也是使用 AST 中的屬性去拼字符串。最後拼出一個完整的 render 函數代碼。

借圖（easyhappy vue模板編譯原理）：

6.談一下vue的keep-alive的api？

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

1.通常結合路由和動態組件一塊兒使用，用於緩存組件；

2.提供 include 和 exclude 屬性，二者都支持字符串或正則表達式， include 表示只有名稱匹配的組件會被緩存，exclude 表示任何名稱匹配的組件都不會被緩存，其中 exclude 的優先級比 include 高；

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

7.談一下vue的路由模式有哪些？

答：

8.談一下vue的一些路由守衛？

答：

9.談一下vue的一些經常使用語法糖，v-model是怎麼實現的？v-for v-if是哪一個優先？

答：

10.談一下vue的組件通訊方式有哪些？

答：

11.談一下爲何直接給數組下標賦值監聽不到變化？怎麼解決?

答：

12.通常在哪一個生命週期裏請求接口？

答：

13.vue的虛擬dom的原理？

答：

14.談一下vue裏面key的做用？

答：

15.談一下vue項目的優化？

答：

16.談一下你在項目裏作了哪些比較有成就感的東西？

答：

17.談一下vue的mixin？本身封裝過組件嗎？封裝組件要考慮哪些東西？讓你封裝一個分頁組件你怎麼設計？

答：

18.手寫一個eventbus吧？

答：

19.談一下watch的兩個api？實現原理呢？

答：

其餘

1.談一下http協議？https和http的區別？

答：

2.談一下TCP/IP？談一下SSL/TLS？握手過程？

答：面試官，不要再問我三次握手和四次揮手

3.談一下XSS攻擊?CSRF攻擊呢？怎麼防範？

答：【面試篇】寒冬求職之你必需要懂的Web安全

4.談一下cookie？cookie是怎麼拼接的？

答：是用; 來拼接

5.談一下cookie，session的區別

答：

6.談一下請求頭裏面有什麼?

答：

7.談一下緩存？強緩存，協商緩存？

答：

8.談一下經常使用的狀態碼？

答：

9.談一下數字證書？https加密過程？先對稱加密仍是先非對稱加密？

答：先非對稱加密，後對稱加密

10.談一下http2.0的一些特色

答：

11.談一下從輸入url到頁面渲染髮生了什麼？

答：這裏能夠貼個很厲害的人的總結！

從輸入URL到頁面加載的過程？如何由一道題完善本身的前端知識體系！

12.談一下跨域吧？

答：前端常見跨域解決方案（全）

13.談一下webpack裏面loader，plugins是什麼?

答：

14.談一下想打包成兼容性很好的代碼應該怎麼作？

答：

15.談一下你項目中使用webpack作了哪些優化？

答：

16.談一下webpack的自動化路由？

答：

17.談一下webpack的基本配置參數？

答：

18.瞭解ts嗎？談一下ts的type和interface的區別？enum是什麼？編譯成es5會是什麼樣？

答：

19.react看你用過，和vue以爲有哪些區別？優劣？

答：

20.react生命週期？react頁面渲染原理？react裏的setState原理，是同步仍是異步？

答：

21.什麼是函數式組件？react hooks和class寫法的區別？

答：

22.useEffect是幹什麼的？詳細介紹一下？

答：

23.說一下設計模式吧？日常用到哪些設計模式？

答：不打廣告，能夠買一下修言大佬的小冊，寫的好

24.談談項目性能優化？你剛剛提到了減小http請求是怎麼一個方法？什麼狀況拆分請求，什麼狀況下合併請求？

答：

25.談一下了解數據結構嗎？常見算法題？

答：我這個真的不是很瞭解，最近買了修言大佬的掘金小冊，惡補一下，順便貼一些最近再看的好文

我接觸過的前端數據結構與算法

前端該如何準備數據結構和算法？

前端數據結構與算法入門篇

26.瞭解過自動化部署嗎？

答：

27.瞭解websocket嗎？

答：

28.瞭解過webworker嗎？他的原理是什麼？

答：

總結：

面試也是總結的過程，也是對本身知識的梳理，經過面試進行查漏補缺，對本身的知識水平有一個認知，向大廠靠近。

因爲本人技術能力所限，若是相關錯誤請及時與我聯繫修改，謝謝！

本文使用 mdnice 排版

面試半個月，我寫下了這些總結

背景