1.瀏覽器緩存
? 瀏覽器每次發(fā)起請求，都會先在瀏覽器緩存中查找該請求的結果以及緩存標識?
? 強制緩存優(yōu)先于協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，
? 若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，
? 協商緩存由服務器決定是否使用緩存，若協商緩存失效，那么代表該請求的緩存失效，返回200，
? 重新返回資源和緩存標識，再存入瀏覽器緩存中；生效則返回304，繼續(xù)使用緩存。
? 強緩存 ? ? 1.Expires Expires: Wed, 22 Oct 2018 08:41:00 GMT
? ? ? ? ? ? ? ? ? ? 表示資源會在 Wed, 22 Oct 2018 08:41:00 GMT 后過期。（受限于本地時間，如果修改了本地時間，可能會造成緩存失效）
? ? ? ? ? ? ? ? ? ?2.Cache-Control? Cache-Control:max-age=300（超過300m，優(yōu)先級高于expires）
? 協商緩存 ??協商緩存就是強制緩存失效后，瀏覽器攜帶緩存標識向服務器發(fā)起請求協商緩存生效，返回304和Not Modified
? ? ? ? ? ? ? ? ? ? 1. Last-Modified（以秒計時，本地打開緩存文件，不能命中緩存）
? ? ? ? ? ? ? ? ? ? 2. ETag（當前資源文件的一個唯一標識(由服務器生成)，要優(yōu)于Last-Modified）
? ?實際應用 ?不常變化的資源 （Cache-Control: max-age=31536000）?靜態(tài)組件（Expires不過期）
? ? ? ? ? ? ? ? ? ?頻繁變動的資源 ? ?需要使用Cache-Control: no-cache 使瀏覽器每次都請求服務器，?配合 ETag 或者 Last-Modified 來驗證資源是否生效
2.安全策略
1、跨站腳本攻擊（XSS）
? ? ?一種“HTML注入”，用戶的數據被當成了HTML代碼一部分來執(zhí)行，從而產生了新的語義
? ? ?XSS的防御
? ??1、HttpOnly?（瀏覽器禁止頁面的Javascript訪問帶有HttpOnly屬性的cookie）
? ? 2.?輸入檢查?輸出檢查（XSS Filter）轉義字符，對于用戶的輸入應該是永遠不信任的。最普遍的做法就是轉義輸 ? ? ? ? ? 入輸出的內容，對于引號、尖括號、斜杠進行轉義
? ? 3、CSP ??CSP 本質上就是建立白名單，開發(fā)者明確告訴瀏覽器哪些外部資源可以加載和執(zhí)行
? ? ? ? ? ? ? ? ? ? 1.設置 HTTP Header 中的?Content-Security-Policy
? ? ? ? ? ? ? ? ? ? ?2.設置?meta?標簽的方式?<meta http-equiv="Content-Security-Policy">
2、CSRF（跨站點請求偽造）
? ? ??CSRF攻擊是攻擊者利用用戶身份操作用戶賬戶的一種攻擊方式，攻擊者構造出一個后端請求地址
? ? ?1、驗證碼
? ? ?2、由于Token的存在，攻擊者無法再構造出一個完整的URL實施CSRF攻擊
? ? ?3、不讓第三方網站訪問到用戶 Cookie
5.url請求到渲染，中間優(yōu)化
? ?1. 用戶輸入URL地址
? ?2. 瀏覽器解析URL解析出主機名
? 3. 瀏覽器將主機名轉換成服務器ip地址（瀏覽器先查找本地DNS緩存列表 沒有的話 再向瀏覽器默認的DNS服務器 ? ? 發(fā)送查詢請求 同時緩存）
? 4. 瀏覽器將端口號從URL中解析出來
? 5. 瀏覽器建立一條與目標Web服務器的TCP連接（三次握手）
? 6. 服務端返回html
? 7.瀏覽器渲染（渲染進程是多線程的，GUI渲染線程，js引擎線程，事件觸發(fā)線程，定時觸發(fā)器線程，異步http請求線程）
? - DOM樹構建
? - CSSOM樹構建
? - RenderObject樹構建
? - 布局
?- 繪制
**使用DNS預解析**
DNS ??在 一次請求中，DNS解析可以占到請求時間的三分之一左右（這點有待驗證），所以如果可以縮短DNS解析時間，就可以加快頁面的打開速度。?rel="dns-prefetch" 用以DNS預解析
減少DNS查找（例如原來有5個img server，分別為img1.xxx.com至img5.xxx.com，則現在可以減少到3個）
**請求**
1.盡量減少HTTP請求??（CSS sprites將背景圖片合并成一個文件）多個接口合并
2.避免空src或者是href值?<a href="#"></a>
空的src和href都會導致多余的HTTP請求，雖然不影響加載時間，但是會對服務器產生不必要的流量和壓力。瀏覽器仍然會向服務器發(fā)起一個 HTTP 請求
3.**避免重定向**3xx是重定向相關的HTTP響應代碼，避免404瀏覽器找不到資源的情況發(fā)生
4.**使Ajax可緩存**我們可能希望`GET`請求不被緩存$.ajaxSetup({ cache: false });
5.減小cookie大小? 減小cookie的大小，因為在發(fā)請求時瀏覽器會將cookie信息發(fā)送到server端，所以應該只在cookie中存必要的信息且越長度越小越好
6.利用瀏覽器緩存
**瀏覽器渲染**
1.壓縮資源（webpack）
2.CSS放在頂部，JS放在底部`defer`和 `async` 在網絡讀取（下載）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
3.重排reflow與重繪repaint
?只觸發(fā)重繪不觸發(fā)重排的一些CSS屬性：js盡量少訪問dom節(jié)點和css 屬性，不要通過父級來改變子元素樣式，最好 直接改變子元素樣式，改變子元素樣式盡可能不要影響父元素和兄弟元素的大小和尺寸，盡量通過class來設計元素 樣式，切忌用style 多次操作單個屬性
#### 代碼部分
for循環(huán)、迭代、同步、重定向、阻塞請求，未刪除重復、無用的代碼，未加入Async異步機制
6.水平垂直居中，兩邊固定中間自適應布局
position transform?
position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
flex布局
display: flex;//flex布局 justify-content: center;//使子項目水平居中 align-items: center;//使子項目垂直居中?
table-cell布局?
.wp{display: table-cell;text-align: center;vertical-align: middle;}.box{display: inline-block;}
absolute + calc
.wp { position: relative;}.box { position: absolute;; top: calc(50% -50px); left: calc(50% -50px);}
兩邊固定中間自適應布局
1).絕對定位法
2).使用自身浮動法
3、css3新特性，使用flex
4.. 雙飛翼布局
7.跨域，如何跨域，跨域圖片如何處理
? ? 域名、協議、端口有一個不同就不是同源，三者均相同，這兩個網站才是同源
? ??瀏覽器會對上面提到的跨域請求作出限制。瀏覽器之所以要對跨域請求作出限制，是出于安全方面的考慮，因為跨域請求有可能被不法分子利用來發(fā)動?CSRF攻擊。
?JSONP
JSONP 本質上是利用?<script><img><iframe>?等標簽不受同源策略限制，可以從不同域加載并執(zhí)行資源的特性，來實現數據跨域傳輸。
優(yōu)缺點：
JSONP 的優(yōu)點是：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運行。
JSONP 的缺點是：它只支持 GET 請求，而不支持 POST 請求等其他類型的 HTTP 請求
CORS
? 跨源資源共享?Cross-Origin Resource Sharing(CORS)?是一個新的 W3C 標準，它新增的一組HTTP首部字段，允許服務端其聲明哪些源站有權限訪問哪些資源
與 JSONP 的比較
JSONP 只能實現 GET 請求，而 CORS 支持所有類型的 HTTP 請求
使用 CORS ，開發(fā)者可以是使用普通的 XMLHttpRequest 發(fā)起請求和獲取數據，比起 JSONP 有更好的錯誤處理
雖然絕大多數現代的瀏覽器都已經支持 CORS，但是 CORS 的兼容性比不上 JSONP，一些比較老的瀏覽器只支持 JSONP
8.vuex
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。每一個 Vuex 應用的核心就是 store（倉庫）?！皊tore” 基本上就是一個容器，它包含著你的應用中大部分的狀態(tài) ( state )。
（1）Vuex 的狀態(tài)存儲是響應式的。當 Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應的組件也會相應地得到高效更新。
（2）改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化。
主要包括以下幾個模塊：
State：定義了應用狀態(tài)的數據結構，可以在這里設置默認的初始狀態(tài)。
Getter：允許組件從 Store 中獲取數據，mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性。
Mutation：是唯一更改 store 中狀態(tài)的方法，且必須是同步函數。
Action：用于提交 mutation，而不是直接變更狀態(tài)，可以包含任意異步操作。
Module：允許將單一的 Store 拆分為多個 store 且同時保存在單一的狀態(tài)樹中。
state
通過在根實例中注冊?store?選項，該 store 實例會注入到根組件下的所有子組件中，且子組件能通過this.$store?訪問到?this.$store.state.count
mapState?輔助函數
import{mapState}from'vuex'
computed:mapState([// 映射 this.count 為 store.state.count'count'])
Getters
我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對列表進行過濾并計數：
getters:{doneTodos:state=>{returnstate.todos.filter(todo=>todo.done)}}
mapGetters?輔助函數
import{mapGetters}from'vuex'
export default{// ...computed:{// 使用對象展開運算符將 getter 混入 computed 對象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}}
Mutation
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。
mutations:{increment(state){// 變更狀態(tài)state.count++}
store.commit('increment')
Action
store.dispatch('increment')
9.vue nextick與宏任務微任務瀏覽器循環(huán)
vue的nextTick方法的實現原理了，總結一下就是：
vue用異步隊列的方式來控制DOM更新和nextTick回調先后執(zhí)行
microtask因為其高優(yōu)先級特性，能確保隊列中的微任務在一次事件循環(huán)前被執(zhí)行完畢
因為兼容性問題，vue不得不做了microtask向macrotask的降級方案
任務隊列又分為macro-task（宏任務）與micro-task（微任務），在最新標準中，它們被分別稱為task與jobs。
macro-task大概包括：script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。
micro-task大概包括: process.nextTick, Promise, Object.observe(已廢棄), MutationObserver(html5新特性)
其中，nextTick隊列會比Promie先執(zhí)行。nextTick中的可執(zhí)行任務執(zhí)行完畢之后，才會開始執(zhí)行Promise隊列中的任務。
當所有可執(zhí)行的微任務執(zhí)行完畢之后，這一輪循環(huán)就表示結束了。下一輪循環(huán)繼續(xù)從宏任務隊列開始執(zhí)行。
這個時候，script已經執(zhí)行完畢，所以就從setTimeout隊列開始執(zhí)行。
10.vue 原理以及diff算法和虛擬dom
輸入框內容變化時，Data 中的數據同步變化。即 View => Data 的變化。
Data 中的數據變化時，文本節(jié)點的內容同步變化。即 Data => View 的變化。
其中，View?變化更新?Data?，可以通過事件監(jiān)聽的方式來實現，所以 Vue 的數據雙向綁定的工作主要是如何根據?Data?變化更新?View。
Vue 主要通過以下 4 個步驟來實現數據雙向綁定的：
實現一個監(jiān)聽器 Observer：對數據對象進行遍歷，包括子屬性對象的屬性，利用 Object.defineProperty() 對屬性都加上 setter 和 getter。這樣的話，給這個對象的某個值賦值，就會觸發(fā) setter，那么就能監(jiān)聽到了數據變化。
實現一個解析器 Compile：解析 Vue 模板指令，將模板中的變量都替換成數據，然后初始化渲染頁面視圖，并將每個指令對應的節(jié)點綁定更新函數，添加監(jiān)聽數據的訂閱者，一旦數據有變動，收到通知，調用更新函數進行數據更新。
實現一個訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁 ，主要的任務是訂閱 Observer 中的屬性值變化的消息，當收到屬性值變化的消息時，觸發(fā)解析器 Compile 中對應的更新函數。
虛擬 DOM 的實現原理主要包括以下 3 部分：
用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象；
diff 算法 — 比較兩棵虛擬 DOM 樹的差異；
pach 算法 — 將兩個虛擬 DOM 對象的差異應用到真正的 DOM 樹。
優(yōu)點：
保證性能下限：框架的虛擬 DOM 需要適配任何上層 API 可能產生的操作，它的一些 DOM 操作的實現必須是普適的，所以它的性能并不是最優(yōu)的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虛擬 DOM 至少可以保證在你不需要手動優(yōu)化的情況下，依然可以提供還不錯的性能，即保證性能的下限；
無需手動操作 DOM：我們不再需要手動去操作 DOM，只需要寫好 View-Model 的代碼邏輯，框架會根據虛擬 DOM 和 數據雙向綁定，幫我們以可預期的方式更新視圖，極大提高我們的開發(fā)效率；
diff算法（一哈哈學不完）
11proxy與defineproperty
利用Proxy或Object.defineProperty生成的Observer針對對象/對象的屬性進行"劫持",在屬性發(fā)生變化后通知訂閱者
Object.defineProperty()??只能對屬性進行數據劫持，不能對整個對象進行劫持，同理無法對數組進行劫持我們就能知道 Vue 框架是通過遍歷數組 和遞歸遍歷對象，從而達到利用 Object.defineProperty() 也能對對象和數組（部分方法的操作）進行監(jiān)聽。
Proxy 的優(yōu)勢如下:
Proxy 可以直接監(jiān)聽對象而非屬性；
Proxy 可以直接監(jiān)聽數組的變化；
Proxy 有多達 13 種攔截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的；
Proxy 返回的是一個新對象,我們可以只操作新的對象達到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改；
Proxy 作為新標準將受到瀏覽器廠商重點持續(xù)的性能優(yōu)化，也就是傳說中的新標準的性能紅利；
Object.defineProperty 的優(yōu)勢如下:
兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,而且無法用 polyfill 磨平，因此 Vue 的作者才聲明需要等到下個大版本( 3.0 )才能用 Proxy 重寫。
12.項目中用的哪些模式（一哈哈學不完）
13.純函數
如果函數的調用參數相同，則永遠返回相同的結果。它不依賴于程序執(zhí)行期間函數外部任何狀態(tài)或數據的變化，必須只依賴于其輸入參數。
14.vue-router 路由模式有幾種？
hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；
我們可以使用 hashchange 事件來監(jiān)聽 hash 值的變化，從而對頁面進行跳轉（渲染）。
history :? 依賴 HTML5 History API 和服務器配置。具體可以查看 HTML5 History 模式；
history.pushState() 和 history.repalceState()。前者是新增一個歷史記錄，后者是直接替換當前的歷史記錄，如下所示：
