年底了，又到了跳槽季啦，該刷題走起了。這里總結(jié)了一些被問(wèn)到可能會(huì)懵逼的面試真題，有需要的可以看下～

1. 說(shuō)說(shuō)JavaScript中有哪些異步編程方式?

1. 回調(diào)函數(shù)

f1(f2);

回調(diào)函數(shù)是異步編程的基本方法。其優(yōu)點(diǎn)是易編寫、易理解和易部署；缺點(diǎn)是不利于代碼的閱讀和維護(hù)，各個(gè)部分之間高度耦合 （Coupling），流程比較混亂，而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)。

2. 事件監(jiān)聽

f1.on('done',f2);

事件監(jiān)聽即采用事件驅(qū)動(dòng)模式，任務(wù)的執(zhí)行不取決于代碼的順序，而取決于某個(gè)事件是否發(fā)生。其優(yōu)點(diǎn)是易理解，可以綁定多個(gè)事件，每個(gè)事件可以指定多個(gè)回調(diào)函數(shù)，可以去耦合， 有利于實(shí)現(xiàn)模塊化；缺點(diǎn)是整個(gè)程序都要變成事件驅(qū)動(dòng)型，運(yùn)行流程會(huì)變得不清晰。

3. 發(fā)布/訂閱

f1: jQuery.publish("done");
f2: jQuery.subscribe("done", f2);

假定存在一個(gè)"信號(hào)中心"，某個(gè)任務(wù)執(zhí)行完成，就向信號(hào)中心"發(fā)布"（publish）一個(gè)信號(hào)，其他任務(wù)可以向信號(hào)中心"訂閱"（subscribe）這個(gè)信號(hào)，從而知道什么時(shí)候自己可以開始執(zhí)行，這就叫做 "發(fā)布/訂閱模式" （publish-subscribe pattern），又稱 "觀察者模式" （observer pattern）。該 方法的性質(zhì)與"事件監(jiān)聽"類似，但其優(yōu)勢(shì)在于可以 通過(guò)查看"消息中心"，了解存在多少信號(hào)、每個(gè)信號(hào)有多少訂閱者，從而監(jiān)控程序的運(yùn)行。

4. promise對(duì)象

f1().then(f2);

Promises對(duì)象是CommonJS工作組提出的一種規(guī)范，目的是為異步編程提供 統(tǒng)一接口 ；思想是， 每一個(gè)異步任務(wù)返回一個(gè)Promise對(duì)象，該對(duì)象有一個(gè)then方法，允許指定回調(diào)函數(shù)。其優(yōu)點(diǎn)是回調(diào)函數(shù)是鏈?zhǔn)綄懛ǎ绦虻牧鞒谭浅Ｇ逦?，而且有一整套的配套方法?可以實(shí)現(xiàn)許多強(qiáng)大的功能，如指定多個(gè)回調(diào)函數(shù)、指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)， 如果一個(gè)任務(wù)已經(jīng)完成，再添加回調(diào)函數(shù)，該回調(diào)函數(shù)會(huì)立即執(zhí)行，所以不用擔(dān)心是否錯(cuò)過(guò)了某個(gè)事件或信號(hào)；缺點(diǎn)就是編寫和理解相對(duì)比較難。

2. 有哪些監(jiān)控網(wǎng)頁(yè)卡頓的方法？

卡頓
網(wǎng)頁(yè)的 FPS

網(wǎng)頁(yè)內(nèi)容在不斷變化之中，網(wǎng)頁(yè)的 FPS 是只瀏覽器在渲染這些變化時(shí)的幀率。幀率越高，用戶感覺(jué)網(wǎng)頁(yè)越流暢，反之則會(huì)感覺(jué)卡頓。

監(jiān)控卡頓方法

每秒中計(jì)算一次網(wǎng)頁(yè)的 FPS 值，獲得一列數(shù)據(jù)，然后分析。通俗地解釋就是，通過(guò) requestAnimationFrame API 來(lái)定時(shí)執(zhí)行一些 JS 代碼，如果瀏覽器卡頓，無(wú)法很好地保證渲染的頻率，1s 中 frame 無(wú)法達(dá)到 60 幀，即可間接地反映瀏覽器的渲染幀率。

var lastTime = performance.now();
var frame = 0;
var lastFameTime = performance.now();
var loop = function(time) {
    var now =  performance.now();
    var fs = (now - lastFameTime);
    lastFameTime = now;
    var fps = Math.round(1000/fs);
    frame++;
    if (now > 1000 + lastTime) {
        var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) );
        frame = 0;    
        lastTime = now;    
    };           
    window.requestAnimationFrame(loop);   
}

我們可以定義一些邊界值，比如連續(xù)出現(xiàn)3個(gè)低于20的 FPS 即可認(rèn)為網(wǎng)頁(yè)存在卡頓。

3. 說(shuō)說(shuō)script 標(biāo)簽中的defer 和 async 異同點(diǎn)？

defer
這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后再運(yùn)行。因此，在script元素中設(shè)置defer屬性，相當(dāng)于告訴瀏覽器立即下載，但延遲執(zhí)行。

HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個(gè)延遲腳本會(huì)先于第二個(gè)延遲腳本執(zhí)行，而這兩個(gè)腳本會(huì)先于DOMContentLoaded事件執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行，也不一定會(huì)在DOMContentLoad時(shí)間觸發(fā)前執(zhí)行，因此最好只包含一個(gè)延遲腳本。

對(duì)于不支持的瀏覽器，如safari，并不會(huì)延遲執(zhí)行，還是會(huì)阻塞瀏覽器渲染。

async
這個(gè)屬性與defer類似，都用于改變處理腳本的行為。同樣與defer類似，async只適用于外部腳本文件，并告訴瀏覽器立即下載文件。但與defer不同的是，標(biāo)記為async的腳本并不保證按照它們的先后順序執(zhí)行。

第二個(gè)腳本文件可能會(huì)在第一個(gè)腳本文件之前執(zhí)行。因此確保兩者之間互不依賴非常重要。指定async屬性的目的是不讓頁(yè)面等待兩個(gè)腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。

總結(jié)
async 和 defer 雖然都是異步的，不過(guò)還有一些差異，使用 async 標(biāo)志的腳本文件一旦加載完成，會(huì)立即執(zhí)行；而使用了 defer 標(biāo)記的腳本文件，需要在 DOMContentLoaded 事件之前執(zhí)行。

可以再擴(kuò)展一下：link preload也可以用于js提前加載，和上述兩者的區(qū)別？ 還有應(yīng)用場(chǎng)景上的建議

4. margin:auto 為什么可以實(shí)現(xiàn)垂直居中？

margin概念：

margin屬性為給定元素設(shè)置所有四個(gè)（上下左右）方向的外邊距屬性。這是四個(gè)外邊距屬性設(shè)置的簡(jiǎn)寫。四個(gè)外邊距屬性設(shè)置分別是： margin-top，margin-right，margin-bottom和margin-left。指定的外邊距允許為負(fù)數(shù)。

margin的top和bottom屬性對(duì)非替換內(nèi)聯(lián)元素?zé)o效，例如span和 code。

實(shí)現(xiàn)垂直居中

想要實(shí)現(xiàn)垂直方向的居中可以用絕對(duì)定位：

div  {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
     }

為什么能實(shí)現(xiàn)垂直居中

塊狀水平元素，如div元素（下同），在默認(rèn)情況下（非浮動(dòng)、絕對(duì)定位等），水平方向會(huì)自動(dòng)填滿外部的容器；如果有margin-left/margin-right,padding-left/padding-right,border-left-width/border-right-width等，實(shí)際內(nèi)容區(qū)域會(huì)響應(yīng)變窄。

但是，當(dāng)一個(gè)絕對(duì)定位元素，其對(duì)立定位方向?qū)傩酝瑫r(shí)有具體定位數(shù)值的時(shí)候，流體特性就發(fā)生了。具有流體特性絕對(duì)定位元素的margin:auto的填充規(guī)則和普通流體元素一模一樣，含有以下特性：

• 如果一側(cè)定值，一側(cè)auto，auto為剩余空間大小；
• 如果兩側(cè)均是auto, 則平分剩余空間

5. Cdn有哪些優(yōu)化靜態(tài)資源加載速度的方法？

可以參考阿里云團(tuán)隊(duì)的《CDN之我見(jiàn)》?？偨Y(jié)如下：

資源調(diào)度：CDN會(huì)根據(jù)用戶接入網(wǎng)絡(luò)的ip尋找距離用戶最優(yōu)路徑的服務(wù)器。調(diào)度的方式主要有DNS調(diào)度、http 302調(diào)度、使用 HTTP 進(jìn)行的 DNS 調(diào)度（多用于移動(dòng)端）； 緩存策略和數(shù)據(jù)檢索：CDN服務(wù)器使用高效的算法和數(shù)據(jù)結(jié)構(gòu)，快速的檢索資源和更新讀取緩存； 網(wǎng)絡(luò)優(yōu)化：從OSI七層模型進(jìn)行優(yōu)化，達(dá)到網(wǎng)絡(luò)優(yōu)化的目的。 L1物理層：硬件設(shè)備升級(jí)提高速度 L2數(shù)據(jù)鏈路層：尋找更快的網(wǎng)絡(luò)節(jié)點(diǎn)、確保 Lastmile 盡量短 L3路由層：路徑優(yōu)化，尋找兩點(diǎn)間最優(yōu)路徑 L4傳輸層：協(xié)議TCP優(yōu)化，保持長(zhǎng)連接、TCP快速打開 L7應(yīng)用層：靜態(tài)資源壓縮、請(qǐng)求合并

6. fetch 和 ajax 的區(qū)別？

Ajax 技術(shù)的核心是XMLHttpRequest 對(duì)象（簡(jiǎn)稱XHR）。 XHR 為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口。能夠以異步方式從服務(wù)器取得更多信息，意味著用戶單擊后，可以不必刷新頁(yè)面也能取得新數(shù)據(jù)。 看一個(gè)調(diào)用例子：

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
          alert(xhr.responseText);
          } else {
          alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

fetch號(hào)稱是ajax的替代品，它的API是基于Promise設(shè)計(jì)的，舊版本的瀏覽器不支持Promise，需要使用polyfill es6-promise,舉個(gè)例子：

// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)   // 從服務(wù)器獲取數(shù)據(jù)
    }
}
xhr.send()
// fetch
fetch(url)
    .then(response => {
        if (response.ok) {
            return response.json();
        }
    })
    .then(data => console.log(data))
    .catch(err => console.log(err))

看起來(lái)好像是方便點(diǎn)，then鏈就像之前熟悉的callback。 在MDN上，講到它跟jquery ajax的區(qū)別，這也是fetch很奇怪的地方：

當(dāng)接收到一個(gè)代表錯(cuò)誤的 HTTP 狀態(tài)碼時(shí)，從 fetch()返回的 Promise 不會(huì)被標(biāo)記為 reject， 即使該 HTTP 響應(yīng)的狀態(tài)碼是 404 或 500。相反，它會(huì)將 Promise 狀態(tài)標(biāo)記為 resolve （但是會(huì)將 resolve 的返回值的 ok 屬性設(shè)置為 false ）， 僅當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí)，才會(huì)標(biāo)記為 reject。 默認(rèn)情況下, fetch 不會(huì)從服務(wù)端發(fā)送或接收任何 cookies, 如果站點(diǎn)依賴于用戶 session，則會(huì)導(dǎo)致未經(jīng)認(rèn)證的請(qǐng)求（要發(fā)送 cookies，必須設(shè)置 credentials 選項(xiàng)）.

7. 求代碼輸出值(函數(shù)/原型 指向問(wèn)題)？

2

函數(shù)也是一個(gè) object, 可以擁有屬性和方法, Foo.getName 被賦值為一個(gè)輸出 2 的函數(shù), 所以輸出 2

Foo.getName = function () { console.log(2) }
Foo.getName() // 輸出 2

4
getName() 父級(jí)作用域?yàn)?window, 相當(dāng)于調(diào)用 window.getName(), Foo() 還未被執(zhí)行, 不需要考慮 Foo 函數(shù)體內(nèi)對(duì) getName 的影響, 剩下最后兩個(gè)

var getName = function () { console.log(4) } // 函數(shù)表達(dá)式
function getName() { // 函數(shù)聲明
  console.log(5)
}

函數(shù)聲明會(huì)提升, 也就是即使在后邊聲明的函數(shù), 在前別也能調(diào)用, 如:

getName() // 輸出 5
function getName() { // 函數(shù)聲明
  console.log(5)
}

但題中函數(shù)表達(dá)式會(huì)覆蓋函數(shù)聲明, 來(lái)看下邊這段:

getName() // 輸出 5, 函數(shù)聲明提升的結(jié)果
var getName = function () { console.log(4) } // 函數(shù)表達(dá)式
getName() // 輸出 4, 函數(shù)聲明提升后, 又被函數(shù)表達(dá)式覆蓋了
function getName() { // 函數(shù)聲明
  console.log(5)
}
getName() // 還是輸出 4, 覆蓋的結(jié)果, 函數(shù)聲明提升了, 不按照文本的順序重新聲明的, 你可以想象它被移到了最前邊

1

Foo().getName()

我們一步步拆解, 上邊的語(yǔ)句相當(dāng)于

var context = Foo();
context.getName();

來(lái)看 Foo 的聲明:

function Foo() {
  // 下邊這句沒(méi)有 var, let 或 const, 相當(dāng)于 window.getName = xxx
  getName = function () { console.log(1) }
  return this // 這里的 this 要看調(diào)用方式, 直接調(diào)用 Foo() 則 this 指向 window, new 調(diào)用, this 指向 new 出來(lái)的實(shí)例
}

仔細(xì)看上邊的注釋, Foo 函數(shù)體內(nèi)對(duì) window.getName 進(jìn)行了改寫, 這是下一個(gè)輸出的關(guān)鍵

1
如上邊分析的, Foo() 函數(shù)的執(zhí)行, 對(duì) window.getName 進(jìn)行了改寫, window.getName 此時(shí)已經(jīng)變?yōu)?function () { console.log(1) }

2

new Foo.getName()

該語(yǔ)句先執(zhí)行 Foo.getName, 與第一個(gè)結(jié)論一致, 輸出 2, 只是 new 會(huì)返回一個(gè) object, 這個(gè) object 指向 new 出來(lái)的實(shí)例, 但這里這個(gè)實(shí)例沒(méi)被使用, 就不進(jìn)一步分析了

3

new Foo().getName()

拆解如下

var foo = new Foo()
foo.getName()

如果你是一路看分析下來(lái)的, 就會(huì)明白 foo 這個(gè)實(shí)例, 就是 Foo 函數(shù)體里的 this. 從原型的知識(shí)中, 我們可以知道, 如果調(diào)用一個(gè)實(shí)例的方法, 在實(shí)例方法中找不到, 就會(huì)從實(shí)例原型中找.

也就是會(huì)找到下邊這個(gè)方法, 并執(zhí)行:

Foo.prototype.getName = function() { console.log(3) }

3

new new Foo().getName()

拆解如下

var foo = new Foo();
var bar = new foo.getName();

從上邊 new Foo().getName() 的分析, 可以知道 foo.getName() 是在 foo 的原型里邊的, 這里 new 了一下原型里邊的函數(shù), 相當(dāng)于先執(zhí)行了, 再返回了一個(gè)新的實(shí)例. 這里的執(zhí)行, 也就是執(zhí)行了下邊這個(gè)方法:

Foo.prototype.getName = function() { console.log(3) }

只是 new 額外返回一個(gè)實(shí)例, 實(shí)例沒(méi)被使用, 沒(méi)什么特殊的.

如果還有不明白的地方, 建議閱讀 《JavaScript 語(yǔ)言精髓》第四章 (本人看的是修訂版) 關(guān)于函數(shù)調(diào)用相關(guān)的內(nèi)容. 相關(guān)電子書可以微信關(guān)注公眾號(hào) 前端Q, 回復(fù) ebook 閱讀. 此外, 建議購(gòu)買正版.

8. 如何判斷左右小括號(hào)是否全部匹配。如 ( ( ))()((((()))))？

/**
 * @param {string} s
 * @return {boolean}
 */
var isValid = function(s) {
    var stack = []
    var map = { 
        '(' : ')',
        '[': ']',
        '{': '}'
    }
    
    for (var char of s) {
        if(char in map) {
            stack.push(char)
        } else {
            if( !stack.length || char != map[stack.pop()]) {
                return false
            }
        }
    }
    
    // 如果最后stack 里沒(méi)有元素了， 就一定是匹配的
    return !stack.length
};

9. 用css畫一個(gè)扇形？

width: 0;
height: 0;
border: solid 100px red;
border-color: red transparent transparent transparent;
border-radius: 100px;

10. 用css實(shí)現(xiàn)已知或者未知寬度的垂直水平居中？

/
/ 1
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}


// 2
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}


// 3
.wraper {
.box {
display: flex;
justify-content:center;
align-items: center;
height: 100px;
}
}


// 4
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}
//5
.container {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 200px;
background: #eee;
}
.parent {
background: grey;
justify-self: center;
align-self: center;
}
.child {
font-size: 30px;
}
//6、塊級(jí)元素：calc()
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.child {
width: 100px;
height: 100px;
background: blue;
padding: -webkit-calc((100% - 100px) / 2);
padding: -moz-calc((100% - 100px) / 2);
padding: -ms-calc((100% - 100px) / 2);
padding: calc((100% - 100px) / 2);
background-clip: content-box;
}
//7、margin:auto實(shí)現(xiàn)絕對(duì)定位元素的居中
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了這個(gè)就自動(dòng)居中了 */
}
//8、
.parent{
display: flex;
}
.parent{
display: flex;
width: 500px;
height: 500px;
background-color: pink;
}
.child{
flex: 0 0 auto;
margin: auto;
width: 100px;
height: 100px;
background-color: red;

11. 如何理解回流和重繪？ ？

回流：當(dāng)我們對(duì) DOM 的修改引發(fā)了 DOM 幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時(shí)，瀏覽器需要重新計(jì)算元素的幾何屬性（其他元素的幾何屬性和位置也會(huì)因此受到影響），然后再將計(jì)算的結(jié)果繪制出來(lái)。這個(gè)過(guò)程就是回流（也叫重排）。

重繪：當(dāng)我們對(duì) DOM 的修改導(dǎo)致了樣式的變化、卻并未影響其幾何屬性（比如修改了顏色或背景色）時(shí)，瀏覽器不需重新計(jì)算元素的幾何屬性、直接為該元素繪制新的樣式（跳過(guò)了上圖所示的回流環(huán)節(jié)）。這個(gè)過(guò)程叫做重繪。 由此我們可以看出，重繪不一定導(dǎo)致回流，回流一定會(huì)導(dǎo)致重繪。

常見(jiàn)的會(huì)導(dǎo)致回流的元素：

• 常見(jiàn)的幾何屬性有 width、height、padding、margin、left、top、border 等等。
• 最容易被忽略的操作：獲取一些需要通過(guò)即時(shí)計(jì)算得到的屬性,當(dāng)你要用到像這樣的屬性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 時(shí)，瀏覽器為了獲取這些值，也會(huì)進(jìn)行回流。
• 當(dāng)我們調(diào)用了 getComputedStyle 方法，或者 IE 里的 currentStyle 時(shí)，也會(huì)觸發(fā)回流。原理是一樣的，都為求一個(gè)“即時(shí)性”和“準(zhǔn)確性”。

避免方式：

1. 避免逐條改變樣式，使用類名去合并樣式
2. 將 DOM “離線”,使用DocumentFragment
3. 提升為合成層,如使用will-change

#divId {
  will-change: transform;
}

優(yōu)點(diǎn)

• 合成層的位圖，會(huì)交由 GPU 合成，比 CPU 處理要快
• 當(dāng)需要 repaint 時(shí)，只需要 repaint 本身，不會(huì)影響到其他的層
• 對(duì)于 transform 和 opacity 效果，不會(huì)觸發(fā) layout 和 paint

注意：

部分瀏覽器緩存了一個(gè) flush 隊(duì)列，把我們觸發(fā)的回流與重繪任務(wù)都塞進(jìn)去，待到隊(duì)列里的任務(wù)多起來(lái)、或者達(dá)到了一定的時(shí)間間隔，或者“不得已”的時(shí)候，再將這些任務(wù)一口氣出隊(duì)。但是當(dāng)我們?cè)L問(wèn)一些即使屬性時(shí)，瀏覽器會(huì)為了獲得此時(shí)此刻的、最準(zhǔn)確的屬性值，而提前將 flush 隊(duì)列的任務(wù)出隊(duì)。

12. 手寫一個(gè)Promise？
答案太長(zhǎng)，你可以參考這個(gè)issues:https://github.com/LuckyWinty/fe-weekly-questions/issues/20

13. 談?wù)剋eb安全問(wèn)題及解決方案
答案太長(zhǎng)，你可以參考這個(gè)issues:https://github.com/LuckyWinty/fe-weekly-questions/issues/1

14. HTTPS和HTTP有什么區(qū)別？
答案太長(zhǎng)，你可以參考這個(gè)issues:https://github.com/LuckyWinty/fe-weekly-questions/issues/2

15. Webpack性能優(yōu)化你知道哪些？
答案太長(zhǎng)，你可以參考這個(gè)issues:https://github.com/LuckyWinty/fe-weekly-questions/issues/4

更多

本期匯總暫時(shí)到這里，更多題目，可以關(guān)注： https://github.com/LuckyWinty/fe-weekly-questions

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論