12 道騰訊前端面試真題及答案整理
年底了，又到了跳槽季啦，該刷題走起了。這里總結了一些被問到可能會懵逼的面試真題，有需要的可以看下～
1. 談談你對 dns-prefetch 的理解
DNS 是什么-- Domain Name System，域名系統(tǒng)，作為域名和IP地址相互映射的一個分布式數(shù)據(jù)庫。
DNS Prefetching
瀏覽器根據(jù)自定義的規(guī)則，提前去解析后面可能用到的域名，來加速網(wǎng)站的訪問速度。簡單來講就是提前解析域名，以免延遲。
使用方式
"dns-prefetch"?href="http://wq.test.com">
這個功能有個默認加載條件，所有的a標簽的href都會自動去啟用DNS Prefetching，也就是說，你網(wǎng)頁的a標簽href帶的域名，是不需要在head里面加上link手動設置的。但a標簽的默認啟動在HTTPS不起作用。
這時要使用 meta里面http-equiv來強制啟動功能。
"x-dns-prefetch-control"?content="on">
總結一下
DNS Prefetching是提前加載域名解析的，省去了解析時間。a標簽的href是可以在chrome。firefox包括高版本的IE，但是在HTTPS下面不起作用，需要meta來強制開啟功能 這是DNS的提前解析，并不是css，js之類的文件緩存，大家不要混淆了兩個不同的概念。 如果直接做了js的重定向，或者在服務端做了重定向，沒有在link里面手動設置，是不起作用的。 這個對于什么樣的網(wǎng)站更有作用呢，類似taobao這種網(wǎng)站，你的網(wǎng)頁引用了大量很多其他域名的資源，如果你的網(wǎng)站，基本所有的資源都在你本域名下，那么這個基本沒有什么作用。因為DNS Chrome在訪問你的網(wǎng)站就幫你緩存了。
拓展知識學習
web下的性能優(yōu)化1(網(wǎng)絡方向)
2. get/post請求傳參長度有什么特點
我們經(jīng)常說get請求參數(shù)的大小存在限制，而post請求的參數(shù)大小是無限制的。這是一個錯誤的說法，實際上HTTP 協(xié)議從未規(guī)定 GET/POST 的請求長度限制是多少。對get請求參數(shù)的限制是來源與瀏覽器或web服務器，瀏覽器或web服務器限制了url的長度。為了明確這個概念，我們必須再次強調(diào)下面幾點:
HTTP 協(xié)議 未規(guī)定 GET 和POST的長度限制 GET的最大長度顯示是因為 瀏覽器和 web服務器限制了 URI的長度 不同的瀏覽器和WEB服務器，限制的最大長度不一樣 要支持IE，則最大長度為2083byte，若只支持Chrome，則最大長度 8182byte
3. 前端需要注意哪些 SEO
合理的 title、description、keywords：搜索對著三項的權重逐個減小，title 值強調(diào)重點即可，重要關鍵詞出現(xiàn)不要超過 2 次，而且要靠前，不同頁面 title 要有所不同；description 把頁面內(nèi)容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面 description 有所不同；keywords 列舉出重要關鍵詞即可 語義化的 HTML 代碼，符合 W3C 規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁 重要內(nèi)容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內(nèi)容一定會被抓取 重要內(nèi)容不要用 js 輸出：爬蟲不會執(zhí)行 js 獲取內(nèi)容 少用 iframe(搜索引擎不會抓取 iframe 中的內(nèi)容) 非裝飾性圖片必須加 alt 提高網(wǎng)站速度(網(wǎng)站速度是搜索引擎排序的一個重要指標)
4. 實現(xiàn)一個頁面操作不會整頁刷新的網(wǎng)站，并且能在瀏覽器前進、后 退時正確響應。給出你的技術實現(xiàn)方案？
第一步，通過使用 pushState + ajax 實現(xiàn)瀏覽器無刷新前進后退，當一次 ajax 調(diào)用成功后我們將一 條 state 記錄加入到 history 對象中。
第二步，一條 state 記錄包含了 url、title 和 content 屬性，在 popstate 事件中可以 獲取到這個 state 對象，我們可 以使用 content 來傳遞數(shù)據(jù)。第三步，我們通過對 window.onpopstate 事件監(jiān)聽來響應瀏覽器 的前進后退操作。
使用 pushState 來實現(xiàn)有兩個問題，一個是打開首頁時沒有記錄，我們可以使用 replaceState 來將首頁的記錄替換，另一個問 題是當一個頁面刷新的時候，仍然會向服務器端請求數(shù)據(jù)，因此如果請求的 url 需要后端的配 合將其重定向到一個頁面。
更多參考：http://blog.chenxu.me/post/detail?id=ed4f0732-897f-48e4-9d4f-821e82f17fad
5. 如何優(yōu)化SPA應用的首屏加載速度慢的問題？
將公用的JS庫通過script標簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源文件，提高下載速度； 在配置 路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調(diào)用某個組件時再加載對應的js文件； root中插入loading 或者 骨架屏 prerender-spa-plugin，提升用戶體驗； 如果在webview中的頁面，可以進行頁面預加載 獨立打包異步組件公共 Bundle，以提高復用性&緩存命中率 靜態(tài)文件本地緩存，有兩種方式分別為HTTP緩存，設置Cache-Control，Last-Modified，Etag等響應頭和Service Worker離線緩存 配合 PWA 使用 SSR root中插入loading 或者 骨架屏 prerender-spa-plugin 使用 Tree Shaking 減少業(yè)務代碼體積 更多參考：https://github.com/LuckyWinty/fe-weekly-questions/issues/69
6. Reflect 對象創(chuàng)建目的？
將 Object 對 象 的 一 些 明 顯 屬 于 語 言 內(nèi) 部 的 方 法 （ 比 如 Object.defineProperty，放到 Reflect 對象上。 修改某些 Object 方法的返回結果，讓其變得更合理。 讓 Object 操作都變成函數(shù)行為。 Reflect 對象的方法與 Proxy 對象的方法一一對應，只要是 Proxy 對象 的方法，就能在 Reflect 對象上找到對應的方法。這就讓 Proxy 對象可 以方便地調(diào)用對應的 Reflect 方法，完成默認行為，作為修改行為的基礎。
也就是說，不管 Proxy 怎么修改默認行為，你總可以在 Reflect 上獲取 默認行為。
7. 內(nèi)部屬性 [[Class]] 是什么？
所有 typeof 返回值為 "object" 的對象（如數(shù)組）都包含一個內(nèi)部屬性 [[Class]]（我 們可以把它看作一個內(nèi)部的分類，而非傳統(tǒng)的面向?qū)ο笠饬x上的類）。這個屬性無法直接訪問， 一般通過 Object.prototype.toString(..) 來查看。例如：
Object.prototype.toString.call(?[1,2,3]?);??//?"[object?Array]"?
Object.prototype.toString.call(?/regex-literal/i?);?//"[object?RegExp]"
多數(shù)情況下，對象的內(nèi)部[[class]]屬性和創(chuàng)建該對象的內(nèi)建原生構造函數(shù)相對應，不過也不總是這樣。2.基本類型值的[[class]]屬性
雖然Null()和Undefined()這樣的原生構造函數(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]
基本類型值被各自的封裝對象自動包裝，所以他們的內(nèi)部[[class]]屬性分別為“String”，“Number”和“Boolean”。3.封裝對象
由于基本類型值沒有.length和.toString()這樣的屬性和方法，需要通過封裝對象才能訪問，此時Javascript引擎會自動為基本類型值包裝一個封裝對象。
//封裝對象包裝
var?b?=?'abc';
console.log(b.length);
console.log(b.toUpperCase());
```js
一般不直接使用封裝對象（即通過new操作創(chuàng)建基本類型值），優(yōu)先考慮使用“abc”和“42”這樣的基本類型值，而不是new String("abc")?和 new Number(42)。4.拆封
如果想要得到封裝對象中的基本類型值，可以使用valueOf()函數(shù)。?
```js
//封裝對象的拆封
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ù)結構中和操作系統(tǒng)內(nèi)存中。在數(shù)據(jù)結構中，棧中數(shù)據(jù)的存取方式為 先進后出。而堆是一個優(yōu)先隊列，是按優(yōu)先級來進行排序的，優(yōu)先級可以按照大小來規(guī)定。完全 二叉樹是堆的一種實現(xiàn)方式。在操作系統(tǒng)中，內(nèi)存被分為棧區(qū)和堆區(qū)。棧區(qū)內(nèi)存由編譯器自動分 配釋放，存放函數(shù)的參數(shù)值，局部變量的值等。其操作方式類似于數(shù)據(jù)結構中的棧。堆區(qū)內(nèi)存一 般由程序員分配釋放，若程序員不釋放，程序結束時可能由垃圾回收機制回收。
詳細資料可以參考：《什么是堆？什么是棧？他們之間有什么區(qū)別和聯(lián)系？》
9. isNaN 和 Number.isNaN 函數(shù)的區(qū)別？
函數(shù) isNaN 接收參數(shù)后，會嘗試將這個參數(shù)轉換為數(shù)值，任何不能被轉換為數(shù)值的的值都會返 回 true，因此非數(shù)字值傳入也會返回 true ，會影響 NaN 的判斷。
函數(shù) Number.isNaN 會首先判斷傳入?yún)?shù)是否為數(shù)字，如果是數(shù)字再繼續(xù)判斷是否為 NaN ，這種方法對于 NaN 的判斷更為準確。
10. 什么情況下會發(fā)生布爾值的隱式強制類型轉換？
（1） if (..) 語句中的條件判斷表達式。（2） for ( .. ; .. ; .. ) 語句中的條件判斷表達式（第二個）。（3） while (..) 和 do..while(..) 循環(huán)中的條件判斷表達式。（4） ? : 中的條件判斷表達式。（5） 邏輯運算符 ||（邏輯或）和 &&（邏輯與）左邊的操作數(shù)（作為條件判斷表達式）。
11. undefined 與 undeclared 的區(qū)別？
已在作用域中聲明但還沒有賦值的變量，是 undefined 的。相反，還沒有在作用域中聲明 過的變量，是 undeclared 的。對于 undeclared 變量的引用，瀏覽器會報引用錯誤，如 ReferenceError: b is not defined 。但是我們可以使用 typeof 的安全防范機制來避免 報錯，因為對于 undeclared（或者 not defined ）變量，typeof 會返回 "undefined"。
12. 如何封裝一個 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
??}
}小獅子有話說
你好，我是 Chocolate，一個獅子座的前端攻城獅，希望成為優(yōu)秀的前端博主，每周都會更新文章，與你一起變優(yōu)秀~
關注 小獅子前端，回復【小獅子】獲取為大家整理好的文章、資源合集我的博客地址： yangchaoyi.vip歡迎收藏，可在博客留言板留下你的足跡，一起交流~覺得文章不錯，【 點贊】【在看】支持一波 ??ヽ(°▽°)ノ?
叮咚~ 可以給小獅子加
星標，便于查找。感謝加入小獅子前端，最好的我們最美的遇見，我們下期再見~
