1. Vue實現雙向綁定的原理
vue實現數據雙向綁定主要是：采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變更雙向綁定效果。
2.Vue組件間的參數傳遞
1.父組件與子組件傳值
父組件傳給子組件：子組件通過props方法接受數據;
子組件傳給父組件：$emit方法傳遞參數
2.非父子組件間的數據傳遞，兄弟組件傳值
eventBus，就是創建一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。（雖然也有不少人推薦直接用VUEX，具體來說看需求咯。技術只是手段，目的達到才是王道。）
3. Vue路由的實現：hash模式和history模式
hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取；
特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如 http://www.xxx.com，因此對於后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。
history 模式下，前端的 URL 必須和實際向后端發起請求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網里如此描述：“不過這種模式要玩好，還需要后台配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
4. Vue路由的鈎子函數
首頁可以控制導航跳轉，beforeEach，afterEach等，一般用於頁面title的修改。一些需要登錄才能調整頁面的重定向功能。
beforeEach主要有3個參數to，from，next：
to：route即將進入的目標路由對象，
from：route當前導航正要離開的路由
next：function一定要調用該方法resolve這個鈎子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉
5. Vue的生命周期
beforeCreate（創建前） 在數據觀測和初始化事件還未開始
created（創建后） 完成數據觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來
beforeMount（載入前） 在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data里面的數據和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入后） 在el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前） 在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鈎子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新后） 在由於數據更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鈎子在服務器端渲染期間不被調用。
beforeDestroy（銷毀前） 在實例銷毀之前調用。實例仍然完全可用。
destroyed（銷毀后） 在實例銷毀之后調用。調用后，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鈎子在服務器端渲染期間不被調用。
1.什么是vue生命周期？
答： Vue 實例從創建到銷毀的過程，就是生命周期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。2.vue生命周期的作用是什么？
答：它的生命周期中有多個事件鈎子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。3.vue生命周期總共有幾個階段？
答：它可以總共分為8個階段：創建前/后, 載入前/后,更新前/后,銷毀前/銷毀后。4.第一次頁面加載會觸發哪幾個鈎子？
答：會觸發 下面這幾個beforeCreate, created, beforeMount, mounted 。5.DOM 渲染在 哪個周期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。
6. Vuex是什么？怎么使用？哪種功能場景使用它？
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含着你的應用中大部分的狀態 ( state )。
在main.js引入store，注入。新建了一個目錄store，….. export 。
場景有：單頁應用中，組件之間的狀態、音樂播放、登錄狀態、加入購物車state ： Vuex 使用單一狀態樹,即每個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不沖突。存放的數據狀態，不可以直接修改里面的數據。
mutations ： 修改Vuex 的 store 中的狀態或數據。
getters：類似vue的計算屬性，主要用來過濾一些數據。
action ：可以理解為通過將mutations里面處里數據的方法變成可異步的處理數據的方法，簡單的說就是異步操作數據。view 層通過 store.dispath 來分發 action。
modules：項目特別復雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。
7. Vue 中key有什么作用？
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM。
8. Vue路由跳轉有哪幾種？
1.router-link
不帶參數
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。
帶參數
<router-link :to="{name:'home', params: {id:1}}">2.this.$router.push() (函數里面調用)
不帶參數
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
query傳參
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
9. 怎樣理解 Vue 的單向數據流？
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。
這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。
這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。
子組件想修改時，只能通過 $emit 派發一個自定義事件，父組件接收到后，由父組件修改。
10. 深拷貝和淺拷貝的區別
首先深復制和淺復制只針對像 Object, Array 這樣的復雜對象的。簡單來說，淺復制只復制一層對象的屬性，而深復制則遞歸復制了所有層級
1.因為淺復制只會將對象的各個屬性進行依次復制，並不會進行遞歸復制，而 JavaScript 存儲對象都是存地址的，所以淺復制會導致 obj.arr 和 shallowObj.arr 指向同一塊內存地址
shallowObj.arr[1] = 5;
obj.arr[1] // = 52.而深復制則不同，它不僅將原對象的各個屬性逐個復制出去，而且將原對象各個屬性所包含的對象也依次采用深復制的方法遞歸復制到新對象上。這就不會存在上面 obj 和 shallowObj 的 arr 屬性指向同一個對象的問題。
var obj = { a:1, arr: [1,2] };
var obj2 = deepCopy(obj);
1.在瀏覽器輸入URL www.github.com
2.瀏覽器解析URL，
3.瀏覽器與ISP通信，通過DNS查找到域名對應的IP，發給瀏覽器
4.瀏覽器將拿這個IP地址和URL中的端口號（HTTP協議默認端口號是80，HTTPS默認端口號是443），打開一個TCP套接字連接。這時，瀏覽器和服務器就建立了連接。
5.瀏覽器發送一個HTTP請求至Web服務器，去獲取www.github.com的主頁
6.Web服務器接收請求，並查找HTML頁面。如果該頁面存在，該Web服務器准備響應並把它發回給你的瀏覽器。如果服務器找不到你請求的頁面，它將發送一個404錯誤消息，404表示“頁面未找到”
7.瀏覽器接收到的HTML頁面從頭到尾掃描一遍，並去尋找其它相關的資源，如圖片、CSS文件、JavaScript腳本文件等等,通過相同方式獲取到資源
8.一旦瀏覽器加載完HTML涉及到的所有資源，頁面最終會加載在瀏覽器窗體里，並關閉與服務器的連接。
12. 強緩存和協商緩存
強緩存（Expires/max-age）
強致緩存。在HTTP1.0中強緩存通過Expires響應頭實現。
在HTTP1.1中，Cache-control響應頭實現，其中max-age=xxx表示緩存資源將在xxx秒后過期。協商緩存（Last-Modified/E-tag）
協商緩存。在HTTP1.0中第一次請求資源時通過服務器設置Last-Modified響應頭，填入最后修改時間。在之后的每次請求中都會在請求頭中帶上If-Modified-Since字段，如果未更新就返回304，指導瀏覽器從本地緩存中讀取。
在HTTP1.1中，Etag設置響應頭緩存標志。請求頭附帶If-None-Match。強緩存和協商緩存的區別總結：
1.強緩存只有首次請求會跟服務端通信，讀取緩存資源時不用發送請求。返回200。
2.協商緩存總會與服務器交互，第一次是拿數據和E-tag的過程，之后每次憑E-tag詢問是否更新。命中緩存返回304。
3.二者之間最大的區別就是：強緩存只通信一次；協商緩存每次都通信詢問。
13. Vue的diff算法和DOM原理
在數據發生變化，vue是先根據真實DOM生成一顆 virtual DOM ，當 virtual DOM 某個節點的數據改變后會生成一個新的 Vnode ，然后 Vnode 和 oldVnode 作對比，發現有不一樣的地方就直接修改在真實的DOM上，然后使 oldVnode 的值為 Vnode ，來實現更新節點。
1.原理簡述：
（1）先去同級比較，然后再去比較子節點（2）先去判斷一方有子節點一方沒有子節點的情況
（3）比較都有子節點的情況
（4）遞歸比較子節點
虛擬 DOM 的實現原理主要包括以下 3 部分：
（1）用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象；
（2）diff 算法 — 比較兩棵虛擬 DOM 樹的差異；
（3）pach 算法 — 將兩個虛擬 DOM 對象的差異應用到真正的 DOM 樹。
14. promise是什么？怎么使用？
1、主要用於異步計算
2、可以將異步操作隊列化，按照期望的順序執行，返回符合預期的結果
3、可以在對象之間傳遞和操作promise，幫助我們處理隊列首先，Promise 是一個構造函數，對回調函數的一種封裝，對異步編程的一種改進，用同步的方式表達出來。可以說Promise是ajax的執行狀態管理工具，它還應用到Vue里的fetch等方面。該構造函數身上有兩個方法：Promise.all()，和Promise.race()。
其實，我們應用的重點是：new出來的promise對象。它有三種狀態：pending（進行中），resolved（已完成），rejected（已失敗），狀態一旦發生，就不能改變。執行new的時候狀態就開始變化。promise對象身上有兩個方法：then()，和catch()。語法: var oP =new Promise(function(resolve,reject){
reject(data); || resolve(data);
}) ;
oP.then(function(data){ }, function(data){ }) //第一參數是在oP狀態為resolved時執行。第二參數是在oP狀態為rejected時執行（也叫錯誤捕獲）。
oP.catch( function(data){ })。 //捕獲錯誤，出錯時不捕獲錯誤會報錯。
oP.then(function(data){ }).then(function(data){ }) //then()還可以傳遞，但是數據data不會傳遞（即第二個data為undefined）。
oP.then(function(data){ }, function(data){ }).catch( function(data){ }) //catch不會傳遞執行錯誤，只會執行一次（即這里的catch不會執行）。
所以，我們在遇到回調函數層層嵌套時，就可以將函數返回一個promise對象。利用 then方法+catch方法 來處理。
二、使用promise的好處是：
1.代碼結構更加扁平且更可讀，清晰明了。2.能解決回調地獄問題。
3.可將數據請求和業務邏輯分離開來。
4.便於管理維護。
5.能更好的捕獲錯誤。
15. Vue與Angular以及React的區別？
1.與AngularJS的區別
相同點：
都支持指令：內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定；都不支持低端瀏覽器。不同點：
AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀；在性能上，AngularJS依賴對數據做臟檢查，所以Watcher越多越慢；Vue.js使用基於依賴追蹤的觀察並且使用異步隊列更新，所有的數據都是獨立觸發的。2.與React的區別
相同點：
React采用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯后使用；中心思想相同：一切都是組件，組件實例之間可以嵌套；都提供合理的鈎子函數，可以讓開發者定制化地去處理需求；都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發中都支持mixins的特性。
不同點：
React采用的Virtual DOM會對渲染出來的結果做臟檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作Virtual DOM。
16. vue等單頁面應用及其優缺點
優點：Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、后退。
17. promise、async、await的理解
1、Promise中的函數的第一個參數是回調函數，resolve用來觸發then里面的代碼，第二個參數是回調函數，reject用來觸發catch中的代碼，throw new Error();也可以觸發catch，
2、await可以是Promise同步，即不會立即執行Proimse外面(或者說下面)的代碼，而await只能用在async標記的函數中，這樣async函數本身就是異步的，而async函數里面的代碼是同步的
3、async本身是異步的，可以這樣理解，async函數執行到await的時候就立即返回，開始執行async下面的代碼，與await等待執行的代碼同時執行
18. 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 查找性能瓶頸
19. 前端性能優化
前端優化的途徑有很多，大致可以分為兩類，第一類是頁面級別的優化，例如 HTTP請求數、腳本的無阻塞加載、內聯腳本的位置優化等 ;第二類則是代碼級別的優化，例如 Javascript中的DOM 操作優化、CSS選擇符優化、圖片優化以及 HTML結構優化等等。
一、頁面級優化：
1、減少 HTTP 請求：瀏覽器一般同時響應請求為4個（PC 一般為4個，Android 支持4個，IOS 5后可支持6個）
減少 HTTP請求數的主要途徑包括：
合理設置 HTTP緩存、資源合並與壓縮
2、使用外聯式引入CSS、JavaScript
3、使用首屏加載：首屏的快速顯示，可以大大提升用戶對頁面速度的感知，因此應盡量針對首屏的快速顯示做優化按需加載：將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量。但是這也會導致大量重繪，影響渲染性能
4、lazyload、滾動加載、media query、預加載
5、使用其他方式代替圖片（CSS3，SVG，IconFont）、使用 Srcset （主要移動端）、選擇合適的圖片（webP優於JPG，PNG8優於GIF）、選擇合適的大小（首次加載不大於1014KB，不寬於640（基於手機的一般寬度））
6、CSS 寫在頭部（阻塞 DOM 渲染，不阻塞加載，內聯會阻塞加載）
如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析CSS，就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕。除此之外，有些瀏覽器會在 CSS下載完成后才開始渲染頁面，如果 CSS放在靠下的位置則會導致瀏覽器將渲染時間推遲。），JavaScript 寫在尾部或異步（js文件默認阻塞加載和渲染）二、代碼優化
css代碼優化
1、盡量避免在 HTML標簽中寫 Style 屬性
2、避免 CSS 表達式：CSS 表達式的執行需跳出 CSS 的渲染
3、移除空的 CSS 規則：空的 CSS 規則增加了 CSS 文件的大小，且影響 CSS 樹的執行
4、使用flexbox來布局
5、正確使用display的屬性：
display:inline 后邊不應再使用 width、height、margin、padding 以及 float
display:inline-block 后不應該使用 float
display:block 后不應該再使用 vertical-align
display:table 后不應該再使用 margin 或 float
不濫用 float ：float 在渲染時的計算量比較大，盡量減少使用
不濫用 Web 字體：Web字體需要下載，解析，重繪當前頁面，盡量減少使用
不聲明過多的 font-size： 盡量使用語義化標簽的默認字體大小，提高 CSS 樹的效率值為 0 時不需要任何單位
6、標准化各種瀏覽器的前綴
沒前綴應放在最后
CSS 動畫只用（-webkit- 無前綴 兩種即可）
其他前綴為 -webkit- 、-moz- 、-ms- 、無前綴 四種
7、css選擇符：瀏覽器對選擇符的解析是從右往左進行的JavaScript執行優化
1、減少dom的重繪和回流
2、避免不必要的 DOM 操作
3、盡量改變 Class 而不是 Style ，使用 classList 代替 className
4、避免使用 document.write()會重繪整個頁面
5、緩存 DOM 選擇與計算：每次 DOM 選擇都要計算，用一個變量保存這個值
6、盡量使用事件代理，避免批量綁定事件
7、盡量使用 ID 選擇器：ID選擇器是最快的
8、Touch 事件優化：使用 touchstart 、touchend 代替 click，但注意 Touch 響應過快，易引發誤操作渲染優化
1、減少 DOM 節點：DOM 節點太多影響頁面的渲染，應盡量減少 DOM 節點
2、動畫優化：
盡量使用 CSS3 動畫
適當使用 Canvas 動畫， 5 個元素以內使用 CSS 動畫（IOS8可使用webGL）
增加響應變化的時間間隔，減少重繪次數
GPU 加速：CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、webGL、Video）來觸發 GPU 渲染，但過度使用會引發手機耗電增加。
20. Vue3.0的特性
1.監測機制的改變
Vue3.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 優化，提供了更多的內置功能。
21. 防抖和節流區別
函數防抖：將多次操作合並為一次操作進行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發。
函數節流：使得一定時間內只觸發一次函數。原理是通過判斷是否有延遲調用函數未執行。
區別： 函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最后一次事件后才觸發一次函數。 比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景，就適合用節流技術來實現。
22. 跨域
1.跨域：
當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即為跨域
同協議，同端口，同域名才屬於同一域。
ajax出於安全考慮禁止跨域，但是src可以跨域。
2.跨距解決方法：
【1】設置document.domain解決無法讀取非同源網頁的 Cookie問題
此方案僅限主域相同，子域不同的跨域應用場景。
【2】跨文檔通信 API：window.postMessage(data,url)
它可用於解決以下方面的問題：
- 頁面和其打開的新窗口的數據傳遞
- 多窗口之間消息傳遞
- 頁面與嵌套的iframe消息傳遞
- 上面三個場景的跨域數據傳遞
【3】JSONP
【4】CORS
CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫。它是 W3C 標准，屬於跨源 AJAX 請求的根本解決方法。
1、普通跨域請求：只需服務器端設置Access-Control-Allow-Origin
2、帶cookie跨域請求：前后端都需要進行設置
23. JS的循環機制
1、主線程讀取JS代碼，此時為同步環境，形成相應的堆和執行棧；
2、主線程遇到異步任務，指給對應的異步進程進行處理（WEB API）;
3、異步進程處理完畢（Ajax返回、DOM事件處罰、Timer到等），將相應的異步任務推入任務隊列；
4、主線程執行完畢，查詢任務隊列，如果存在任務，則取出一個任務推入主線程處理（先進先出）；
5、重復執行step2、3、4；稱為事件循環。
macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval
micro-task(微任務)：Promise，process.nextTick
24. 原型和原型鏈
1、每個函數都有prototype(原型)屬性，這個屬性是一個指針，指向一個對象，這個對象的用途是包含特定類型的所有實例共享的屬性和方法，即這個原型對象是用來給實例共享屬性和方法的。
而每個實例內部都有一個指向原型對象的指針。2、每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含指向原型對象內部的指針。我們讓原型對象的實例（1）等於另一個原型對象（2）,
此時原型對象（2）將包含一個指向原型對象（1）的指針，
再讓原型對象（2）的實例等於原型對象（3），如此層層遞進就構成了實例和原型的鏈條，這就是原型鏈的概念
25. WebPack打包
初始化參數->開始編譯->確定入口->編譯模塊->完成模塊編譯->輸出資源->輸出完成
我們可以對於webpack配置做以下擴展和優化：
1、CommonJS模塊化規范的解決方案： 設置output.libraryTarget='commonjs2'使輸出的代碼符合CommonJS2 模塊化規范，以供給其它模塊導入使用
2、輸出ES5代碼的解決方案：使用babel-loader把 ES6 代碼轉換成 ES5 的代碼。再通過開啟devtool: 'source-map'輸出SourceMap以發布調試。
3、Npm包大小盡量小的解決方案：Babel 在把 ES6 代碼轉換成 ES5 代碼時會注入一些輔助函數，最終導致每個輸出的文件中都包含這段輔助函數的代碼，造成了代碼的冗余。解決方法是修改.babelrc文件，為其加入transform-runtime插件
4、不能將依賴模塊打包到NPM模塊中的解決方案：使用externals配置項來告訴webpack哪些模塊不需要打包。
5、對於依賴的資源文件打包的解決方案：通過css-loader和extract-text-webpack-plugin來實現
用webpack優化前端性能是指優化webpack的輸出結果，讓打包的最終結果在瀏覽器運行快速高效。
1、壓縮代碼。刪除多余的代碼、注釋、簡化代碼的寫法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin來壓縮JS文件， 利用cssnano（css-loader?minimize）來壓縮css
2、利用CDN加速。在構建過程中，將引用的靜態資源路徑修改為CDN上對應的路徑。可以利用webpack對於output參數和各loader的publicPath參數來修改資源路徑
3、刪除死代碼（Tree Shaking）。將代碼中永遠不會走到的片段刪除掉。可以通過在啟動webpack時追加參數--optimize-minimize來實現
4、提取公共代碼。
26.