作者：前端Q 公號 / winty（本文來自作者投稿）

1. 談談你對 dns-prefetch 的理解
   DNS 是什么-- Domain Name System悔详，域名系統(tǒng)凤覆，作為域名和IP地址相互映射的一個分布式數(shù)據(jù)庫晰韵。

DNS Prefetching

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

使用方式

<link rel="dns-prefetch" >
這個功能有個默認加載條件只恨，所有的a標簽的href都會自動去啟用DNS Prefetching译仗，也就是說抬虽，你網(wǎng)頁的a標簽href帶的域名，是不需要在head里面加上link手動設置的纵菌。但a標簽的默認啟動在HTTPS不起作用阐污。

這時要使用 meta里面http-equiv來強制啟動功能。

<meta http-equiv="x-dns-prefetch-control" content="on">
總結(jié)一下

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：搜索對著三項的權(quán)重逐個減小蚪腐，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 方法的返回結(jié)果，讓其變得更合理惠爽。
   讓 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)建原生構(gòu)造函數(shù)相對應谴麦，不過也不總是這樣伸头。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]
基本類型值被各自的封裝對象自動包裝雪侥，所以他們的內(nèi)部[[class]]屬性分別為“String”精绎，“Number”和“Boolean”锌妻。3.封裝對象

由于基本類型值沒有.length和.toString()這樣的屬性和方法，需要通過封裝對象才能訪問仿粹，此時Javascript引擎會自動為基本類型值包裝一個封裝對象。

//封裝對象包裝

var b = 'abc';
console.log(b.length);
console.log(b.toUpperCase());

一般不直接使用封裝對象（即通過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ù)結(jié)構(gòu)中和操作系統(tǒng)內(nèi)存中遣总。在數(shù)據(jù)結(jié)構(gòu)中，棧中數(shù)據(jù)的存取方式為 先進后出旭斥。而堆是一個優(yōu)先隊列，是按優(yōu)先級來進行排序的董饰，優(yōu)先級可以按照大小來規(guī)定。完全 二叉樹是堆的一種實現(xiàn)方式卒暂。在操作系統(tǒng)中，內(nèi)存被分為棧區(qū)和堆區(qū)娄帖。棧區(qū)內(nèi)存由編譯器自動分 配釋放，存放函數(shù)的參數(shù)值近速，局部變量的值等堪旧。其操作方式類似于數(shù)據(jù)結(jié)構(gòu)中的棧奖亚。堆區(qū)內(nèi)存一 般由程序員分配釋放，若程序員不釋放昔字，程序結(jié)束時可能由垃圾回收機制回收。

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

9. isNaN 和 Number.isNaN 函數(shù)的區(qū)別？
函數(shù) isNaN 接收參數(shù)后咏尝，會嘗試將這個參數(shù)轉(zhuǎn)換為數(shù)值，任何不能被轉(zhuǎn)換為數(shù)值的的值都會返 回 true状土，因此非數(shù)字值傳入也會返回 true ，會影響 NaN 的判斷蒙谓。

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

10. 什么情況下會發(fā)生布爾值的隱式強制類型轉(zhuǎn)換谤专？
（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
  }
}