12 道騰訊前端面試真題及答案整理，實(shí)用！

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

1. 談?wù)勀銓?duì) dns-prefetch 的理解

DNS 是什么-- Domain Name System，域名系統(tǒng)，作為域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)。

DNS Prefetching

瀏覽器根據(jù)自定義的規(guī)則，提前去解析后面可能用到的域名，來(lái)加速網(wǎng)站的訪問(wèn)速度。簡(jiǎn)單來(lái)講就是提前解析域名，以免延遲。

使用方式

<link rel="dns-prefetch" href="http://wq.test.com">

這個(gè)功能有個(gè)默認(rèn)加載條件，所有的a標(biāo)簽的href都會(huì)自動(dòng)去啟用DNS Prefetching，也就是說(shuō)，你網(wǎng)頁(yè)的a標(biāo)簽href帶的域名，是不需要在head里面加上link手動(dòng)設(shè)置的。但a標(biāo)簽的默認(rèn)啟動(dòng)在HTTPS不起作用。

這時(shí)要使用 meta里面http-equiv來(lái)強(qiáng)制啟動(dòng)功能。

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

總結(jié)一下

1. DNS Prefetching是提前加載域名解析的，省去了解析時(shí)間。a標(biāo)簽的href是可以在chrome。firefox包括高版本的IE，但是在HTTPS下面不起作用，需要meta來(lái)強(qiáng)制開(kāi)啟功能
2. 這是DNS的提前解析，并不是css，js之類的文件緩存，大家不要混淆了兩個(gè)不同的概念。
3. 如果直接做了js的重定向，或者在服務(wù)端做了重定向，沒(méi)有在link里面手動(dòng)設(shè)置，是不起作用的。
4. 這個(gè)對(duì)于什么樣的網(wǎng)站更有作用呢，類似taobao這種網(wǎng)站，你的網(wǎng)頁(yè)引用了大量很多其他域名的資源，如果你的網(wǎng)站，基本所有的資源都在你本域名下，那么這個(gè)基本沒(méi)有什么作用。因?yàn)镈NS Chrome在訪問(wèn)你的網(wǎng)站就幫你緩存了。

拓展知識(shí)學(xué)習(xí)

• web下的性能優(yōu)化1(網(wǎng)絡(luò)方向)

2. get/post請(qǐng)求傳參長(zhǎng)度有什么特點(diǎn)

我們經(jīng)常說(shuō)get請(qǐng)求參數(shù)的大小存在限制，而post請(qǐng)求的參數(shù)大小是無(wú)限制的。這是一個(gè)錯(cuò)誤的說(shuō)法，實(shí)際上HTTP 協(xié)議從未規(guī)定 GET/POST 的請(qǐng)求長(zhǎng)度限制是多少。對(duì)get請(qǐng)求參數(shù)的限制是來(lái)源與瀏覽器或web服務(wù)器，瀏覽器或web服務(wù)器限制了url的長(zhǎng)度。為了明確這個(gè)概念，我們必須再次強(qiáng)調(diào)下面幾點(diǎn):

1. HTTP 協(xié)議 未規(guī)定 GET 和POST的長(zhǎng)度限制
2. GET的最大長(zhǎng)度顯示是因?yàn)?瀏覽器和 web服務(wù)器限制了 URI的長(zhǎng)度
3. 不同的瀏覽器和WEB服務(wù)器，限制的最大長(zhǎng)度不一樣
4. 要支持IE，則最大長(zhǎng)度為2083byte，若只支持Chrome，則最大長(zhǎng)度 8182byte

3. 前端需要注意哪些 SEO

1. 合理的 title、description、keywords：搜索對(duì)著三項(xiàng)的權(quán)重逐個(gè)減小，title 值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過(guò) 2 次，而且要靠前，不同頁(yè)面 title 要有所不同；description 把頁(yè)面內(nèi)容高度概括，長(zhǎng)度合適，不可過(guò)分堆砌關(guān)鍵詞，不同頁(yè)面 description 有所不同；keywords 列舉出重要關(guān)鍵詞即可
2. 語(yǔ)義化的 HTML 代碼，符合 W3C 規(guī)范：語(yǔ)義化代碼讓搜索引擎容易理解網(wǎng)頁(yè)
3. 重要內(nèi)容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對(duì)抓取長(zhǎng)度有限制，保證重要內(nèi)容一定會(huì)被抓取
4. 重要內(nèi)容不要用 js 輸出：爬蟲(chóng)不會(huì)執(zhí)行 js 獲取內(nèi)容
5. 少用 iframe(搜索引擎不會(huì)抓取 iframe 中的內(nèi)容)
6. 非裝飾性圖片必須加 alt
7. 提高網(wǎng)站速度(網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo))

4. 實(shí)現(xiàn)一個(gè)頁(yè)面操作不會(huì)整頁(yè)刷新的網(wǎng)站，并且能在瀏覽器前進(jìn)、后 退時(shí)正確響應(yīng)。給出你的技術(shù)實(shí)現(xiàn)方案？

第一步，通過(guò)使用 pushState + ajax 實(shí)現(xiàn)瀏覽器無(wú)刷新前進(jìn)后退，當(dāng)一次 ajax 調(diào)用成功后我們將一 條 state 記錄加入到 history 對(duì)象中。

第二步，一條 state 記錄包含了 url、title 和 content 屬性，在 popstate 事件中可以 獲取到這個(gè) state 對(duì)象，我們可 以使用 content 來(lái)傳遞數(shù)據(jù)。第三步，我們通過(guò)對(duì) window.onpopstate 事件監(jiān)聽(tīng)來(lái)響應(yīng)瀏覽器 的前進(jìn)后退操作。

使用 pushState 來(lái)實(shí)現(xiàn)有兩個(gè)問(wèn)題，一個(gè)是打開(kāi)首頁(yè)時(shí)沒(méi)有記錄，我們可以使用 replaceState 來(lái)將首頁(yè)的記錄替換，另一個(gè)問(wèn) 題是當(dāng)一個(gè)頁(yè)面刷新的時(shí)候，仍然會(huì)向服務(wù)器端請(qǐng)求數(shù)據(jù)，因此如果請(qǐng)求的 url 需要后端的配 合將其重定向到一個(gè)頁(yè)面。

更多參考：http://blog.chenxu.me/post/detail?id=ed4f0732-897f-48e4-9d4f-821e82f17fad

5. 如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問(wèn)題？

• 將公用的JS庫(kù)通過(guò)script標(biāo)簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源文件，提高下載速度；
• 在配置 路由時(shí)，頁(yè)面和組件使用懶加載的方式引入，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用某個(gè)組件時(shí)再加載對(duì)應(yīng)的js文件；
• root中插入loading 或者 骨架屏 prerender-spa-plugin，提升用戶體驗(yàn)；
• 如果在webview中的頁(yè)面，可以進(jìn)行頁(yè)面預(yù)加載
• 獨(dú)立打包異步組件公共 Bundle，以提高復(fù)用性&緩存命中率
• 靜態(tài)文件本地緩存，有兩種方式分別為HTTP緩存，設(shè)置Cache-Control，Last-Modified，Etag等響應(yīng)頭和Service Worker離線緩存
• 配合 PWA 使用
• SSR
• root中插入loading 或者 骨架屏 prerender-spa-plugin
• 使用 Tree Shaking 減少業(yè)務(wù)代碼體積 更多參考：https://github.com/LuckyWinty/fe-weekly-questions/issues/69

6. Reflect 對(duì)象創(chuàng)建目的？

1. 將 Object 對(duì) 象 的 一 些 明 顯 屬 于 語(yǔ) 言 內(nèi) 部 的 方 法 （ 比 如 Object.defineProperty，放到 Reflect 對(duì)象上。
2. 修改某些 Object 方法的返回結(jié)果，讓其變得更合理。
3. 讓 Object 操作都變成函數(shù)行為。
4. Reflect 對(duì)象的方法與 Proxy 對(duì)象的方法一一對(duì)應(yīng)，只要是 Proxy 對(duì)象 的方法，就能在 Reflect 對(duì)象上找到對(duì)應(yīng)的方法。這就讓 Proxy 對(duì)象可 以方便地調(diào)用對(duì)應(yīng)的 Reflect 方法，完成默認(rèn)行為，作為修改行為的基礎(chǔ)。

也就是說(shuō)，不管 Proxy 怎么修改默認(rèn)行為，你總可以在 Reflect 上獲取 默認(rèn)行為。

7. 內(nèi)部屬性 [[Class]] 是什么？

所有 typeof 返回值為 "object" 的對(duì)象（如數(shù)組）都包含一個(gè)內(nèi)部屬性 [[Class]]（我 們可以把它看作一個(gè)內(nèi)部的分類，而非傳統(tǒng)的面向?qū)ο笠饬x上的類）。這個(gè)屬性無(wú)法直接訪問(wèn)， 一般通過(guò) Object.prototype.toString(..) 來(lái)查看。例如：

Object.prototype.toString.call( [1,2,3] );  // "[object Array]" 
Object.prototype.toString.call( /regex-literal/i ); //"[object RegExp]"

多數(shù)情況下，對(duì)象的內(nèi)部[[class]]屬性和創(chuàng)建該對(duì)象的內(nèi)建原生構(gòu)造函數(shù)相對(duì)應(yīng)，不過(guò)也不總是這樣。2.基本類型值的[[class]]屬性

雖然Null()和Undefined()這樣的原生構(gòu)造函數(shù)并不存在，但是內(nèi)部[[class]]屬性仍然是“Null”和“Undefined”。

console.log(Object.prototype.toString.call(null)); //[object Null]

console.log(Object.prototype.toString.call(undefined)); //[object Undefined]

其他基本類型值的情況有所不同：

console.log(Object.prototype.toString.call("abc")); //[object String]

console.log(Object.prototype.toString.call(42));  //[object Number]

console.log(Object.prototype.toString.call(true)); //[object Boolean]

基本類型值被各自的封裝對(duì)象自動(dòng)包裝，所以他們的內(nèi)部[[class]]屬性分別為“String”，“Number”和“Boolean”。3.封裝對(duì)象

由于基本類型值沒(méi)有.length和.toString()這樣的屬性和方法，需要通過(guò)封裝對(duì)象才能訪問(wèn)，此時(shí)Javascript引擎會(huì)自動(dòng)為基本類型值包裝一個(gè)封裝對(duì)象。

//封裝對(duì)象包裝

var b = 'abc';
console.log(b.length);
console.log(b.toUpperCase());
```js
一般不直接使用封裝對(duì)象（即通過(guò)new操作創(chuàng)建基本類型值），優(yōu)先考慮使用“abc”和“42”這樣的基本類型值，而不是new String("abc") 和 new Number(42)。4.拆封

如果想要得到封裝對(duì)象中的基本類型值，可以使用valueOf()函數(shù)。 
```js
//封裝對(duì)象的拆封
var s = new String( "abc" );
var n = new Number( 42 );
var b = new Boolean( true );

console.log(s.valueOf());
console.log(n.valueOf());
console.log(b.valueOf());

8. 什么是堆？什么是棧？它們之間有什么區(qū)別和聯(lián)系？

堆和棧的概念存在于數(shù)據(jù)結(jié)構(gòu)中和操作系統(tǒng)內(nèi)存中。在數(shù)據(jù)結(jié)構(gòu)中，棧中數(shù)據(jù)的存取方式為 先進(jìn)后出。而堆是一個(gè)優(yōu)先隊(duì)列，是按優(yōu)先級(jí)來(lái)進(jìn)行排序的，優(yōu)先級(jí)可以按照大小來(lái)規(guī)定。完全 二叉樹(shù)是堆的一種實(shí)現(xiàn)方式。在操作系統(tǒng)中，內(nèi)存被分為棧區(qū)和堆區(qū)。棧區(qū)內(nèi)存由編譯器自動(dòng)分 配釋放，存放函數(shù)的參數(shù)值，局部變量的值等。其操作方式類似于數(shù)據(jù)結(jié)構(gòu)中的棧。堆區(qū)內(nèi)存一 般由程序員分配釋放，若程序員不釋放，程序結(jié)束時(shí)可能由垃圾回收機(jī)制回收。

詳細(xì)資料可以參考：《什么是堆？什么是棧？他們之間有什么區(qū)別和聯(lián)系？》

9. isNaN 和 Number.isNaN 函數(shù)的區(qū)別？

函數(shù) isNaN 接收參數(shù)后，會(huì)嘗試將這個(gè)參數(shù)轉(zhuǎn)換為數(shù)值，任何不能被轉(zhuǎn)換為數(shù)值的的值都會(huì)返 回 true，因此非數(shù)字值傳入也會(huì)返回 true ，會(huì)影響 NaN 的判斷。

函數(shù) Number.isNaN 會(huì)首先判斷傳入?yún)?shù)是否為數(shù)字，如果是數(shù)字再繼續(xù)判斷是否為 NaN ，這種方法對(duì)于 NaN 的判斷更為準(zhǔn)確。

10. 什么情況下會(huì)發(fā)生布爾值的隱式強(qiáng)制類型轉(zhuǎn)換？

（1） if (..) 語(yǔ)句中的條件判斷表達(dá)式。（2） for ( .. ; .. ; .. ) 語(yǔ)句中的條件判斷表達(dá)式（第二個(gè)）。（3） while (..) 和 do..while(..) 循環(huán)中的條件判斷表達(dá)式。（4） ? : 中的條件判斷表達(dá)式。（5） 邏輯運(yùn)算符 ||（邏輯或）和 &&（邏輯與）左邊的操作數(shù)（作為條件判斷表達(dá)式）。

11. undefined 與 undeclared 的區(qū)別？

已在作用域中聲明但還沒(méi)有賦值的變量，是 undefined 的。相反，還沒(méi)有在作用域中聲明 過(guò)的變量，是 undeclared 的。對(duì)于 undeclared 變量的引用，瀏覽器會(huì)報(bào)引用錯(cuò)誤，如 ReferenceError: b is not defined 。但是我們可以使用 typeof 的安全防范機(jī)制來(lái)避免 報(bào)錯(cuò)，因?yàn)閷?duì)于 undeclared（或者 not defined ）變量，typeof 會(huì)返回 "undefined"。

12. 如何封裝一個(gè) javascript 的類型判斷函數(shù)？

function getType(value) { 
  // 判斷數(shù)據(jù)是 null 的情況 
  if (value === null) { 
      return value + ""; 
  }
  // 判斷數(shù)據(jù)是引用類型的情況 
  if (typeof value === "object") { 
    let valueClass = Object.prototype.toString.call(value), 
    type = valueClass.split(" ")[1].split(""); 
    type.pop(); 
    return type.join("").toLowerCase();
  } else { 
    // 判斷數(shù)據(jù)是基本數(shù)據(jù)類型的情況和函數(shù)的情況 
    return typeof value
  }
}