最全前端面試總結來襲！抓緊收藏了！

1。盒子模型

一個盒子中主要的屬性就5個：width、height、padding（內邊距）、border、margin（外邊距）。

盒模型有標準盒模型和IE的盒模型，

IE盒模型：

不同之處就是標準盒模型的內容大小就是content的大小，而IE的則是content + padding +border 總的大小。

那麼隨之而來第二個問題–怎麼設定這兩種模型呢？

很簡單，透過設定 box-sizing：content-box（W3C）/border-box（IE）就可以達到自由切換的效果。

2。js有幾種資料型別？null與undefined的區別？

JS有7種資料型別：三種基本型別（數字，字串，布林），兩種引用資料型別（物件，陣列），兩種特殊資料型別（undefined，null）

其中上面的四種（undefined， number， string， boolean）屬於簡單的值型別，不是物件。

剩下的幾種情況——函式、陣列、物件、null、new Number（10）都是物件。他們都是引用型別。

值型別的型別判斷用typeof，引用型別的型別判斷用instanceof。

null與undefined的區別

undefined表示“缺少值”，就是此處應該有一個值，但是還沒有定義，undefined型別只有一個值，undefined。

（1）所有已宣告但是沒有初始化的變數，預設值都為undefined。

（2）函式沒有明確返回值的時候，會預設返回undefined。

null為一個空指標物件null表示“沒有物件”，即該處不應該有值

當函式返回的物件不存在時，返回null。

當某個物件不需要時，可將值設為null。

3。js閉包

閉包是指有權訪問另一個函式作用域變數的函式。

清晰的講：閉包就是一個函式，這個函式能夠訪問其他函式的作用域中的變數。

建立閉包的通常方式，是在一個函式內部建立另一個函式。

由於作用域鏈的結構，外圍函式是無法訪問內部變數的，為了能夠訪問內部變數，我們就可以使用閉包，閉包的本質還是函式

4。重繪和迴流

只是樣式的變化，不會引起DOM樹變化，頁面佈局變化的行為叫重繪，且重繪不一定會伴隨迴流

引起DOM樹結構變化，頁面佈局變化的行為叫回流，且迴流一定伴隨重繪。

什麼情況下回導致迴流，如何避免迴流？

1。頁面初次渲染

2。瀏覽器視窗尺寸改變

resize事件發生也會引起迴流。

3。DOM的增刪行為

比如你要刪除某個節點，給某個父元素增加子元素，這類操作都會引起迴流。

如果要加多個子元素，最好使用documentfragment。（讓要操作的元素進行離線處理，處理完事以後再一起更新）

documentFragment是一個儲存多個element的容器物件（儲存在記憶體）當更新其中的一個或者多個element時，頁面不會更新。只有當documentFragment容器中儲存的所有element更新後再將其插入到頁面中才能更新頁面。

documentFragment用來批次更新

4。幾何屬性的變化

比如元素寬高變了，border變了，字型大小變了，這種直接會引起頁面佈局變化的操作也會引起迴流。

如果你要改變多個屬性，最好將這些屬性定義在一個class中，直接修改class名，這樣只用引起一次迴流。

5。元素位置的變化

改一個元素的左右margin，padding之類的操作

所以在做元素位移的動畫，不要更改margin之類的屬性，使用定位脫離文件流後改變位置會更好

5。本地儲存和離線快取

5.1本地儲存

1.cookie

（1）在h5之前，儲存主要用的是cookie。cookie會隨著每次http請求頭資訊一起傳送，無形中增加了網路流量，另外，cookie能儲存的資料容量有限，根據瀏覽器型別不同而不同

（2）cookie的優缺點

優點：

可控制過期時間，使其不會長期有效

可擴充套件、可用性比較好

可加密減少cookie被破解的可能性

缺點：

數量和長度有限制，最多20條，最長不能超過4k

在請求頭上帶著資料安全性差

（3）cookie的應用場景：主要應用：購物車、客戶端登入

2.localStorage

（1）localStorage（本地儲存），可以長期儲存資料，沒有時間限制，一天，一年，兩年甚至更長，資料都可以使用

（2）優缺點

優點：

localStorage拓展了cookie的4k限制

localStorage可以將第一次請求的5M大小資料直接儲存到本地，相比於cookie可以節約頻寬

localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage

缺點：

需要手動刪除，否則長期存在

瀏覽器大小不一，版本的支援也不一樣

localStorage只支援string型別的儲存，JSON物件需要轉換

localStorage本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間，會導致頁面變卡

特點：

同源策略限制、只在本地儲存、永久儲存、同瀏覽器共享

（3）應用場合

資料比較大的臨時儲存方案。如線上編輯文章時的自動儲存。

多頁面訪問共同資料。sessionStorage只適用於同一個標籤頁，localStorage相比而言可以在多個標籤頁中共享資料。

3.sessionStorage

（1）sessionStorage（會話儲存），只有在瀏覽器被關閉之前使用，建立另一個頁面時同意可以使用，關閉瀏覽器之後資料就會消失

（2）特點

同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一埠下。

單標籤頁限制。sessionStorage操作限制在單個標籤頁中，在此標籤頁進行同源頁面訪問都可以共享sessionStorage資料。

只在本地儲存。seesionStorage的資料不會跟隨HTTP請求一起傳送到伺服器，只會在本地生效，並在關閉標籤頁後清除資料

儲存方式。seesionStorage的儲存方式採用key、value的方式。value的值必須為字串型別（傳入非字串，也會在儲存時轉換為字串。）。

儲存上限限制：不同的瀏覽器儲存的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下。

（3）應用場合：sessionStorage 非常適合單頁應用程式，可以方便在各業務模組進行傳值。

5.2離線快取

Application Cache （Manifest）

1）使用方法：

1> 在html標籤新增manifest屬性

在頁面的html標籤中新增manifest屬性，屬性值為manifest檔案的路徑。如：

2）編寫manifest檔案

manifest檔案是簡單的文字檔案，它會告知瀏覽器需要快取的內容以及不需要快取的內容。

manifest檔案可分為三部分：

（1） CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取

（2）NETWORK - 在此標題下列出的檔案需要與伺服器的連線，且不會被快取

（3）FALLBACK - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面）

3）離線快取與傳統瀏覽器快取區別：

瀏覽器快取（Browser Caching）是為了節約網路的資源加速瀏覽，瀏覽器在使用者磁碟上對最近請求過的文件進行儲存，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁碟顯示文件，這樣就可以加速頁面的閱覽

區別：

1、離線快取是針對整個應用，瀏覽器快取是單個檔案

2、離線快取斷網了還是可以開啟頁面，瀏覽器快取不行

3、離線快取可以主動通知瀏覽器更新資源

5.3、本地儲存和離線儲存有什麼不同

本地儲存與離線快取都是為了方便網頁的載入，提高使用者體驗等。

本地儲存一般儲存的都是資料，而離線快取一般儲存的是網頁等。

6。冒泡演算法思想

交換排序的基本思想是：兩兩比較待排序記錄的關鍵字，發現兩個記錄的次序相反時即進行交換，直到沒有反序的記錄為止。

應用交換排序基本思想的主要排序方法有：氣泡排序和快速排序。

7。vue中的key值作用

需要使用key來給每個節點做一個唯一標識，Diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

所以一句話，key的作用主要是為了高效的更新虛擬DOM

8。v-if和v-show的差別

v-if 是動態新增，當值為 false 時，是完全移除該元素，即 dom 樹中不存在該元素。

v-show 僅是隱藏 / 顯示，值為 false 時，該元素依舊存在於 dom 樹中。若其原有樣式設定了 display： none 則會導致其無法正常顯示

9。vue的生命週期

從開始建立、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、解除安裝等一系列過程

簡單講是一個元件從開始到最後消亡所經歷的各種狀態，就是一個元件的生命週期

一個vue例項在建立過程中呼叫的幾個生命週期鉤子。

1。beforeCreate 說明：在例項初始化之後，資料觀測 （data observer） 和 event/watcher 事件配置之前被呼叫 注意：此時，無法獲取 data中的資料、methods中的方法

2。created 這是一個常用的生命週期，可以呼叫methods中的方法、改變data中的資料。最常見的就是傳送ajax請求來對已經構建完畢的vue物件的靜態屬性進行一些初始化。

3。beforeMount 在掛載開始之前被呼叫

4。mounted 此時，vue例項已經掛載到頁面中，可以獲取到el中的DOM元素，進行DOM操作

5。beforeUpdate 資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。

6。updated 元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。

7。beforeDestroy 例項銷燬之前呼叫。在這一步，例項仍然完全可用。使用場景：例項銷燬之前，執行清理任務，比如：清除定時器等

8。destroyed 說明：Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。

10。跨域

1。 什麼是跨域請求

在 HTML 中，，

， ，