一、html&css

1.html5新增的標(biāo)簽屬性

2.css3新增的屬性

3.position定位

4.浮動(dòng)

5.盒子模型

6.margin問題

7.display的屬性值

8.background屬性值

9.px、rem、em的區(qū)別

10. css動(dòng)畫和js動(dòng)畫的區(qū)別

? ? ?1.js是幀動(dòng)畫，當(dāng)js在瀏覽器主線程運(yùn)行時(shí)，主線程還有其他需要運(yùn)行的js腳本、樣式、計(jì)算、布局、交互等一系列任務(wù)，對(duì)其干擾線程可能出現(xiàn)阻塞，造成丟幀的情況。

? ? ?2.?js動(dòng)畫通過js引擎解析，css通過 GUI渲染，效果更流暢

二、js相關(guān)問題

1.js的基本數(shù)據(jù)類型和引用數(shù)據(jù)類型

2.const,let,val的區(qū)別

3.說說作用域

在es6的let和const推出之前，js并沒有塊作用域的概念，只有全局作用域和函數(shù)作用域。

4.instanceof和typeof 的區(qū)別

5.隱式轉(zhuǎn)換有哪些

6.閉包

7.原型和原型鏈

（1）、原型

　　? ? 任何對(duì)象都有一個(gè)原型對(duì)象除了null，這個(gè)原型對(duì)象由對(duì)象的內(nèi)置屬性_proto_指向它的構(gòu)造函數(shù)的prototype

　　? ? 即任何對(duì)象都是由一個(gè)構(gòu)造函數(shù)創(chuàng)建的，但是，不是每一個(gè)對(duì)象都有prototype，只有方法才有prototype。

?（2）、什么是原型鏈？

　　? ? 原型鏈的核心就是依賴對(duì)象的_proto_的指向，當(dāng)查找自身不存在的屬性時(shí)，就一層層的扒出創(chuàng)建對(duì)象的構(gòu)造函數(shù)，直至到Object時(shí)，就沒有_proto_指向了。

? ? ? ? 因?yàn)開proto_實(shí)質(zhì)找的是prototype，所以我們只要找這個(gè)鏈條上的構(gòu)造函數(shù)的prototype。其中Object.prototype是沒有_proto_屬性的，它==null。

（3）、原型鏈查找分析：

? ? ? ? 當(dāng)訪問一個(gè)對(duì)象的成員的時(shí)候，會(huì)先在自身找有沒有，如果找到直接使用。

? ? ? ? 如果沒有找到，則去原型鏈指向的對(duì)象的構(gòu)造函數(shù)的prototype中找，找到直接使用，沒找到就返回undifined或報(bào)錯(cuò)。

? ? 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ù)

相對(duì)于普通函數(shù)的區(qū)別，新的書寫方式 ，this 的改變，不能當(dāng)構(gòu)造函數(shù)，沒有 prototype 屬性，沒有 arguments 對(duì)象

討論箭頭函數(shù)的 this 之前，不得不再熟悉一下 執(zhí)行上下文（Execution Context）,因?yàn)?this 指針(this value) 就存儲(chǔ)在執(zhí)行上下文中。

? ? 執(zhí)行上下文保存著函數(shù)執(zhí)行所需的重要信息，其中有三個(gè)屬性：變量對(duì)象(variable object)，作用域鏈(scope chain)，this指針(this value)，它們影響著變量的解析、變量作用域、函數(shù) this 的指向。執(zhí)行上下文分為 全局執(zhí)行上下文 和 函數(shù)執(zhí)行上下文。

? ? 函數(shù)預(yù)編譯的 this 分下面四種情況：

? ? ? ? 第一種： 函數(shù)自主調(diào)用 如 fun() 或者是 普通的立即執(zhí)行函數(shù)（區(qū)別于箭頭函數(shù)方式的立即執(zhí)行函數(shù)）， this 指向 window；

? ? ? ? 第二種： 函數(shù)被調(diào)用，當(dāng)函數(shù)被某個(gè)對(duì)象調(diào)用時(shí)，函數(shù)產(chǎn)生的執(zhí)行上下文中的 this 指向 該對(duì)象；

? ? ? ? 第三種： 通過 call() apply() bind() 方法改變 this，this 指向被傳入的 第一個(gè)參數(shù)；

? ? ? ? 第四種： 在構(gòu)造函數(shù)中，this 指向被創(chuàng)建的 實(shí)例

? ? ? ? 箭頭函數(shù)不會(huì)創(chuàng)建自己的 this，它只會(huì)從自己的作用域鏈上找父級(jí)執(zhí)行上下文的 this

? ? ? ? *由于箭頭函數(shù)是不能通過 call() apply() bind() 方法改變 this，也不能當(dāng)做構(gòu)造函數(shù)

12.setTimeout、Promise、async/await 三者之間異步解決方案的區(qū)別？

13.實(shí)現(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)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值

? ? return function () {

? ? ? clearTimeout(timeout); // 每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉

? ? ? timeout = setTimeout(() => { // 然后又創(chuàng)建一個(gè)新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話，就不會(huì)執(zhí)行 fn 函數(shù)

? ? ? ? fn.apply(this, arguments);

? ? ? }, 500);

? ? };

? }

14.對(duì)象深拷貝

function deepClone(source){

? ? ? ? const targetObj = source.constructor === Array ? [] : {}; // 判斷復(fù)制的目標(biāo)是數(shù)組還是對(duì)象

? ? ? ? for(let keys in source){ // 遍歷目標(biāo)

? ? ? ? ? ? if(source.hasOwnProperty(keys)){

? ? ? ? ? ? if(source[keys] && typeof source[keys] === 'object'){ // 如果值是對(duì)象，就遞歸一下

? ? ? ? ? ? ? ? targetObj[keys] = source[keys].constructor === Array ? [] : {};

? ? ? ? ? ? ? ? targetObj[keys] = deepClone(source[keys]);

? ? ? ? ? ? }else{ // 如果不是，就直接賦值

? ? ? ? ? ? ? ? targetObj[keys] = source[keys];

? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? return targetObj;

? ? }?

15.setTimeout在跳轉(zhuǎn)頁面之后是否還會(huì)繼續(xù)執(zhí)行

16.多頁面還單頁面的區(qū)別

17.說一下設(shè)計(jì)模式有哪些

19.http緩存原理

20.常見的狀態(tài)碼有哪些

21.js事件流

22.get，post的區(qū)別

　1.post更安全（不會(huì)作為url的一部分，不會(huì)被緩存、保存在服務(wù)器日志、以及瀏覽器瀏覽記錄中）

　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ù)之前會(huì)先將請(qǐng)求頭發(fā)送給服務(wù)器進(jìn)行確認(rèn)，然后才真正發(fā)送數(shù)據(jù)

　　post請(qǐng)求的過程：

　　1.瀏覽器請(qǐng)求tcp連接（第一次握手）

　　2.服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）

3.瀏覽器確認(rèn)，并發(fā)送post請(qǐng)求頭（第三次握手，這個(gè)報(bào)文比較小，所以http會(huì)在此時(shí)進(jìn)行第一次數(shù)據(jù)發(fā)送）

　　4.服務(wù)器返回100 continue響應(yīng)

　　5.瀏覽器開始發(fā)送數(shù)據(jù)

　　6.服務(wù)器返回200 ok響應(yīng)

get請(qǐng)求的過程

　 ??1.瀏覽器請(qǐng)求tcp連接（第一次握手）

　　2.服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）

　　3.瀏覽器確認(rèn)，并發(fā)送get請(qǐng)求頭和數(shù)據(jù)（第三次握手，這個(gè)報(bào)文比較小，所以http會(huì)在此時(shí)進(jìn)行第一次數(shù)據(jù)發(fā)送）

　　4.服務(wù)器返回200 ok響應(yīng)

23.js事件循環(huán)機(jī)制，宏任務(wù)與微任務(wù)有哪些

常見的微任務(wù)有Promise、process.nextTick、MutationObserver

常見的宏任務(wù)：script、setTimeout、setInterval、setImmediate

發(fā)出疑問：到底是宏任務(wù)優(yōu)先還是微任務(wù)優(yōu)先？（個(gè)人觀點(diǎn)：微任務(wù)優(yōu)于宏任務(wù)）

Event Loop執(zhí)行順序?yàn)椋?/p>

先執(zhí)行宏任務(wù)script，并執(zhí)行里面的同步任務(wù)；執(zhí)行棧為空后查詢是否存在微任務(wù)，存在就立即執(zhí)行，然后開始下一輪的事件循環(huán)

24.實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)

var oldArrayProto = Array.prototype;

? ? var arrProto = Object.create(oldArrayProto);

? ? ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {

? ? ? ? arrProto[methodName] = function () {

? ? ? ? ? ? console.log("進(jìn)來額")

? ? ? ? ? ? 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為什么會(huì)有精度問題？

JS 數(shù)字類型只有number類型，number類型相當(dāng)于其他強(qiáng)類型語言中的double類型(雙精度浮點(diǎn)型)，不區(qū)分浮點(diǎn)型和整數(shù)型。

number 有四種進(jìn)制表示方法，十進(jìn)制，二進(jìn)制，八進(jìn)制和十六進(jìn)制

由于Js的所有數(shù)字類型都是雙精度浮點(diǎn)型(64位)采用 IEEE754 標(biāo)準(zhǔn)

計(jì)算機(jī)中的數(shù)字都是以二進(jìn)制存儲(chǔ)的，如果要計(jì)算 0.1 + 0.2 的結(jié)果，計(jì)算機(jī)會(huì)先把 0.1 和 0.2 分別轉(zhuǎn)化成二進(jìn)制，然后相加，最后再把相加得到的結(jié)果轉(zhuǎn)為十進(jìn)制，0.1 和 0.2 在轉(zhuǎn)換為二進(jìn)制時(shí)就發(fā)生了一次精度丟失，而對(duì)于計(jì)算后的二進(jìn)制又有一次精度丟失 。

26. try catch的作用域

27.獲取url ？后的參數(shù)

28.jquery的鏈?zhǔn)秸{(diào)用和promise的鏈?zhǔn)秸{(diào)用

? ? jquery的方法都是掛在在原型上的，每次調(diào)用內(nèi)部方法會(huì)返回this，返回當(dāng)前的實(shí)例對(duì)象

? ? promise的then，每次都會(huì)返回一個(gè)新的promise

29.async 和defer的區(qū)別

? ??<script>標(biāo)簽打開defer或async屬性，腳本就會(huì)異步加載。渲染引擎遇到這一行命令，就會(huì)開始下載外部腳本，但不會(huì)等它下載和執(zhí)行，而是直接執(zhí)行后面的命令。

defer與async的區(qū)別是：defer要等到整個(gè)頁面在內(nèi)存中正常渲染結(jié)束（DOM 結(jié)構(gòu)完全生成，以及其他腳本執(zhí)行完成），才會(huì)執(zhí)行；async一旦下載完，渲染引擎就會(huì)中斷渲染，執(zhí)行這個(gè)腳本以后，再繼續(xù)渲染。一句話，defer是“渲染完再執(zhí)行”，async是“下載完就執(zhí)行”。另外，如果有多個(gè)defer腳本，會(huì)按照它們?cè)陧撁娉霈F(xiàn)的順序加載，而多個(gè)async腳本是不能保證加載順序的。

30.前端性能優(yōu)化：

? ? ? ? 從2個(gè)方面來說 1.資源加載優(yōu)化 2.頁面渲染優(yōu)化

? ? ? ? 一：資源加載優(yōu)化

? ? ? ? ? ? （1）.減少http請(qǐng)求次數(shù)

? ? ? ? ? ? ? ? 合并請(qǐng)求-http緩存-本地緩存-service worker

? ? ? ? ? ? （2）.減少資源大小

? ? ? ? ? ? ? ? 代碼壓縮-gzip壓縮-圖片壓縮-代碼拆分

? ? ? ? ? ? （3）.提高h(yuǎn)ttp請(qǐng)求響應(yīng)速度

? ? ? ? ? ? ? ? cdn，dns,http2

? ? ? ? ? ? （4）.優(yōu)化資源加載時(shí)機(jī)

? ? ? ? ? ? ? ? 按需加載-懶加載-預(yù)加載

? ? ? ? ? ? （5）.優(yōu)化資源/內(nèi)容加載方式

? ? ? ? ? ? ? ? 客戶端內(nèi)h5離線化包

? ? ? ? 二: 頁面渲染優(yōu)化

? ? ? ? ? ? （1）.優(yōu)化html代碼

? ? ? ? ? ? ? ? js外鏈放在底部-css外鏈放在頂部-減少dom數(shù)量

? ? ? ? ? ? （2）.優(yōu)化js/css代碼

? ? ? ? ? ? ? ? 長任務(wù)分片執(zhí)行-減少重排重繪-降低css選擇器復(fù)雜性

? ? ? ? ? ? （3）.優(yōu)化動(dòng)畫效果

? ? ? ? ? ? ? ? 使用css動(dòng)畫代替js動(dòng)畫

31.DNS預(yù)解析（dns-prefetch）

? ? ? ? 通過 DNS 預(yù)解析來告訴瀏覽器未來我們可能從某個(gè)特定的 URL 獲取資源，當(dāng)瀏覽器真正使用到該域中的某個(gè)資源時(shí)就可以盡快地完成 DNS 解析。

? ? ? ? 第一步：打開或關(guān)閉DNS預(yù)解析

? ? ? ? ? ? 你可以通過在服務(wù)器端發(fā)送 X-DNS-Prefetch-Control 報(bào)頭。或是在文檔中使用值為 http-equiv 的meta標(biāo)簽：

? ? ? ? ? ? <meta http-equiv="x-dns-prefetch-control" content="on">

? ? ? ? ? ? 需要說明的是，在一些高級(jí)瀏覽器中，頁面中所有的超鏈接（<a>標(biāo)簽），默認(rèn)打開了DNS預(yù)解析。但是，如果頁面中采用的https協(xié)議，很多瀏覽器是默認(rèn)關(guān)閉了超鏈接的DNS預(yù)解析。如果加了上面這行代碼，則表明強(qiáng)制打開瀏覽器的預(yù)解析。

? ? ? ? 第二步：對(duì)指定的域名進(jìn)行DNS預(yù)解析

? ? ? ? ? ? 如果我們將來可能從 smyhvae.com 獲取圖片或音頻資源，那么可以在文檔頂部的 標(biāo)簽中加入以下內(nèi)容：

? ? ? ? ? ? <link rel="dns-prefetch" >

? ? ? ? ? ? 當(dāng)我們從該 URL 請(qǐng)求一個(gè)資源時(shí)，就不再需要等待 DNS 解析的過程。該技術(shù)對(duì)使用第三方資源特別有用。

32.預(yù)加載

? ??1.Prerendering pages

? ? ????預(yù)先渲染頁面，這是更牛的預(yù)加載方式了，他的作用就類似打開一個(gè)隱藏的tab差不多：

? ????? <link rel=”prerender” href=”http://css-tricks.com”>

????2.Preloading

????????和prefetching不同的是，preloading會(huì)讓瀏覽器無論如何都下載指定的資源：

????????<link rel=”preload” href=”image.png”>

????3.H5音樂預(yù)加載 preload=”auto”

????????<audio src=”music.mp3″ autoplay=”autoplay” loop preload=”auto” id=”sendid2″></audio>

33.JavaScript中使用局部變量是否比使用全局變量高效？

? ??當(dāng)讀取一個(gè)變量的時(shí)候，就會(huì)從當(dāng)前域中（具體說，是當(dāng)前執(zhí)行上下文的活動(dòng)對(duì)象，Active Object)中查找這個(gè)變量，查找不到就繼續(xù)往上找，直到全局。查找層級(jí)少，所以快。

34.位與位或

先把10進(jìn)制數(shù)轉(zhuǎn)成二進(jìn)制，然后二進(jìn)制從個(gè)位開始依次比對(duì) 位與& 都對(duì)true為1 不對(duì)false為0；位或|如果不相等取后面的數(shù)，如果相等取1?

? ? 10 & 15

? ? 1010? &? 1111

? ? 比對(duì)后得1010?

? ? 10 | 15

? ? 1010? |? ?1111

? ? 比對(duì)后得1111

35. 離線功能對(duì)比：service worker和applicationCache

? ? ? ? appCache僅僅在離線的時(shí)候才能發(fā)揮用處（無法解決網(wǎng)絡(luò)慢的用戶體驗(yàn)問題），而SW不是，可以通過攔截請(qǐng)求，并且返回合適的數(shù)據(jù)，如果發(fā)現(xiàn)網(wǎng)絡(luò)較慢。

36.?收到的 HTML 如果包含幾十個(gè)圖片標(biāo)簽，這些圖片是以什么方式、什么順序、建立了多少連接、使用什么協(xié)議被下載下來的呢？

如果圖片都是 HTTPS 連接并且在同一個(gè)域名下，那么瀏覽器在 SSL 握手之后會(huì)和服務(wù)器商量能不能用 HTTP2，如果能的話就使用 Multiplexing 功能在這個(gè)連接上進(jìn)行多路傳輸。不過也未必會(huì)所有掛在這個(gè)域名的資源都會(huì)使用一個(gè) TCP 連接去獲取，但是可以確定的是 Multiplexing 很可能會(huì)被用到。

如果發(fā)現(xiàn)用不了 HTTP2 呢？或者用不了 HTTPS（現(xiàn)實(shí)中的 HTTP2 都是在 HTTPS 上實(shí)現(xiàn)的，所以也就是只能使用 HTTP/1.1）。那瀏覽器就會(huì)在一個(gè) HOST 上建立多個(gè) TCP 連接，連接數(shù)量的最大限制取決于瀏覽器設(shè)置，這些連接會(huì)在空閑的時(shí)候被瀏覽器用來發(fā)送新的請(qǐng)求，如果所有的連接都正在發(fā)送請(qǐng)求呢？那其他的請(qǐng)求就只能等等了。

37.前端如何解決跨域的？

? ? 1. 跨域資源共享cors

? ? ? ? 服務(wù)端設(shè)置Access-Control-Allow-Origin：瀏覽器請(qǐng)求頭的orgin信息/ * ，代表允許指定的請(qǐng)求來訪問或者允許所有請(qǐng)求都可訪問

? ? 2. jsonp

? ? ? ?jsonp的原理就是利用<script>標(biāo)簽沒有跨域限制，通過<script>標(biāo)簽src屬性，發(fā)送帶有callback參數(shù)的GET請(qǐng)求，服務(wù)端將接口返回?cái)?shù)據(jù)拼湊到callback函數(shù)中，返回給瀏覽器，瀏覽器解析執(zhí)行，從而前端拿到callback函數(shù)返回的數(shù)據(jù)。

? ? ? ? ?缺點(diǎn)：不安全，只支持get

? 3.nginx反向代理

? ??????通過Nginx配置一個(gè)代理服務(wù)器域名與domain1相同，端口不同）做跳板機(jī)，反向代理訪問domain2接口，并且可以順便修改cookie中domain信息，方便當(dāng)前域cookie寫入，實(shí)現(xiàn)跨域訪問

4.vue proxy

利用webpack-dev-serve，webpack-dev-server是一個(gè)采用Node.js Express實(shí)現(xiàn)的微型服務(wù)器, 利用他來做代理在本地開啟一個(gè)服務(wù)器，同源策略僅是針對(duì)瀏覽器的安全策略。因此服務(wù)器之間也就不存在跨域問題。

5.postMessage跨域

?postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題： 頁面和其打開的新窗口的數(shù)據(jù)傳遞、多窗口之間消息傳遞、頁面與嵌套的iframe消息傳遞、上面三個(gè)場景的跨域數(shù)據(jù)傳遞

6. WebSocket協(xié)議跨域

? ? WebSocket protocol是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時(shí)允許跨域通訊，是server push技術(shù)的一種很好的實(shí)現(xiàn)。原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對(duì)不支持webSocket的瀏覽器提供了向下兼容。

38.?小程序如何在app里運(yùn)行的，如何在多端app里運(yùn)行？

? ? ? ? App 里包含 javascript 運(yùn)行引擎，比如用戶點(diǎn)擊打開一個(gè)小程序，微信App從微信服務(wù)器下載這個(gè)小程序，分析 app.json 得到應(yīng)用程序的配置信息（導(dǎo)航欄，窗口樣式，包含的頁面列表等）

? ? ? ? 加載并運(yùn)行 app.js，展示在 app.json 里配置的第一個(gè)頁面，會(huì)調(diào)用app原生的接口

? ? ? ? 多端運(yùn)行，通過嵌套webview來實(shí)現(xiàn)。

39. 為什么javascript是解釋型語言

解釋型語言：不需要事先編譯，通過解釋器一邊解釋一邊執(zhí)行，啟動(dòng)快，但執(zhí)行慢。

因?yàn)閖avascript是弱類型語言，我們不需要關(guān)心它的類型，并且可以隨意的修改，無法像c++那樣可以事先提供足夠的信息供編譯器編譯出更加低級(jí)的機(jī)器代碼，它只能在運(yùn)行階段收集類型信息，然后根據(jù)這些信息進(jìn)行編譯再執(zhí)行，所以javascript是解釋型語言。

三、vue相關(guān)

? ? ? ?1.vue的nextTick方法的實(shí)現(xiàn)原理：

? ? ? ? ? 首先修改數(shù)據(jù)，這是同步任務(wù)。同一事件循環(huán)的所有的同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧，此時(shí)還未涉及 DOM 。

? ? ? ? ? ?同步任務(wù)執(zhí)行完畢，開始執(zhí)行異步 watcher 隊(duì)列的任務(wù)，更新 DOM 。Vue 在內(nèi)部嘗試對(duì)異步隊(duì)列使用原生的 Promise.then 和 MessageChannel 方法， 如果執(zhí)行環(huán)境不支持，會(huì)采用 setTimeout(fn, 0) 代替。

? ? ? ?2.Vue.use() 有什么作用

? ? ? ? ? ? Vue.use()，會(huì)調(diào)用install方法，讓它里面被注冊(cè)的組件能夠被全局使用。

? ? ? ?3.vue組件中的data為什么是函數(shù)

? ? ? ? ? ? ?為了保證組件的獨(dú)立性 和 可 復(fù)用性，data 是一個(gè)函數(shù)，組件實(shí)例化的時(shí)候這個(gè)函數(shù)將會(huì)被調(diào)用，返回一個(gè)對(duì)象，計(jì)算機(jī)會(huì)給這個(gè)對(duì)象分配一個(gè)內(nèi)存地址，你實(shí)例化幾次，就分配幾個(gè)內(nèi)存地址，他們的地址都不一樣，所以每個(gè)組件中的數(shù)據(jù)不會(huì)相互干擾，改變其中一個(gè)組件的狀態(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刷新找不到路徑會(huì)出錯(cuò)，hash模式不會(huì)

? ? 5.?子組件為什么不可以修改父組件傳遞的Prop

? ??????Vue是單向數(shù)據(jù)流，這樣來防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解，如果破壞了單向數(shù)據(jù)流，當(dāng)應(yīng)用復(fù)雜時(shí)，debug 的成本會(huì)非常高

? ?6. vue 是如何監(jiān)控到上述情況并給出警告的

? ??????在vue 底層，做了一個(gè)類似全局標(biāo)記Flag;它的實(shí)現(xiàn)原理，還是Object.defineProperty()API，window.isUpdatingChildComponent = false; 相當(dāng)于一個(gè)Flag;只有當(dāng)在父組件中修改傳遞給子組件的Prop值的時(shí)候，才會(huì)被賦值為True; 在子組件Proxy.vue 中代理父組件傳遞的Prop值； 使用 this.$forceUpdate(); 強(qiáng)制更新； 這時(shí)候，觸發(fā)代理中的setter；提示不可以在子組件中直接修改父組件傳遞的Prop值的警告；

7.Vuex 的 mutation 中為什么 不能做異步操作？

? ??Vuex中所有的狀態(tài)更新的唯一途徑都是mutation，異步操作通過 Action 來提交 mutation實(shí)現(xiàn)，這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，每個(gè)mutation執(zhí)行完成后都會(huì)對(duì)應(yīng)到一個(gè)新的狀態(tài)變更，這樣devtools就可以打個(gè)快照存下來，然后就可以實(shí)現(xiàn) time-travel 了。如果mutation支持異步操作，就沒有辦法知道狀態(tài)是何時(shí)更新的，無法很好的進(jìn)行狀態(tài)的追蹤，給調(diào)試帶來困難。

8.?vue編譯原理：

整體邏輯分為三個(gè)過程：

? ? 1.將模板字符串轉(zhuǎn)換成element ASTs（解析器）

? ? 2.對(duì) AST 進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來做虛擬DOM的渲染優(yōu)化（優(yōu)化器）

? ? 3.使用element ASTs生成render函數(shù)代碼字符串（代碼生成器）

? ? Vue源碼中虛擬DOM構(gòu)建經(jīng)歷 template編譯成AST語法樹 -> 再轉(zhuǎn)換為render函數(shù) 最終返回一個(gè)VNode(VNode就是Vue的虛擬DOM節(jié)點(diǎn))

9. Vue父子組件，哪個(gè)生命周期是子組件先執(zhí)行的父組件后執(zhí)行的？

mounted，因?yàn)橹挥兴械淖咏M件全部加載完畢，父組件才能觸發(fā)mounted

四、webpack

? ???webpack的loader順序，為什么？

? ??????webpack選擇了函數(shù)式編程的方式，所以loader的順序編程了從右往左

????webpack loader和plugin的區(qū)別

? ? ? ?loader: 更像是轉(zhuǎn)換器 像babel-loader,scss-loader style-loader file-loader,

? ? ? plugin: 插件壓縮文件，分割文件等改變輸出的結(jié)果

五、項(xiàng)目亮點(diǎn)

一、搶券兜底策略：

? ? 1.首先是當(dāng)巨大流量進(jìn)入到這個(gè)頁面，會(huì)不會(huì)引發(fā)cdn等資源/接口加載失敗？

? ? 2.搶的策略，倒計(jì)時(shí)結(jié)束點(diǎn)擊按鈕發(fā)送接口

? ? 針對(duì)1的解決方法：1.利用緩存策略減少http請(qǐng)求 2.在每臺(tái)機(jī)器上配置靜態(tài)資源當(dāng)cdn資源掛掉的時(shí)候訪問切換域名路徑成當(dāng)前機(jī)器的，

? ? SSI就是在HTML文件中，可以通過注釋行調(diào)用的命令或指針。

? ? 針對(duì)2的解決方案：用戶瘋狂點(diǎn)擊按鈕，為了避免服務(wù)器掛掉可以采用防抖策略 1.比如一段時(shí)間內(nèi)只允許發(fā)起一次請(qǐng)求，2.設(shè)置開關(guān)，在上一次請(qǐng)求有所返回時(shí)才進(jìn)行下一次請(qǐng)求

? ? 3.永遠(yuǎn)只發(fā)送一次請(qǐng)求

? ? 如何防止腳本惡意刷搶，可以彈起驗(yàn)證框校驗(yàn)

六、算法

? ? ? ?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);