一远豺、html&css
1.html5新增的標簽屬性
2.css3新增的屬性
3.position定位
4.浮動
5.盒子模型
6.margin問題
7.display的屬性值
8.background屬性值
9.px葱她、rem膀斋、em的區(qū)別
10. css動畫和js動畫的區(qū)別
? ? ?1.js是幀動畫罢维，當js在瀏覽器主線程運行時尚揣，主線程還有其他需要運行的js腳本翠拣、樣式蝴猪、計算漓摩、布局裙士、交互等一系列任務，對其干擾線程可能出現(xiàn)阻塞管毙，造成丟幀的情況腿椎。
? ? ?2.?js動畫通過js引擎解析桌硫，css通過 GUI渲染，效果更流暢
二啃炸、js相關問題
1.js的基本數(shù)據(jù)類型和引用數(shù)據(jù)類型
2.const,let,val的區(qū)別
3.說說作用域
在es6的let和const推出之前铆隘，js并沒有塊作用域的概念，只有全局作用域和函數(shù)作用域南用。
4.instanceof和typeof 的區(qū)別
5.隱式轉換有哪些
6.閉包
7.原型和原型鏈
（1）膀钠、原型
? ? 任何對象都有一個原型對象除了null，這個原型對象由對象的內置屬性_proto_指向它的構造函數(shù)的prototype
? ? 即任何對象都是由一個構造函數(shù)創(chuàng)建的裹虫，但是肿嘲，不是每一個對象都有prototype，只有方法才有prototype筑公。
?（2）雳窟、什么是原型鏈？
? ? 原型鏈的核心就是依賴對象的_proto_的指向匣屡，當查找自身不存在的屬性時封救，就一層層的扒出創(chuàng)建對象的構造函數(shù)，直至到Object時捣作，就沒有_proto_指向了誉结。
? ? ? ? 因為_proto_實質找的是prototype，所以我們只要找這個鏈條上的構造函數(shù)的prototype券躁。其中Object.prototype是沒有_proto_屬性的惩坑，它==null。
（3）嘱朽、原型鏈查找分析：
? ? ? ? 當訪問一個對象的成員的時候旭贬，會先在自身找有沒有，如果找到直接使用搪泳。
? ? ? ? 如果沒有找到稀轨，則去原型鏈指向的對象的構造函數(shù)的prototype中找，找到直接使用岸军，沒找到就返回undifined或報錯奋刽。
? ? function Person(name){
? ? ? this.name = name;
? ? }
? ? var p = new Person();
? ? p ---> Person.prototype --->Object.prototype---->null
8.call和apply的區(qū)別
9.new干了什么
10.this的指向
11.箭頭函數(shù)
相對于普通函數(shù)的區(qū)別，新的書寫方式 艰赞，this 的改變佣谐，不能當構造函數(shù)，沒有 prototype 屬性方妖，沒有 arguments 對象
討論箭頭函數(shù)的 this 之前狭魂，不得不再熟悉一下 執(zhí)行上下文（Execution Context）,因為 this 指針(this value) 就存儲在執(zhí)行上下文中。
? ? 執(zhí)行上下文保存著函數(shù)執(zhí)行所需的重要信息，其中有三個屬性：變量對象(variable object)雌澄，作用域鏈(scope chain)斋泄，this指針(this value)，它們影響著變量的解析镐牺、變量作用域炫掐、函數(shù) this 的指向。執(zhí)行上下文分為 全局執(zhí)行上下文 和 函數(shù)執(zhí)行上下文睬涧。
? ? 函數(shù)預編譯的 this 分下面四種情況：
? ? ? ? 第一種： 函數(shù)自主調用 如 fun() 或者是 普通的立即執(zhí)行函數(shù)（區(qū)別于箭頭函數(shù)方式的立即執(zhí)行函數(shù)）募胃， this 指向 window；
? ? ? ? 第二種： 函數(shù)被調用畦浓，當函數(shù)被某個對象調用時痹束，函數(shù)產生的執(zhí)行上下文中的 this 指向 該對象；
? ? ? ? 第三種： 通過 call() apply() bind() 方法改變 this宅粥，this 指向被傳入的 第一個參數(shù)参袱；
? ? ? ? 第四種： 在構造函數(shù)中，this 指向被創(chuàng)建的 實例
? ? ? ? 箭頭函數(shù)不會創(chuàng)建自己的 this秽梅，它只會從自己的作用域鏈上找父級執(zhí)行上下文的 this
? ? ? ? *由于箭頭函數(shù)是不能通過 call() apply() bind() 方法改變 this，也不能當做構造函數(shù)
12.setTimeout剿牺、Promise企垦、async/await 三者之間異步解決方案的區(qū)別？
13.實現(xiàn)節(jié)流和防抖
function throttle(fn){
? ? ? ? ? ? let can = true;
? ? ? ? ? ? return function(){
? ? ? ? ? ? ? ? if(!can)return;
? ? ? ? ? ? ? ? can = false;
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? fn.apply(this,arguments);
? ? ? ? ? ? ? ? ? ? can = true
? ? ? ? ? ? ? ? }, 2000);
? ? ? ? ? ? }
? ? ? ? }
function debounce(fn) {
? ? let timeout = null; // 創(chuàng)建一個標記用來存放定時器的返回值
? ? return function () {
? ? ? clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
? ? ? timeout = setTimeout(() => { // 然后又創(chuàng)建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內如果還有字符輸入的話晒来，就不會執(zhí)行 fn 函數(shù)
? ? ? ? fn.apply(this, arguments);
? ? ? }, 500);
? ? };
? }
14.對象深拷貝
function deepClone(source){
? ? ? ? const targetObj = source.constructor === Array ? [] : {}; // 判斷復制的目標是數(shù)組還是對象
? ? ? ? for(let keys in source){ // 遍歷目標
? ? ? ? ? ? if(source.hasOwnProperty(keys)){
? ? ? ? ? ? if(source[keys] && typeof source[keys] === 'object'){ // 如果值是對象钞诡，就遞歸一下
? ? ? ? ? ? ? ? targetObj[keys] = source[keys].constructor === Array ? [] : {};
? ? ? ? ? ? ? ? targetObj[keys] = deepClone(source[keys]);
? ? ? ? ? ? }else{ // 如果不是，就直接賦值
? ? ? ? ? ? ? ? targetObj[keys] = source[keys];
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return targetObj;
? ? }?
15.setTimeout在跳轉頁面之后是否還會繼續(xù)執(zhí)行
16.多頁面還單頁面的區(qū)別
17.說一下設計模式有哪些
19.http緩存原理
20.常見的狀態(tài)碼有哪些
21.js事件流
22.get湃崩，post的區(qū)別
1.post更安全（不會作為url的一部分荧降，不會被緩存、保存在服務器日志攒读、以及瀏覽器瀏覽記錄中）
2.post發(fā)送的數(shù)據(jù)量更大（get有url長度限制）
3.post能發(fā)送更多的數(shù)據(jù)類型（get只能發(fā)送ASCII字符）
? ?4.post支持4種提交格式
? ??application/x-www-form-urlencoded朵诫，multipart/form-data，application/json薄扁，text/xml
最重要的一條剪返，post在真正接受數(shù)據(jù)之前會先將請求頭發(fā)送給服務器進行確認，然后才真正發(fā)送數(shù)據(jù)
post請求的過程：
1.瀏覽器請求tcp連接（第一次握手）
2.服務器答應進行tcp連接（第二次握手）
3.瀏覽器確認邓梅，并發(fā)送post請求頭（第三次握手脱盲，這個報文比較小，所以http會在此時進行第一次數(shù)據(jù)發(fā)送）
4.服務器返回100 continue響應
5.瀏覽器開始發(fā)送數(shù)據(jù)
6.服務器返回200 ok響應
get請求的過程
??1.瀏覽器請求tcp連接（第一次握手）
2.服務器答應進行tcp連接（第二次握手）
3.瀏覽器確認日缨，并發(fā)送get請求頭和數(shù)據(jù)（第三次握手钱反，這個報文比較小，所以http會在此時進行第一次數(shù)據(jù)發(fā)送）
4.服務器返回200 ok響應
23.js事件循環(huán)機制，宏任務與微任務有哪些
常見的微任務有Promise面哥、process.nextTick哎壳、MutationObserver
常見的宏任務：script、setTimeout幢竹、setInterval耳峦、setImmediate
發(fā)出疑問：到底是宏任務優(yōu)先還是微任務優(yōu)先？（個人觀點：微任務優(yōu)于宏任務）
Event Loop執(zhí)行順序為：
先執(zhí)行宏任務script焕毫，并執(zhí)行里面的同步任務蹲坷；執(zhí)行棧為空后查詢是否存在微任務，存在就立即執(zhí)行邑飒，然后開始下一輪的事件循環(huán)
24.實現(xiàn)響應式數(shù)據(jù)
var oldArrayProto = Array.prototype;
? ? var arrProto = Object.create(oldArrayProto);
? ? ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
? ? ? ? arrProto[methodName] = function () {
? ? ? ? ? ? console.log("進來額")
? ? ? ? ? ? update() // 觸發(fā)視圖更新
? ? ? ? ? ? oldArrayProto[methodName].call(this, ...arguments)
? ? ? ? }
? ? })
? ? function update(val) {
? ? ? ? console.log("數(shù)據(jù)發(fā)生了變化",obj.nums);
? ? }
? ? function define(target,key,value){
? ? ? ? observer(value)
? ? ? ? Object.definePrototype(target,key,{
? ? ? ? ? ? get(){
? ? ? ? ? ? ? ? return value;
? ? ? ? ? ? },
? ? ? ? ? ? set(val){
? ? ? ? ? ? ? ? if(val !== value){
? ? ? ? ? ? ? ? ? ? value = val;
? ? ? ? ? ? ? ? ? ? observer(value);
? ? ? ? ? ? ? ? ? ? update()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? }
? ? function observer(obj){
? ? ? ? if(typeof obj !== 'object' || obj === null) {
? ? ? ? ? ? reutrn obj;
? ? ? ? }
? ? ? ? if(Array.isArray(obj)){
? ? ? ? ? ? obj._proto_ = arrProto;
? ? ? ? }
? ? ? ? for(let key in obj){
? ? ? ? ? ? define(obj,key,obj[key]);
? ? ? ? }
? ? }
25. 0.1+0.2 = 循签？? js為什么會有精度問題？
JS 數(shù)字類型只有number類型疙咸，number類型相當于其他強類型語言中的double類型(雙精度浮點型)县匠，不區(qū)分浮點型和整數(shù)型。
number 有四種進制表示方法撒轮，十進制乞旦，二進制，八進制和十六進制
由于Js的所有數(shù)字類型都是雙精度浮點型(64位)采用 IEEE754 標準
計算機中的數(shù)字都是以二進制存儲的题山，如果要計算 0.1 + 0.2 的結果兰粉，計算機會先把 0.1 和 0.2 分別轉化成二進制，然后相加顶瞳，最后再把相加得到的結果轉為十進制玖姑，0.1 和 0.2 在轉換為二進制時就發(fā)生了一次精度丟失，而對于計算后的二進制又有一次精度丟失 慨菱。
26. try catch的作用域
27.獲取url 焰络？后的參數(shù)
28.jquery的鏈式調用和promise的鏈式調用
? ? jquery的方法都是掛在在原型上的，每次調用內部方法會返回this符喝，返回當前的實例對象
? ? promise的then闪彼，每次都會返回一個新的promise
29.async 和defer的區(qū)別
? ??<script>標簽打開defer或async屬性，腳本就會異步加載洲劣。渲染引擎遇到這一行命令备蚓，就會開始下載外部腳本，但不會等它下載和執(zhí)行囱稽，而是直接執(zhí)行后面的命令郊尝。
defer與async的區(qū)別是：defer要等到整個頁面在內存中正常渲染結束（DOM 結構完全生成，以及其他腳本執(zhí)行完成）战惊，才會執(zhí)行流昏；async一旦下載完，渲染引擎就會中斷渲染，執(zhí)行這個腳本以后况凉，再繼續(xù)渲染谚鄙。一句話，defer是“渲染完再執(zhí)行”刁绒，async是“下載完就執(zhí)行”闷营。另外，如果有多個defer腳本知市，會按照它們在頁面出現(xiàn)的順序加載傻盟，而多個async腳本是不能保證加載順序的。
30.前端性能優(yōu)化：
? ? ? ? 從2個方面來說 1.資源加載優(yōu)化 2.頁面渲染優(yōu)化
? ? ? ? 一：資源加載優(yōu)化
? ? ? ? ? ? （1）.減少http請求次數(shù)
? ? ? ? ? ? ? ? 合并請求-http緩存-本地緩存-service worker
? ? ? ? ? ? （2）.減少資源大小
? ? ? ? ? ? ? ? 代碼壓縮-gzip壓縮-圖片壓縮-代碼拆分
? ? ? ? ? ? （3）.提高http請求響應速度
? ? ? ? ? ? ? ? cdn嫂丙，dns,http2
? ? ? ? ? ? （4）.優(yōu)化資源加載時機
? ? ? ? ? ? ? ? 按需加載-懶加載-預加載
? ? ? ? ? ? （5）.優(yōu)化資源/內容加載方式
? ? ? ? ? ? ? ? 客戶端內h5離線化包
? ? ? ? 二: 頁面渲染優(yōu)化
? ? ? ? ? ? （1）.優(yōu)化html代碼
? ? ? ? ? ? ? ? js外鏈放在底部-css外鏈放在頂部-減少dom數(shù)量
? ? ? ? ? ? （2）.優(yōu)化js/css代碼
? ? ? ? ? ? ? ? 長任務分片執(zhí)行-減少重排重繪-降低css選擇器復雜性
? ? ? ? ? ? （3）.優(yōu)化動畫效果
? ? ? ? ? ? ? ? 使用css動畫代替js動畫
31.DNS預解析（dns-prefetch）
? ? ? ? 通過 DNS 預解析來告訴瀏覽器未來我們可能從某個特定的 URL 獲取資源娘赴，當瀏覽器真正使用到該域中的某個資源時就可以盡快地完成 DNS 解析。
? ? ? ? 第一步：打開或關閉DNS預解析
? ? ? ? ? ? 你可以通過在服務器端發(fā)送 X-DNS-Prefetch-Control 報頭跟啤》瘫恚或是在文檔中使用值為 http-equiv 的meta標簽：
? ? ? ? ? ? <meta http-equiv="x-dns-prefetch-control" content="on">
? ? ? ? ? ? 需要說明的是，在一些高級瀏覽器中隅肥，頁面中所有的超鏈接（<a>標簽）竿奏，默認打開了DNS預解析。但是腥放，如果頁面中采用的https協(xié)議议双，很多瀏覽器是默認關閉了超鏈接的DNS預解析。如果加了上面這行代碼捉片，則表明強制打開瀏覽器的預解析。
? ? ? ? 第二步：對指定的域名進行DNS預解析
? ? ? ? ? ? 如果我們將來可能從 smyhvae.com 獲取圖片或音頻資源汞舱，那么可以在文檔頂部的 標簽中加入以下內容：
? ? ? ? ? ? <link rel="dns-prefetch" >
? ? ? ? ? ? 當我們從該 URL 請求一個資源時伍纫，就不再需要等待 DNS 解析的過程。該技術對使用第三方資源特別有用昂芜。
32.預加載
? ??1.Prerendering pages
? ? ????預先渲染頁面莹规，這是更牛的預加載方式了，他的作用就類似打開一個隱藏的tab差不多：
? ????? <link rel=”prerender” href=”http://css-tricks.com”>
????2.Preloading
????????和prefetching不同的是泌神，preloading會讓瀏覽器無論如何都下載指定的資源：
????????<link rel=”preload” href=”image.png”>
????3.H5音樂預加載 preload=”auto”
????????<audio src=”music.mp3″ autoplay=”autoplay” loop preload=”auto” id=”sendid2″></audio>
33.JavaScript中使用局部變量是否比使用全局變量高效良漱？
? ??當讀取一個變量的時候，就會從當前域中（具體說欢际，是當前執(zhí)行上下文的活動對象母市，Active Object)中查找這個變量，查找不到就繼續(xù)往上找损趋，直到全局患久。查找層級少，所以快。
34.位與位或
先把10進制數(shù)轉成二進制蒋失，然后二進制從個位開始依次比對 位與& 都對true為1 不對false為0返帕；位或|如果不相等取后面的數(shù)，如果相等取1?
? ? 10 & 15
? ? 1010? &? 1111
? ? 比對后得1010?
? ? 10 | 15
? ? 1010? |? ?1111
? ? 比對后得1111
35. 離線功能對比：service worker和applicationCache
? ? ? ? appCache僅僅在離線的時候才能發(fā)揮用處（無法解決網絡慢的用戶體驗問題）篙挽，而SW不是荆萤，可以通過攔截請求，并且返回合適的數(shù)據(jù)铣卡，如果發(fā)現(xiàn)網絡較慢链韭。
36.?收到的 HTML 如果包含幾十個圖片標簽，這些圖片是以什么方式算行、什么順序梧油、建立了多少連接、使用什么協(xié)議被下載下來的呢州邢？
如果圖片都是 HTTPS 連接并且在同一個域名下儡陨，那么瀏覽器在 SSL 握手之后會和服務器商量能不能用 HTTP2，如果能的話就使用 Multiplexing 功能在這個連接上進行多路傳輸量淌。不過也未必會所有掛在這個域名的資源都會使用一個 TCP 連接去獲取骗村，但是可以確定的是 Multiplexing 很可能會被用到。
如果發(fā)現(xiàn)用不了 HTTP2 呢呀枢？或者用不了 HTTPS（現(xiàn)實中的 HTTP2 都是在 HTTPS 上實現(xiàn)的胚股，所以也就是只能使用 HTTP/1.1）。那瀏覽器就會在一個 HOST 上建立多個 TCP 連接裙秋，連接數(shù)量的最大限制取決于瀏覽器設置琅拌，這些連接會在空閑的時候被瀏覽器用來發(fā)送新的請求，如果所有的連接都正在發(fā)送請求呢摘刑？那其他的請求就只能等等了进宝。
37.前端如何解決跨域的？
? ? 1. 跨域資源共享cors
? ? ? ? 服務端設置Access-Control-Allow-Origin：瀏覽器請求頭的orgin信息/ * 枷恕，代表允許指定的請求來訪問或者允許所有請求都可訪問
? ? 2. jsonp
? ? ? ?jsonp的原理就是利用<script>標簽沒有跨域限制党晋，通過<script>標簽src屬性，發(fā)送帶有callback參數(shù)的GET請求徐块，服務端將接口返回數(shù)據(jù)拼湊到callback函數(shù)中未玻，返回給瀏覽器，瀏覽器解析執(zhí)行胡控，從而前端拿到callback函數(shù)返回的數(shù)據(jù)扳剿。
? ? ? ? ?缺點：不安全，只支持get
? 3.nginx反向代理
? ??????通過Nginx配置一個代理服務器域名與domain1相同铜犬，端口不同）做跳板機舞终，反向代理訪問domain2接口轻庆，并且可以順便修改cookie中domain信息，方便當前域cookie寫入敛劝，實現(xiàn)跨域訪問
4.vue proxy
利用webpack-dev-serve余爆，webpack-dev-server是一個采用Node.js Express實現(xiàn)的微型服務器, 利用他來做代理在本地開啟一個服務器，同源策略僅是針對瀏覽器的安全策略夸盟。因此服務器之間也就不存在跨域問題蛾方。
5.postMessage跨域
?postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數(shù)不多可以跨域操作的window屬性之一上陕，它可用于解決以下方面的問題： 頁面和其打開的新窗口的數(shù)據(jù)傳遞桩砰、多窗口之間消息傳遞、頁面與嵌套的iframe消息傳遞释簿、上面三個場景的跨域數(shù)據(jù)傳遞
6. WebSocket協(xié)議跨域
? ? WebSocket protocol是HTML5一種新的協(xié)議亚隅。它實現(xiàn)了瀏覽器與服務器全雙工通信，同時允許跨域通訊庶溶，是server push技術的一種很好的實現(xiàn)煮纵。原生WebSocket API使用起來不太方便，我們使用Socket.io偏螺，它很好地封裝了webSocket接口行疏，提供了更簡單、靈活的接口套像，也對不支持webSocket的瀏覽器提供了向下兼容酿联。
38.?小程序如何在app里運行的，如何在多端app里運行夺巩？
? ? ? ? App 里包含 javascript 運行引擎贞让，比如用戶點擊打開一個小程序，微信App從微信服務器下載這個小程序柳譬，分析 app.json 得到應用程序的配置信息（導航欄震桶，窗口樣式，包含的頁面列表等）
? ? ? ? 加載并運行 app.js征绎，展示在 app.json 里配置的第一個頁面，會調用app原生的接口
? ? ? ? 多端運行磨取，通過嵌套webview來實現(xiàn)人柿。
39. 為什么javascript是解釋型語言
解釋型語言：不需要事先編譯，通過解釋器一邊解釋一邊執(zhí)行忙厌，啟動快凫岖，但執(zhí)行慢诊霹。
因為javascript是弱類型語言库车，我們不需要關心它的類型，并且可以隨意的修改咖摹，無法像c++那樣可以事先提供足夠的信息供編譯器編譯出更加低級的機器代碼，它只能在運行階段收集類型信息甥雕，然后根據(jù)這些信息進行編譯再執(zhí)行踩身，所以javascript是解釋型語言。
三社露、vue相關
? ? ? ?1.vue的nextTick方法的實現(xiàn)原理：
? ? ? ? ? 首先修改數(shù)據(jù)挟阻，這是同步任務。同一事件循環(huán)的所有的同步任務都在主線程上執(zhí)行峭弟，形成一個執(zhí)行棧附鸽，此時還未涉及 DOM 。
? ? ? ? ? ?同步任務執(zhí)行完畢瞒瘸，開始執(zhí)行異步 watcher 隊列的任務坷备，更新 DOM 。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel 方法情臭， 如果執(zhí)行環(huán)境不支持省撑，會采用 setTimeout(fn, 0) 代替。
? ? ? ?2.Vue.use() 有什么作用
? ? ? ? ? ? Vue.use()谎柄，會調用install方法丁侄，讓它里面被注冊的組件能夠被全局使用。
? ? ? ?3.vue組件中的data為什么是函數(shù)
? ? ? ? ? ? ?為了保證組件的獨立性 和 可 復用性朝巫，data 是一個函數(shù)鸿摇，組件實例化的時候這個函數(shù)將會被調用，返回一個對象劈猿，計算機會給這個對象分配一個內存地址拙吉，你實例化幾次，就分配幾個內存地址揪荣，他們的地址都不一樣筷黔，所以每個組件中的數(shù)據(jù)不會相互干擾，改變其中一個組件的狀態(tài)仗颈，其它組件不變佛舱。
? ? ? 4.vue-router的兩種模式區(qū)別
????????hash模式的工作原理是hashchange事件，可以在window監(jiān)聽hash的變化
? ????? window.onhashchange = function(event){
? ? ? ????? console.log(event);
? ? ????}
? ????????? history模式挨决，這種模式充分利用 history.pushState API 來完成 通過pushState和replaceState修改瀏覽器的歷史狀態(tài)请祖，
? ? 區(qū)別: hash模式需要加#，history需要nginx配置脖祈，如果history刷新找不到路徑會出錯肆捕，hash模式不會
? ? 5.?子組件為什么不可以修改父組件傳遞的Prop
? ??????Vue是單向數(shù)據(jù)流，這樣來防止從子組件意外改變父級組件的狀態(tài)盖高，從而導致你的應用的數(shù)據(jù)流向難以理解慎陵，如果破壞了單向數(shù)據(jù)流，當應用復雜時席纽，debug 的成本會非常高
? ?6. vue 是如何監(jiān)控到上述情況并給出警告的
? ??????在vue 底層捏悬，做了一個類似全局標記Flag;它的實現(xiàn)原理，還是Object.defineProperty()API胆筒，window.isUpdatingChildComponent = false; 相當于一個Flag;只有當在父組件中修改傳遞給子組件的Prop值的時候邮破，才會被賦值為True; 在子組件Proxy.vue 中代理父組件傳遞的Prop值； 使用 this.$forceUpdate(); 強制更新仆救； 這時候抒和，觸發(fā)代理中的setter；提示不可以在子組件中直接修改父組件傳遞的Prop值的警告彤蔽；
7.Vuex 的 mutation 中為什么 不能做異步操作摧莽？
? ??Vuex中所有的狀態(tài)更新的唯一途徑都是mutation，異步操作通過 Action 來提交 mutation實現(xiàn)顿痪，這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化镊辕，每個mutation執(zhí)行完成后都會對應到一個新的狀態(tài)變更，這樣devtools就可以打個快照存下來蚁袭，然后就可以實現(xiàn) time-travel 了征懈。如果mutation支持異步操作，就沒有辦法知道狀態(tài)是何時更新的揩悄，無法很好的進行狀態(tài)的追蹤卖哎，給調試帶來困難。
8.?vue編譯原理：
整體邏輯分為三個過程：
? ? 1.將模板字符串轉換成element ASTs（解析器）
? ? 2.對 AST 進行靜態(tài)節(jié)點標記删性，主要用來做虛擬DOM的渲染優(yōu)化（優(yōu)化器）
? ? 3.使用element ASTs生成render函數(shù)代碼字符串（代碼生成器）
? ? Vue源碼中虛擬DOM構建經歷 template編譯成AST語法樹 -> 再轉換為render函數(shù) 最終返回一個VNode(VNode就是Vue的虛擬DOM節(jié)點)
9. Vue父子組件亏娜，哪個生命周期是子組件先執(zhí)行的父組件后執(zhí)行的？
mounted蹬挺，因為只有所有的子組件全部加載完畢维贺，父組件才能觸發(fā)mounted
四、webpack
? ???webpack的loader順序巴帮，為什么溯泣？
? ??????webpack選擇了函數(shù)式編程的方式，所以loader的順序編程了從右往左
????webpack loader和plugin的區(qū)別
? ? ? ?loader: 更像是轉換器 像babel-loader,scss-loader style-loader file-loader,
? ? ? plugin: 插件壓縮文件榕茧，分割文件等改變輸出的結果
五发乔、項目亮點
一、搶券兜底策略：
? ? 1.首先是當巨大流量進入到這個頁面雪猪，會不會引發(fā)cdn等資源/接口加載失敗起愈？
? ? 2.搶的策略只恨，倒計時結束點擊按鈕發(fā)送接口
? ? 針對1的解決方法：1.利用緩存策略減少http請求 2.在每臺機器上配置靜態(tài)資源當cdn資源掛掉的時候訪問切換域名路徑成當前機器的译仗，
? ? SSI就是在HTML文件中，可以通過注釋行調用的命令或指針官觅。
? ? 針對2的解決方案：用戶瘋狂點擊按鈕纵菌，為了避免服務器掛掉可以采用防抖策略 1.比如一段時間內只允許發(fā)起一次請求，2.設置開關休涤，在上一次請求有所返回時才進行下一次請求
? ? 3.永遠只發(fā)送一次請求
? ? 如何防止腳本惡意刷搶咱圆，可以彈起驗證框校驗
六、算法
? ? ? ?1.二分查找
function binary_search(arr, key) {
? ? ? ? ? ? var left = 0,
? ? ? ? ? ? ? ? right = arr.length - 1;
? ? ? ? ? ? while(left <= right){
? ? ? ? ? ? ? ? var mid = parseInt((right + left) / 2);
? ? ? ? ? ? ? ? if(key == arr[mid]){
? ? ? ? ? ? ? ? ? ? return? mid;
? ? ? ? ? ? ? ? }else if(key > arr[mid]){
? ? ? ? ? ? ? ? ? ? left = mid + 1;
? ? ? ? ? ? ? ? }else if(key < arr[mid]){
? ? ? ? ? ? ? ? ? ? right = mid -1;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? return -1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
? ? ? ? var result = binary_search(arr,10);
