1、 [1,2,3].map(parseInt)輸出結(jié)果？

? ? ? ? 答案：1，NaN，NaN

? ? ? ? 解析：

array.map(function callback(currentValue,index,array){}[,thisArg])方法的作用是遍歷array中的每一項，并為每個元素都執(zhí)行callback函數(shù)；

parseInt()方法有兩個作用：①當(dāng)參數(shù)為一個時，將其他類型數(shù)據(jù)轉(zhuǎn)換成字符串

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?②當(dāng)參數(shù)為兩個時，以第二個參數(shù)解析數(shù)據(jù)，進行進制的數(shù)據(jù)轉(zhuǎn)換（第二個參數(shù)需滿足大于2小于36，0表示10進制）

這里，第一個參數(shù)為數(shù)組中的每個元素，第二個參數(shù)為index，即是考察parseInt的第二個用法所以表示為：

parseInt（1,0）；parseInt（2,1））；parseInt（3,2)

得1，NaN，NaN

2、手寫一個完整的繼承

? ? ? ? 答案：

3、eventLoop事件循環(huán)和事件隊列

? ? ? ? 答：js的異步機制由事件循環(huán)和任務(wù)隊列構(gòu)成。（js本身是單線程）

? ? ? ? ? ? javascript主線程擁有一個執(zhí)行棧以及一個任務(wù)隊列，主線程會依次執(zhí)行代碼，當(dāng)遇到函數(shù)時，會先將函數(shù)入棧，函數(shù)運行完畢后會再將該函數(shù)出棧，直到所有代碼執(zhí)行完畢。

? ? ? ? ? ? 遇到異步操作，例如：setTimeout、ajax時，異步操作會由瀏覽器執(zhí)行，瀏覽器會再這些任務(wù)完成后，將事先定義的回調(diào)函數(shù)推入主線程的任務(wù)隊列中，當(dāng)主線程的任務(wù)棧清空后會讀取任務(wù)隊列中的回調(diào)函數(shù)，然后去執(zhí)行，從而進入一個無線循環(huán)，這就是事件循環(huán)。

? ? ? ? ? ? 一個瀏覽器環(huán)境只能擁有一個事件循環(huán)，而一個事件循環(huán)可以多個任務(wù)隊列，每個任務(wù)都有一個任務(wù)源。任務(wù)隊列是一個先進先出的隊列

4、https的工作原理

? ? ? ? ? ? 解析：https在傳輸數(shù)據(jù)之前需要客戶端（瀏覽器）和服務(wù)器之間進行一次握手，在握手過程中確立雙方加密傳輸數(shù)據(jù)的密碼信息。TLS/SSL是一條加密傳輸協(xié)議，使用了對稱加密，非對稱加密以及hash算法。

握手的過程：瀏覽器將自己支持的一套加密規(guī)則發(fā)送給服務(wù)器；網(wǎng)站從匯總選出一組加密算法與hash算法，并將自己的身份信息以整數(shù)的形式發(fā)送給瀏覽器。證書里包含了網(wǎng)址，加密公鑰，以及證書的頒發(fā)機構(gòu)等信息，瀏覽器獲得證書后要驗證證書的合法性，如果證書不受信任會給出提示，如果證書受信任，瀏覽器會生成一串隨機數(shù)的密碼，并用證書中提供的公鑰加密。使用約定好的hash算法發(fā)計算握手消息，并使用生成的隨機數(shù)對消息進行加密，最后將之前生成的所有信息發(fā)送給網(wǎng)站。

網(wǎng)站接受瀏覽器發(fā)送來的數(shù)據(jù)要做一下的操作：使用自己的私鑰將信息解密，取出密碼，使用密碼解密瀏覽器發(fā)來的握手信息，并驗證hash是否一致。使用密碼加密一段握手消息發(fā)送給瀏覽器。

? ? ? ? ? ? ? ?客戶端如何驗證證書的合法性：校驗證書的頒發(fā)機構(gòu)是否受客戶端信任；通過CRL或OCSP的方式校驗證書是否被吊銷；對比系統(tǒng)時間，校驗證書是否在有效期內(nèi)；通過校驗對方是否存在證書的私鑰，判斷證書的網(wǎng)站域名是否與證書頒發(fā)的域名一致；

5、https和http的區(qū)別

? ? ? ? 答：https比較安全，經(jīng)過TLS/SSL加密，需要ca證書，需要收費；

? ? ? ? ? ? ? ? https和http的端口號不同，https默認端口號是443，http默認端口號是80；

? ? ? ? ? ? ? ? http是超文本傳輸協(xié)議，信息是明文傳旭，https是具有安全性的加密傳輸協(xié)議；

? ? ? ? ? ? ? ? http連接很簡單，是無狀態(tài)的；https協(xié)議是由ssl+http協(xié)議構(gòu)建的可加密傳輸，身份認證的網(wǎng)絡(luò)協(xié)議比http協(xié)議安全；

6、http2 和http1 的區(qū)別

? ? ? ? ? ? 答：http2采用二進制格式而非文本格式，解析起來更高效；

? ? ? ? ? ? ? ? ? ? http2是完全多路復(fù)用的，即一個tcp連接上同時跑多個http請求

? ? ? ? ? ? ? ? ? ? ?http2使用報頭壓縮，降低了開銷；

? ? ? ? ? ? ? ? ? ? http2讓服務(wù)器可以將響應(yīng)主動推送到客戶端緩存中，支持服務(wù)端推送，就是服務(wù)器可以對一個客戶請求發(fā)送多個響應(yīng)；

7、請求報頭舉例

? ? ? ? ? ? 答：Accept：客戶端可識別的內(nèi)容類型列表，用于指定客戶端接受那些類型的消息；

? ? ? ? ? ? ? ? ? ? cache-control：用于指定緩存指令，緩存指令是單向的且是獨立的，一個消息的緩存指令不會影響另一個消息的緩存指令

? ? ? ? ? ? ? ? ? ? host：請求主機名；

? ? ? ? ? ? ? ? ? ? user-agent：發(fā)送請求的瀏覽器類型、操作系統(tǒng)等信息

? ? ? ? ? ? ? ? ? ? Accept-Language：表示瀏覽器支持的語言類型；

8、輸入URL后網(wǎng)頁到底做了什么

? ? ? ? ? ? 答：通過域名（DNS）解析IP地址，查找域名對應(yīng)的ip地址

? ? ? ? ? ? ? ? ? ? 根據(jù)ip地址建立TCP的三次握手

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ①客戶端發(fā)送syn包到服務(wù)器，等待服務(wù)器確認：syn_send;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ②服務(wù)器手動syn包，確認客戶端的syn并發(fā)送自己的syn包:syn_recv;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ③客戶端收到服務(wù)器端發(fā)送的syn+ack包，向服務(wù)器發(fā)送確認包ack，此包發(fā)送完畢：established；完成三次握手

? ? ? ? ? ? ? ? ? ? 瀏覽器與服務(wù)器通信：瀏覽器發(fā)起請求，服務(wù)器響應(yīng)請求

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ①瀏覽器根據(jù)URL內(nèi)容生成http請求；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ②服務(wù)器收到請求后會根據(jù)內(nèi)容獲取相應(yīng)的html文件，將得到的HTML發(fā)送給客戶端；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ③在瀏覽器還沒有完全接收html文件時便開始渲染，顯示網(wǎng)頁；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ④在執(zhí)行html文件時，根據(jù)需要請求圖片，css，js等文件

? ? ? ? ? ? ? ? ? ? 瀏覽器與服務(wù)器斷開鏈接（TCP的四次揮手）

? ? ? ? ? ? ? ? ? 計算機網(wǎng)絡(luò)體系結(jié)構(gòu)：7層模型

? ? ? ? ? ? ? ? ? ? ? ?應(yīng)用層（HTTP、SMTP、FTP、POP3）；

? ? ? ? ? ? ? ? ? ? ? ? 傳輸層（TCP、UDP）；

? ? ? ? ? ? ? ? ? ? ? ? 網(wǎng)絡(luò)層（IP、路由器）：

? ? ? ? ? ? ? ? ? ? ? ? 數(shù)據(jù)鏈路層（網(wǎng)橋 ppp CD）；

? ? ? ? ? ? ? ? ? ? ? ? 物理層（集線器）；

9、瀏覽器渲染展示網(wǎng)頁的過程：

? ? ? ? ? ? ? ?答：html代碼轉(zhuǎn)化為DOM樹，css代碼轉(zhuǎn)化成css object model；結(jié)合dom和cssom生成一顆渲染樹；生成布局，將所有渲染樹的節(jié)點進行平面合成；將布局繪制到屏幕上；使用JavaScript腳本來動態(tài)的修改dom，以便給web應(yīng)用帶來動態(tài)行為；最后，web應(yīng)用執(zhí)行；

? ??????????????回流：當(dāng)render tree中的一部分或全部因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建，這就稱之為回流。每個頁面至少有一次回流，也就是頁面第一次加載的時候。完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中去，這就稱之為重繪。

? ? ? ? ? ? ? ? 觸發(fā)回流的幾種情況：
? ? ? ? ? ? ? ? ? ? ? ? 1.添加或者刪除可見的dom元素；
? ? ? ? ? ? ? ? ? ? ? ? 2.元素位置改變；
? ? ? ? ? ? ? ? ? ? ? ? 3.元素尺寸改變-邊距、填充、邊框、寬度、高度；
? ? ? ? ? ? ? ? ? ? ? ? 4.頁面渲染初始化；
? ? ? ? ? ? ? ? ? ? ? ? 5.內(nèi)容改變-文本改變或者圖片大小改變，引起計算值寬度，高度的改變；
? ? ? ? ? ? ? ? ? ? ? ? 6.瀏覽器尺寸大小的改變-resize事件發(fā)生時；

? ? ? ? ? ? ? ? ? ?重繪：回流必將引起重繪，重繪不一定會引起回流

? ? ? ? ? ? ? ? ? ? 減少重繪回流的實現(xiàn)：
? ? ? ? ? ? ? ? ? ? 1.css ：使用transform代替top；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?使用visibility代替display：none；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?避免使用table布局
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 盡可能在dom樹的最末端改變class，限制了回流的范圍，使其影響盡可能少的節(jié)點；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 避免設(shè)置多層內(nèi)聯(lián)樣式；避免層級過多；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 避免使用css表達式，將頻繁重繪或者回流的節(jié)點設(shè)置為圖層；
? ? ? ? ? ? ? ? ? ? ? ?2.javascript:避免頻繁操作樣式，最好一次性重寫style樣式；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 避免頻繁操作DOM，最好創(chuàng)建一個documentFragment，在它上面應(yīng)用所有的DOM操作，最后再把它添加到文檔中。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 避免頻繁讀取會影響重繪回流的屬性，用一個變量緩存起來；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 對一個復(fù)雜動畫的元素使用絕對定位，使他脫離文檔流，否則會引起父元素以及后續(xù)元素頻繁回流；

10、xss攻擊和csrf攻擊防御

? ? ? ? ? ? 答：xss的防御：1.對用戶輸入的內(nèi)容進行解析和過濾或編碼（過濾有危險的dom節(jié)點，如script img link style iframe等）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.對cookie做保護，設(shè)置httpOnly，防止客戶端通過document.cookie讀取cookie;

? ? ? ? ? ? ? ? ? ? csrf的防御：1.盡量減少使用get請求；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.使用驗證碼；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.referer check；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?4.使用token；

11、數(shù)組去重

? ? ? ? ? ? ? 解析：

12、跨域

? ? ? ? ? ? jsonp的原理：動態(tài)創(chuàng)建一個script標(biāo)簽，動態(tài)加載一個js文件，載入成功后會執(zhí)行在URL參數(shù)中指定的函數(shù)，并把需要的json數(shù)據(jù)所謂參數(shù)傳入；

? ? ? ? ? ? 優(yōu)缺點：只能傳遞get請求，有一定得限制；

? ? ? ? ? ? cros跨域資源共享：（原理）服務(wù)器對于cros的支持，設(shè)置Access-Control-Origin為你傳輸?shù)膐rigin的值，瀏覽器監(jiān)測到響應(yīng)的設(shè)置，支持跨域；

? ? ? ? ? ? 優(yōu)缺點：支持所有類型的請求 get、post、put、delete、update等；

? ? ? ? ? ? node中間件代理跨域：通過啟用一個代理服務(wù)器，實現(xiàn)數(shù)據(jù)的轉(zhuǎn)發(fā)；node+vue+webpack-dev-server大力接口跨域，在開發(fā)模式下，只需要設(shè)置devServer=>proxy即可

14、this的使用場景+apply、call、bind的區(qū)別，手動封裝

? ? ? ? ? ? this的使用場景：this的值會隨著函數(shù)的使用場景的不同而發(fā)生變化，但是一個原則就是，this指的是調(diào)用函數(shù)的那個對象，即誰調(diào)用指向誰；

? ? ? ? ? ? ①作為對象的方法調(diào)用；
? ? ? ? ? ? ②構(gòu)造器調(diào)用；
? ? ? ? ? ? ③function.prototype.call 或 function.prototype.apply調(diào)用；
? ? ? ? ? ? ④作為普通函數(shù)調(diào)用；

? ? ? ? ? ? ?call和apply的用途：①改變this的指向；②借用其他對象的方法?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? call的另外一個作用就是：將偽數(shù)組轉(zhuǎn)換為數(shù)組：Array.prototype.slice.call(divs);---divs為要轉(zhuǎn)換的偽數(shù)組

? ? ? ? ? ? ? call 和apply 的區(qū)別：都是用來改變this的指向，都可以借用其他對象的方法，不同是apply的第二個參數(shù)傳值方式必須是集合，即偽數(shù)組或者數(shù)組，call的第二個參數(shù)傳值是依次傳入各個值，用逗號分隔；他們的第一個參數(shù)都代表的是函數(shù)體內(nèi)this的指向；

? ? ? ? ? ? ? ?bind和call、apply的區(qū)別：call和apply是立即執(zhí)行函數(shù)，bind非立即執(zhí)行，為函數(shù)體，執(zhí)行時在后面加小括號，小括號中傳值

15、ES6的重要知識點：

? ? ? ? ? ?1> Generator函數(shù)是es6提供的異步編程解決方案，可以理解為是一個狀態(tài)機，封裝了多個內(nèi)部狀態(tài)；
? ? ? ? ? ? 2>Generator函數(shù)會返回一個遍歷器對象；可以依次遍歷函數(shù)內(nèi)部的內(nèi)一個狀態(tài)，特征：function關(guān)鍵字與函數(shù)名之間有一個*號，二是，函數(shù)體內(nèi)部使用yield表達式，定義不同的內(nèi)部狀態(tài)；
? ? ? ? ? ? 3>Generator函數(shù)是分段執(zhí)行的，yield表達式是暫停執(zhí)行的標(biāo)記，next方法每次執(zhí)行，內(nèi)部指針就從函數(shù)頭部或者上次停下來的地方開始執(zhí)行，直到遇到下一個yield表達式為止。
? ? ? ? ? ? 4>es6中l(wèi)et const命令：不存在變量提升，不允許聲明前使用，會報錯；let聲明的是塊級作用域；這時候會存在一個臨時死區(qū)，即{}中間都為臨時死區(qū)，不受外部的影響。let不允許相同作用域內(nèi)重復(fù)聲明一個變量。
? ? ? ? ? ? 5>為什么需要塊級作用域？---場景① 內(nèi)層變量可能會覆蓋外層變量（由于存在變量提升）；場景②用來計數(shù)逇循環(huán)變量泄露為全局變量；
? ? ? ? ? ? 6>內(nèi)層作用域可以定義外層作用域同名的變量，塊級作用域的出現(xiàn)替換掉了原來的匿名函數(shù)IIFE；函數(shù)只能在頂層作用域和函數(shù)作用域之中聲明，不能在塊級作用域中聲明。塊級作用域必須有大括號，沒有就報錯；嚴(yán)格模式下，函數(shù)聲明只能在當(dāng)前作用域的頂層；
? ? ? ? ? ? 7>const命令聲明的變量不能改變值，這意味著，一旦聲明立即執(zhí)行初始化，不能留到以后賦值，只聲明不賦值就會報錯；
? ? ? ? ? ? 8>es6提供了新的數(shù)據(jù)結(jié)構(gòu)Set。類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值；本身是一個構(gòu)造函數(shù)，用來生成set數(shù)據(jù)結(jié)構(gòu)。
? ? ? ? ? ? 9>字符串去重：

? ? ? ? ? ? 10>Set實例的屬性和方法：
? ? ? ? ? ? ? ? ? ? ①Set.prototype.constructor:構(gòu)造函數(shù)，默認就是Set函數(shù)；
? ? ? ? ? ? ? ? ? ? ②Set.prototype.size:返回Set實例的成員總數(shù)；
? ? ? ? ? ? ? ? ? ? ③Set.prototype.has(value):返回一個布爾值，表示該值是否為Set的成員。
? ? ? ? ? ? ? ? ? ? ④Set.prototype.clear():清楚所有成員，沒有返回值；
? ? ? ? ? ? ? ? ? ? ⑤Set.prototype.keys():返回鍵名的遍歷器；
? ? ? ? ? ? ? ? ? ? ⑥Set.prototype.values():返回鍵值得遍歷器；可省略valuse方法，直接用for...of 循環(huán)遍歷set。
? ? ? ? ? ? ? ? ? ? ⑦Set.prototype.entries():返回鍵值對的遍歷器；
? ? ? ? ? ? ? ? ? ? ⑧Set.prototype.forEach():使用回調(diào)函數(shù)遍歷每個成員；語法：forEach(function（value,key,集合本身--可省略）);
? ? ? ? ? ? ? ? ? ? ⑨
? ??????????

? ? ? ? ? ? 11>promise對象：

? ? ? ? ? ? ? ? ? ? promise是異步編程的一種解決方案，可以獲取異步操作的消息，提供統(tǒng)一的API，是一個容器，保存著未來才會結(jié)束的事件；對象的狀態(tài)不受外界的影響，一旦狀態(tài)改變，就不會在變，從pending(進行中)變成fulfilled(已成功) 和從 pending變?yōu)閞ejected(已失敗)

? ? ? ? ? ? ? ? ? ? 缺點：一旦新建就會立即執(zhí)行，無法中途取消。如果不設(shè)置回調(diào)函數(shù)，promise內(nèi)部會拋出錯誤，但是不會反應(yīng)到外部，pending狀態(tài)時無法無法得知進展到哪一個階段；

? ? ? ? ? ? ? ? ? ? promise構(gòu)造函數(shù)接收一個函數(shù)作為參數(shù)，改函數(shù)有兩個參數(shù)，resolve 和reject，他們是兩個函數(shù)由JavaScript引擎提供，不用自己部署；resolve函數(shù)的作用是將promise對象的狀態(tài)從未完成變?yōu)槌晒Γ╬ending--resolved）；reject函數(shù)的作用是將promise對象的狀態(tài)從未完成變成失?。╬ending--rejected）

16、VUE項目中給列表組件綁定key的作用：

? ? ? ? ? ? 答：key是給每一個vnode的唯一id，可以依靠key更準(zhǔn)確，更快的拿到原來節(jié)點中對應(yīng)節(jié)點，否則如果對節(jié)點進行了增刪操作，節(jié)點無變化，但是節(jié)點的內(nèi)容發(fā)生了更新；綁定唯一的id后key就無法復(fù)用了，利用key的唯一性生成map對象來獲取對應(yīng)節(jié)點；

17、防抖節(jié)流的概念，有什么區(qū)別，如何實現(xiàn)

? ? ? ? ? ? 防抖：觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計算事件；
????????????實現(xiàn)：每次觸發(fā)事件時，都取消之前的延時調(diào)用方法，或者清定時器；

? ? ? ? ? ? 節(jié)流：高頻事件觸發(fā)，但在n秒內(nèi)只會執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率
? ? ? ? ? ? 實現(xiàn)：每次觸發(fā)事件時都判斷當(dāng)前是否由等待執(zhí)行的延時函數(shù)；

18、Set、Map、WeakSet、WeakMap之間的區(qū)別

? ? ? ? ? ? Set：成員唯一、無序且不重復(fù)；可以遍歷，方法有add、delete、has； [value,value],鍵值與鍵名是一致的，可以理解為沒有鍵名；
? ? ? ? ? ? WeakSet：成員都是對象；成員都是弱引用，可以被垃圾回收機制回收，可以用來保存dom節(jié)點，不容易造成內(nèi)存泄漏；不能遍歷，方法有add、delete、has
? ? ? ? ? ? Map：本質(zhì)上是鍵值對的集合，類似集合；可以遍歷，方法很多，可以跟個數(shù)據(jù)格式轉(zhuǎn)換；
? ? ? ? ? ? WeakMap：只接受對象作為鍵名，null除外，不接受其他類型的值作為鍵名；弱引用，鍵值任意，鍵名指向的對象可以被垃圾回收機制回收，不能遍歷；

19、事件循環(huán)中函數(shù)的執(zhí)行順序問題（async、await、setTimeout、Promise函數(shù)）

? ? ? ? ? ? 任務(wù)隊列：js分為同步任務(wù)和異步任務(wù)；
? ? ? ? ? ? 同步任務(wù)都在主線程上執(zhí)行，形成一個執(zhí)行棧，主線程外事件觸發(fā)線程管理一個任務(wù)隊列，異步任務(wù)就會注冊回調(diào)函數(shù)，存放到任務(wù)隊列中去，一旦主線程執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，就會讀取任務(wù)隊列，將可運行的異步任務(wù)添加到可執(zhí)行棧中執(zhí)行；
? ? ? ? ? ? 一個eventloop中可以有一個或者多個taskqueue 一個任務(wù)隊列就是一個任務(wù)集合；每一個任務(wù)都有一個任務(wù)源，源自同一個tasksource 的task必須放到同一個任務(wù)隊列，從不同源來的則被添加到不同隊列。setTimeout/Promise等API便是任務(wù)源，進入任務(wù)隊列的就是他們制定的具體執(zhí)行任務(wù)；

? ? ? ? ? ? 宏任務(wù)：每次執(zhí)行棧執(zhí)行的代碼就是一個宏任務(wù)（包括每次從事件隊列中獲取一個事件回調(diào)并放到執(zhí)行棧中執(zhí)行）；瀏覽器為了能夠是的js內(nèi)部的宏任務(wù)與dom任務(wù)能夠有序的執(zhí)行，會在一個宏任務(wù)執(zhí)行結(jié)束后，在下一個宏任務(wù)執(zhí)行開始前，對頁面進行重新渲染
? ? ? ? ? ? 宏任務(wù)主要包含：script整體代碼、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate

? ? ? ? ? ? 微任務(wù)：可以理解是當(dāng)前task執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)，也就是在當(dāng)前task任務(wù)后，下一個task之前，在渲染之前；所以微任務(wù)的響應(yīng)速度相比setTimeout會更快，無需等渲染，也就是說，在某一個宏任務(wù)執(zhí)行完畢后，就會在它執(zhí)行期間產(chǎn)生的所有微任務(wù)都執(zhí)行完畢（渲染前）。
? ? ? ? ? ? 微任務(wù)主要含：Promise.then 、MutationObserver、Process.nextTick? ?

? ? ? ? ? ? 運行機制：每進行一次循環(huán)操作稱之tick，每一次tic的步驟如下：
? ? ? ? ? ? ? ? ? ? 執(zhí)行一個宏任務(wù)，棧中沒有就從任務(wù)隊列中獲??；
? ? ? ? ? ? ? ? ? ? 執(zhí)行過程中如果遇到微任務(wù)，就將它添加到微任務(wù)的任務(wù)隊列中；
? ? ? ? ? ? ? ? ? ? 宏任務(wù)執(zhí)行完畢后，立即執(zhí)行當(dāng)前微任務(wù)隊列中的所有微任務(wù)；
? ? ? ? ? ? ? ? ? ? 當(dāng)前微任務(wù)執(zhí)行完畢開始檢查渲染，然后GUI線程接管渲染；
? ? ? ? ? ? ? ? ? ? 渲染完成后，js線程繼續(xù)接管，開始下一個宏任務(wù)

? ? ? ? ? ? Promise和async中的立即執(zhí)行：Promise中的異步體現(xiàn)在then和catch中，所以寫在Promise中的代碼是被當(dāng)做同步任務(wù)立即執(zhí)行的，而在async/await中，在await出現(xiàn)前，其中的代碼也是立即執(zhí)行的，那么出現(xiàn)await，后面的表達式會先執(zhí)行一遍，將await后面的代碼加入到微任務(wù)中，然后就會跳出整個async函數(shù)來執(zhí)行后面的代碼。（await其實就是微任務(wù)）

? ? ? ? ? ? 執(zhí)行順序為：宏任務(wù)>執(zhí)行棧>微任務(wù)
? ? ? ? ? ? script代碼先執(zhí)行，遇見async/await時，await前的代碼會立即執(zhí)行，awit后的表達式會先執(zhí)行，awit后的代碼會加入到微任務(wù)隊列中去，接著會跳出async；

20、js的異步發(fā)展歷程以及優(yōu)缺點

? ? ? ? ? ? 答：①回調(diào)函數(shù)：缺點：不能用try catch捕獲錯誤，不能return；
? ? ? ? ? ? ? ? ? ? ②promise 為了解決callback的問題產(chǎn)生的。實現(xiàn)鏈?zhǔn)秸{(diào)用，每次then返回的都是一個全新的promise，如果我們在then中return，return的結(jié)果會被promise的resolve()包裝。缺點：無法取消promise，錯誤需要回調(diào)函數(shù)來捕捉；
? ? ? ? ? ? ? ? ? ? ③Generator：可以控制函數(shù)的執(zhí)行，可以配合co函數(shù)庫使用
? ? ? ? ? ? ? ? ? ? ④Async/await異步的終極解決方案：await會導(dǎo)致性能上的降低；

? ? ? ? ? ? ? ? ? ? ?⑤promise構(gòu)造函數(shù)是同步執(zhí)行的，then方法是異步執(zhí)行的；

21、npm安裝機制，為什么輸入npm install 就可以自動安裝對應(yīng)的模塊？

? ? ? ? ? ? ? ?答：npm安裝機制：發(fā)出npm install命令后會查詢node_modules目錄之中是否已經(jīng)存在指定的模塊，若存在，則不需要重新安裝，若不存在，npm向registry查詢模塊壓縮的網(wǎng)址；放在根目錄.npm目錄里；解壓壓縮到當(dāng)前node_modules目錄；
? ? ? ? ? ? ? ? npm實現(xiàn)原理：執(zhí)行工程自身preinstall；確定首層依賴模塊，也就是dependencies和devdependencies屬性中直接指定的模塊；接著獲取模塊，首先要確定其版本，package.json中往往是語義化版本，如果有信息直接拿即可，如果沒有，則從倉庫中獲取最新版本；

22、判斷數(shù)組類型的三種方法優(yōu)劣分析：

? ? ? ? ? ? ? ? 解析：Object.prototype.toString.call() 每一個繼承Object的對象都有一個toString的方法，如果toString方法沒有被重寫，會返回object type 其中type為對象的類型。但是當(dāng)除了object對象外，其他類型直接使用toString方法會直接返回內(nèi)容的字符串，所以需要使用call或者apply方法來改變toString方法的執(zhí)行上下文；基本的數(shù)據(jù)類型都能判斷，null 和undefined都可以--用于判斷瀏覽器內(nèi)置對象；
? ? ? ? ? ? ? ? instanceof的內(nèi)部機制是通過判斷對象的原型鏈中是不是能找到類型的prototype。判斷一個對象是否為數(shù)組，會判斷這個對象的原型鏈上是否會找到對應(yīng)的Array的原型，找到返回true，否者返回false；只能用來判斷對象類型，原始類型不可以；并且所有對象類型instanceof object都是返回true；
? ? ? ? ? ? ? ? Array.isArray()是es5新增的方法，當(dāng)不存在的時候，可用object.prototype.toString.call()方法；性能最好；

23、觀察者模式 vs 發(fā)布訂閱者模式：

? ? ? ? ? ? 答：觀察者模式中主體和觀察者是互相感知的，發(fā)布-訂閱模式是借助第三方vuex來實現(xiàn)調(diào)度的，發(fā)布者和訂閱者之間互不感知；發(fā)布訂閱者模式更適合于復(fù)雜場景；

24、cookie和token為什么token不會被劫持

? ? ? ? ? ? 答：cookie登錄后后端生成一個sessionid放在cookie中返回給客戶端，并且服務(wù)器一直記錄著這個sessionid，客戶端以后每次請求都會帶上這個sessionid，服務(wù)端通過這個sessionid來驗證身份之類的操作哦，所以別人拿到了cookie也就是拿到了存放的sessionid，就可以完全替代；
? ? ? ? ? ? ? token：登錄后后端返回一個token給客戶端，客戶端將這個token存儲起來，每次客戶端發(fā)送請求都需要開發(fā)者手動將token放到header中去，服務(wù)端每次只需要對這個token進行驗證就能使用token中的信息來進行下一步操作了；

25、vue的雙向數(shù)據(jù)綁定，以及view如何改變model，model如何改變view

? ? ? ? ? ? 答：vue雙向數(shù)據(jù)綁定的核心是利用es5的object.defineProperty,這也就是為什么vue不能兼容ie8以下的瀏覽器的原因；Object.defineProperty方法會直接在一個對象上定義一個新屬性，或者修改一個對象現(xiàn)有的屬性，并返回這個對象；
? ? ? ? ? ? ?Object.defineProperty(obj,prop,descriptor)---obj定義屬性的對象，prop要定義或者要修改的屬性；descriptor將被定義或者修改屬性的描述【核心】；
? ? ? ? ? ? ? observe的功能就是監(jiān)測數(shù)據(jù)的變化。它是一個類，它的作用是給對象添加getter和setter，用于依賴收集和派發(fā)更新；
? ? ? ? ? ? ? ?依賴收集getter：*const dep = new Dep()//實例化一個dep實例
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?*在get函數(shù)中通過dep.depend做依賴收集；
? ? ? ? ? ? ? ? 派發(fā)更新setter： *childOb = !shallow && observe(newval) //如果shllow為false的情況，會對新設(shè)置的值編程一個響應(yīng)式對象；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? *dep.notify() //通知所有訂閱者
? ? ? ? ? ? ? ? ?派發(fā)的過程：當(dāng)我們的組件中對響應(yīng)的數(shù)據(jù)做了修改，就會觸發(fā)setter的邏輯，最后調(diào)用dep.notify()方法，他是dep的一個實例方法，具體做法是遍歷依賴收集中建立的subs，然后調(diào)用每個watcher的update方法； vue在做派發(fā)更新時的一個優(yōu)點，它并不會每次數(shù)據(jù)改變都會觸發(fā)watcher回調(diào)，而是把這些watcher先添加到一個隊列中，然后再nextTick（屬于微任務(wù)）后執(zhí)行watcher的run函數(shù)

? ? ? ? ? ? ? ? vue中子組件不可以修改父組件傳遞的prop的值，原因是：為了保證單向數(shù)據(jù)流，易于監(jiān)測數(shù)據(jù)的流動，出錯容易定位，如果修改了，會觸發(fā)props的set方法時發(fā)現(xiàn)更新，會給出警告；

? ? ? ? ? ? ? ? Object.defineProperty的缺點：無法監(jiān)控到數(shù)組下標(biāo)的變化，導(dǎo)致通過數(shù)組下標(biāo)添加元素，不能實時響應(yīng)
? ? ? ? ? ? ? ??Object.defineProperty只能劫持對象的屬性，從而需要對每個對象，每個屬性進行遍歷，如果，屬性值是對象，還需要深度遍歷。Proxy可以劫持整個對象，并返回一個新的對象。

26、改造下面代碼，使之輸入0-9，寫出你能想到的所有解法。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

27、BFC的概念及其應(yīng)用

? ? ? ? ? ? 答：BFC就是塊級格式上下文，是頁面盒模型布局的一種渲染模式，相當(dāng)于一個獨立的容器，里面的元素和外面的元素相互不影響，創(chuàng)建bfc的方式有： html根元素、float浮動、絕對定位、overflow不為visiable； display為表格布局或者彈性布局；
? ? ? ? ? ? BFC的主要作用：清浮動、防止同一bfc容器中的相鄰元素間的外邊距重疊問題

28、發(fā)送數(shù)據(jù)埋點使用1X1的透明gif圖片的原因：

? ? ? ? ? ? 答：①沒有跨域問題，img天然支持跨域；②不會阻塞頁面加載，不影響用戶體驗；性能更好；③gif的最低合法體積最好，相比較bmp、png、jpg而言

29、讓一個div水平垂直居中：

? ? ? ? ? ? 方法一：

? ? ? ? ? ? 方法二：

? ? ? ? ? ? 方法三：

? ? ? ? ? ? 方法四：

30、對MVVM開發(fā)模式的理解：

31、canvas畫布與svg的區(qū)別：

? ? ? ? ? ? 答：canvas為標(biāo)量圖，是通過JavaScript繪制的2D圖形，不支持事件處理器，文本渲染力弱，最適合圖形密集型的游戲；svg為矢量圖，是通過xml描述的2D圖形，支持事件處理器，不適合游戲的應(yīng)用，適合帶有大型渲染區(qū)域的應(yīng)用程序，如百度地圖，谷歌地圖等；

32、px、em和rem三者的區(qū)別與聯(lián)系：

????????????答：? px即Pixel像素，是長度單位，可以理解為絕對像素，像素是相對于顯示器屏幕而言，IE無法調(diào)整那些使用px作為單位的字體大??；
????????????em可以理解為相對長度，相對于當(dāng)前對象內(nèi)文本的字體尺寸；? ? 10px=1em ，所以px除以10加em就可以轉(zhuǎn)換為em；em的值并不是固定的，會繼承父級字體的大小 ；
? ? ? ? ? ? rem是css3中新增的一個相對單位，相對于根html元素；修改根元素的大小就成比例的調(diào)整所有字體大小；可以從瀏覽器字體設(shè)置中繼承字體大??；

33、git和svn的區(qū)別：????????

? ? ? ? ? ? 答：最核心的區(qū)別git是分布式的，svn不是，即使沒有網(wǎng)絡(luò)也可以commit，查看歷史版本記錄，創(chuàng)建項目分支等操作，等網(wǎng)絡(luò)連接再push到server端；git沒有一個全局版本號，git的內(nèi)容完整性要優(yōu)于svn；git把內(nèi)容用元數(shù)據(jù)方式存儲，svn是按文件，git clone效率高；

34、webpack.json 文件中必備字段：

? ? ? ? ? ? 答：兩種依賴：dependencies(生產(chǎn)環(huán)境包的依賴：正常運行該包所需要的依賴項) 和 devDependencies（開發(fā)環(huán)境包的依賴：開發(fā)的時候需要的依賴項）

35、遍歷數(shù)組的方法：

? ? ? ? ? ? 答案：① 使用for循環(huán)遍歷數(shù)組；
? ? ? ? ? ? ? ? ? ? ? ?② 使用foreach((item,index,array)=>{回調(diào)函數(shù)});? -------沒有返回值，對原數(shù)組無影響，支持IE；
? ? ? ? ? ? ? ? ? ? ? ? ③ 使用array.map(function (value,index,array){回調(diào)函數(shù)? return XXX})；有返回值，可以return出來，不影響原來的數(shù)組；
? ? ? ? ? ? ? ? ? ? ? ? ④ 使用 for of ；
? ? ? ? ? ? ? ? ? ? ? ? ⑤filter 進行遍歷