摘要：在函數(shù)中通過賦予變量，在函數(shù)中，指向定時器以及回調(diào)函數(shù)當(dāng)不需要或者時，定時器沒有被，定時器的回調(diào)函數(shù)以及內(nèi)部依賴的變量都不能被回收，造成內(nèi)存泄漏。比如使用了定時器，需要在中做對應(yīng)銷毀處理。

3月5日，從中山去往廣州，一大早7點多就做好準(zhǔn)備了，在高鐵站了30分鐘，轉(zhuǎn)廣州地鐵又站了90分鐘，去到地鐵口，就有一輛cvte的大巴車過來接送，我選擇的面試時間是11：00-12：00，但前面的人還沒面試完而且12：00的時候又去吃了飯，所以面試的開始時間是下午1點，直到下午3點才面完。

我面試的崗位是前端開發(fā)，一面問的挺基礎(chǔ)的，那就過了，二面感覺大多數(shù)是業(yè)務(wù)的，由于我后臺學(xué)的是php，面試官喜歡考node的知識，估計這也是我涼的最大原因吧。作為一名普通二本非科班的我，能夠闖進(jìn)二面覺得是非常幸運的了，繼續(xù)加油！

線上筆試我是2月21日做的，其實做完之后自我感覺很一般，沒想到能夠進(jìn)入面試的。題型分為選擇題和兩道編程題，其實那時我應(yīng)該利用python后臺截屏的，這樣就能夠把所有的題目截下來。
選擇題涉及的知識面涉及的挺廣的，讓我回想一下，有：

①、EventLoop機(jī)制及微任務(wù)
②、阻止相同事件的其他偵聽器被調(diào)用（stopImmediatePropagation）
③、css中margin的%是以父元素的寬度作為基準(zhǔn)（這個真不知道呀）
大概記得這么多。。。

編程題可以參考我這篇文章：https://segmentfault.com/a/11...

面試官人比較隨和，所以我不怎么緊張，一面問的是基礎(chǔ)，大部分我覺得都o(jì)k，面試是一對一的，首先自我介紹，我就說我是非科班的，前端的知識都是自學(xué)的，然后就說了各種各樣的自學(xué)方法。接下來看看問的都是什么知識

①、css盒子模型：
有兩種， IE 怪異盒子模型(border-box) 和 W3C標(biāo)準(zhǔn)盒子模型(content-box)

怪異：width = content + border + padding
標(biāo)準(zhǔn)：width = content

可以通過css的box-sizing屬性來切換這兩種盒子

box-sizing： border-box    怪異盒子模型
box-sizing： content-box   標(biāo)準(zhǔn)盒子模型

②、http狀態(tài)碼：

1開頭：（被接受，需要繼續(xù)處理。）

100：客戶端繼續(xù)請求 、101：客戶端切換協(xié)議

2開頭：（請求成功）

200：請求成功
202：服務(wù)器已接受請求，但尚未處理
204：服務(wù)器成功處理了請求，但未返回內(nèi)容

3開頭：（請求被重定向）  

301：(永久重定向)、 302： (臨時重定向) 、
303：http1.1協(xié)議，禁止被緩存
304：(協(xié)商緩存成功（資源未修改）的返回值)

4開頭：（客戶端請求錯誤）

400：客戶端請求的語法錯誤，服務(wù)器無法理解
403：服務(wù)器理解請求客戶端的請求，但是拒絕執(zhí)行此請求
404：服務(wù)器無法根據(jù)客戶端的請求找到資源（網(wǎng)頁）

5開頭：（服務(wù)器錯誤）

③、強(qiáng)緩存和協(xié)商緩存：
當(dāng)說到304狀態(tài)碼的時候，面試問我控制協(xié)商緩存的字段有哪些：
控制協(xié)商緩存的字段分別有：

Last-Modified / If-Modified-Since 和 Etag / If-None-Match

*其中Etag / If-None-Match的優(yōu)先級比Last-Modified / If-Modified-Since高
然后又問了我知道Etag是通過什么生成的，這個我還真沒了解，只是知道一個標(biāo)識符而已，面試官就說了是通過時間值生成的

接著又問了強(qiáng)緩存的狀態(tài)碼
我說強(qiáng)緩存成功的狀態(tài)是200，在讀取緩存緩存的時候，分為兩種情況，在chrome瀏覽器的Network下的Size可以看到兩種字段

from memory cache 和 from disk cache

④、閉包的概念以及內(nèi)存泄漏：

1、概念：有權(quán)訪問另一個函數(shù)作用域和變量的函數(shù)，創(chuàng)建閉包最簡單的方式就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。
2、好處：由于可以讀取函數(shù)內(nèi)部的變量，如果希望一個變量常駐于內(nèi)存中又可全局訪問，同時又想避免全局變量的污染，此時使用閉包就是一種恰當(dāng)?shù)姆绞?3、缺點：但正是因為函數(shù)內(nèi)部變量被外部所引用，不會被垃圾回收，就會造成常駐內(nèi)存，使用過多容易造成內(nèi)存泄漏

有些時候真是給自己挖坑，哈哈哈，我說閉包使用過多會造成內(nèi)存泄漏，緊接著他就問我怎么查看內(nèi)存泄漏，我說chrome瀏覽器有個面板是專門用來查看內(nèi)存泄漏的，但是平時不常用，就沒怎么留意，接下來他就問我常見的內(nèi)存泄漏方式

1.意外的全局變量

a、在一個函數(shù)你忘記用變量聲明符(var或let)來聲明的變量，一個意外的全局變量就被創(chuàng)建了。
b、在函數(shù)中通過this賦予變量，在函數(shù)中，this指向window

2.定時器setTimeout setInterval以及回調(diào)函數(shù)

當(dāng)不需要setInterval或者setTimeout時，定時器沒有被clear，定時器的回調(diào)函數(shù)以及內(nèi)部依賴的變量都不能被回收，造成內(nèi)存泄漏。
比如：vue使用了定時器，需要在beforeDestroy 中做對應(yīng)銷毀處理。js也是一樣的。

3.閉包(在全局作用域上保留著閉包局部變量的引用)

4.循環(huán)引用的變量或者對象

⑤、防抖（debounce）：手撕代碼
面試官把他的電腦轉(zhuǎn)向我，我看到lodash，之前我只是知道這個玩意可以用來克服JSON深拷貝的缺陷，他叫我實現(xiàn)一個debounce的加強(qiáng)版（隨時點擊次數(shù)增加，延遲也增加）。一開始，我沒有好的思路，他就叫我先實現(xiàn)一個普通的debounce，代碼大致如下：

function debounce(fn, wait=1000) {    
    let timeout = 0;    
    return function(...args) {     
        if(timeout){
            clearTimeout(timeout);   
        }        
        timeout = setTimeout(() => { 
            fn.apply(this, args)
        }, wait);
    }
}

寫出來后，要求寫個加強(qiáng)版的，可能我想太多了吧。。。當(dāng)時沒寫出來，其實只要加一條語句即可

// 上面代碼省略
 timeout = setTimeout(() => { 
    wait = wait*1.5;        // 主要增加這條語句
    fn.apply(this, args)
}, wait);

⑥、css三角形：手撕代碼
一開始我以為是三角箭頭，挺興奮的，覺得很簡單，就說了使用兩邊的border然后在rotate即可，后來才發(fā)現(xiàn)是三角形，一時想不出來，他問我之前有沒有實現(xiàn)過，我說沒有，他就說如果之前沒有實現(xiàn)的話，一時半會也是想不出來的

這里我百度的答案：

div{
    width:0;
    height:0;
    border-right:40px solid transparent;
    border-left: 40px solid transparent;
    border-bottom:40px solid red;
}

對于css方面，代碼的實現(xiàn)并不重要，面試官更注重思路

當(dāng)他和我說了思路后，又叫我實現(xiàn)一個等邊三角形....
這個我就說了等邊三角形每個角是60度，哈哈，具體不知道怎么實現(xiàn)

⑦、原生js讀取cookie
一般讀寫cookie的時候我都是用 js-cookie 這個庫的，所以對于原生忘得七七八八了
因為原生js獲取cookie只能通過

document.cookie

然后獲得的是所有cookie集合在一起的字符串，需要使用正則什么的對此解析

從一面完到二面起碼等了半個小時以上吧，面試我的又是另外一個面試官，這次面試的內(nèi)容大多涉及到業(yè)務(wù)層次的，一上來就是問你使用過哪些庫和框架，最后還是敗在了二面

①、實現(xiàn)一個斐波那契數(shù)列 手撕代碼
斐波那契數(shù)列就是

1 1 2 3 5 8 13 21 34 55...

這里我采用的遞歸的思路，因為我是非科班的，數(shù)據(jù)結(jié)構(gòu)和算法沒怎么學(xué)，厲害點的同學(xué)這道題就會用動態(tài)規(guī)劃的方案

function recurFib(num){
    if(num < 3){
        return 1;
    }else{
        return recurFib(num-1) +  recurFib(num-2)
    }
}

②、vue和react的差異
React 和 Vue 有許多相似之處，它們都有：

使用 Virtual DOM
提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件。
將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫。

然后又涉及到虛擬dom：

Vitual DOM是一種虛擬dom技術(shù)，本質(zhì)上是基于javascript實現(xiàn)的，相對于dom對象，javascript對象更簡單，處理速度更快，dom樹的結(jié)構(gòu)，屬性信息都可以很容易的用javascript對象來表示
原生JS或JQ操作DOM時，瀏覽器會從構(gòu)建DOM樹開始從頭到尾執(zhí)行一遍流程。
操作DOM的代價仍舊是昂貴的，頻繁操作還是會出現(xiàn)頁面卡頓，影響用戶體驗。
創(chuàng)建虛擬DOM并將其映射成真實DOM，這樣所有的更新都可以先反應(yīng)到虛擬DOM上，需要用到Diff算法。

③、上下固定，中間滾動布局
這種布局一看就是移動端的，主要之前沒有去了解移動端的布局，可能說的太不好，自己回來用代碼實現(xiàn)了一下：
功能：頭部和底部自適應(yīng)高度；中間占滿剩余部分，超出自動滾動
思路：讓容器占滿整個頁面的高度，整體采用flex布局，中間滾動部分用 overflow: auto

    

        header



header
    
    

        middle








        middle








        middle








        middle








    
    

        footer



footer
    

html, body{
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%;
}
.cotainer{
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
}
.middle{
    background-color: aquamarine;
    flex-grow: 1;
    overflow: auto;
}
.header, .footer{
    background-color: chartreuse;
}
/* 隱藏PC瀏覽器的滾動條，移動端無需考慮 */
.middle::-webkit-scrollbar {
    display: none;  
}

④、事件執(zhí)行機(jī)制
javascript是一門單線程語言
JS 在執(zhí)行的過程中會產(chǎn)生執(zhí)行環(huán)境，這些執(zhí)行環(huán)境會被按照順序的加入到執(zhí)行棧中。
同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行"場所"，同步的進(jìn)入主線程，異步的代碼，會被掛起并加入到 Task（有多種 task） 隊列中

除了廣義的同步任務(wù)和異步任務(wù)，還包括有更加精確的微任務(wù)和宏任務(wù)
微任務(wù)包括 process.nextTick ，promise ，Object.observe ，MutationObserver
宏任務(wù)包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering

所以正確的一次 Event loop 順序是這樣的

1.執(zhí)行同步代碼，這屬于宏任務(wù)
2.執(zhí)行棧為空，查詢是否有微任務(wù)需要執(zhí)行
3.執(zhí)行所有微任務(wù)
4.必要的話渲染 UI
5.然后開始下一輪 Event loop，執(zhí)行宏任務(wù)中的異步代碼

⑤、跨域
我說一般都是用CORS比較多
CORS原理：使用自定義的HTTP頭部讓瀏覽器和服務(wù)器溝通
如添加一個額外的Origin頭部，包含請求頁面的的地址信息（協(xié)議、域名、端口號）
在后臺設(shè)置 Access-Control-Allow-Origin即可

然后進(jìn)一步問了CORS的預(yù)檢請求，問了OPTIONS的作用
接著又問了在滿足什么條件下不會觸發(fā)CORS的預(yù)檢請求，
這個一時想不起來，MDN上面總結(jié)得比較齊全
滿足簡單請求（不會觸發(fā) CORS 預(yù)檢請求）的條件：

1、請求為GET、HEAD、POST其一
2、請求字段滿足CORS安全集合的字段
3、Content-Type 有限制

⑥、node.js的知識
對node不太了解，涉及到websocket...看來要好好加油了

⑦、微信公眾號的知識
面試問了我微信公眾號的知識....我只是做過微信小程序，并沒有涉及到公眾號

面試整體難度適中，其實對于這次面試我自己本身就是抱著一種嘗試的心態(tài)，在面試的時候，我們應(yīng)該要以一種學(xué)習(xí)者的心態(tài)，不會就去問面試官和面試官討論，不斷強(qiáng)化自己的實力，路還漫長，今天也要加油鴨！