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 中，<a>, <form>, <img>, <script>, <iframe>, <link> 等標籤以及 Ajax 都可以指向一個資源地址，而所謂的跨域請求就是指：當前發起請求的域與該請求指向的資源所在的域不同時的請求。這裡的域指的是這樣的一個概念：我們認為如果 「協議 + 域名 + 埠號」 均相同，那麼就是同域。
舉個例子：假如一個域名為 aaa.cn的網站，它發起一個資源路徑為
aaa.cn/books/getBookInfo的 Ajax 請求，那麼這個請求是同域的，因為資源路徑的協議、域名以及埠號與當前域一致（例子中協議名默認為http，埠號默認為80）。但是，如果發起一個資源路徑為 bbb.com/pay/purchase的 Ajax 請求，因為請求域 http://bbb.com:80和發起請求的域 http://aaa.cn:80不同，那麼這個請求就是跨域請求。
域名、協議、埠有一個不同就不是同源，三者均相同，這兩個網站才是同源
2.跨域的解決方案
1、 通過jsonp跨域
jsonp的原理就是利用<script>標籤沒有跨域限制，通過<script>標籤src屬性，發送帶有callback參數的GET請求，服務端將接口返回數據拼湊到callback函數中，返回給瀏覽器，瀏覽器解析執行，從而前端拿到callback函數返回的數據。只能發送get一種請求。
2、跨域資源共享（CORS）
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。CORS需要瀏覽器和伺服器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低於IE10。
3、nginx代理跨域
nginx代理跨域，實質和CORS跨域原理一樣，通過配置文件設置請求響應頭Access-Control-Allow-Origin…等欄位。
1）nginx配置解決iconfont跨域
瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源伺服器中加入以下配置。
2）nginx反向代理接口跨域
跨域問題：同源策略僅是針對瀏覽器的安全策略。伺服器端調用HTTP接口只是使用HTTP協議，不需要同源策略，也就不存在跨域問題。
實現思路：通過Nginx配置一個代理伺服器域名與domain1相同，埠不同）做跳板機，反向代理訪問domain2接口，並且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域訪問。
4、nodejs中間件代理跨域
node中間件實現跨域代理，原理大致與nginx相同，都是通過啟一個代理伺服器，實現數據的轉發，也可以通過設置cookieDomainRewrite參數修改響應頭中cookie中域名，實現當前域的cookie寫入，方便接口登錄認證。
5、document.domain + iframe跨域
此方案僅限主域相同，子域不同的跨域應用場景。實現原理：兩個頁面都通過js強制設置document.domain為基礎主域，就實現了同域。
6、location.hash + iframe跨域
實現原理： a欲與b跨域相互通信，通過中間頁c來實現。 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。
7、window.name + iframe跨域
window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載後依舊存在，並且可以支持非常長的 name 值（2MB）。
通過iframe的src屬性由外域轉向本地域，跨域數據即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。
8、postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數不多可以跨域操作的window屬性之一，它可用於解決以下方面的問題：
頁面和其打開的新窗口的數據傳遞多窗口之間消息傳遞頁面與嵌套的iframe消息傳遞上面三個場景的跨域數據傳遞9、WebSocket協議跨域
WebSocket protocol是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實現。
原生WebSocket API使用起來不太方便，我們使用http://Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。
小結
以上就是9種常見的跨域解決方案，jsonp（只支持get請求，支持老的IE瀏覽器）適合加載不同域名的js、css，img等靜態資源；CORS（支持所有類型的HTTP請求，但瀏覽器IE10以下不支持）適合做ajax各種跨域請求；Nginx代理跨域和nodejs中間件跨域原理都相似，都是搭建一個伺服器，直接在伺服器端請求HTTP接口，這適合前後端分離的前端項目調後端接口。document.domain+iframe適合主域名相同，子域名不同的跨域請求。postMessage、websocket都是HTML5新特性，兼容性不是很好，只適用於主流瀏覽器和IE10+。
11.http狀態碼
HTTP狀態碼總的分為五類：
1開頭：信息狀態碼
2開頭：成功狀態碼
3開頭：重定向狀態碼
4開頭：客戶端錯誤狀態碼
5開頭：服務端錯誤狀態碼
1XX：信息狀態碼
2XX：成功狀態碼
3XX：重定向狀態碼
4XX：客戶端錯誤狀態碼
5XX：服務端錯誤狀態碼
12.MVVM模式
MVVM 由 Model、View、ViewModel 三部分構成，Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯；View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象。
在MVVM架構下，View 和 Model 之間並沒有直接的聯繫，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為幹涉，因此開發者只需關注業務邏輯，不需要手動操作DOM， 不需要關注數據狀態的同步問題，複雜的數據狀態維護完全由 MVVM 來統一管理。
原作者姓名：吳小花的博客原出處：CSDN