這篇文章主要講解了“有哪些前端面試真題”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“有哪些前端面試真題”吧！

臨淄ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

1. 談?wù)勀銓?DNS-prefetch 的理解

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

DNS Prefetching

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

使用方式

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

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

總結(jié)一下

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  DNS Prefetching是提前加載域名解析的，省去了解析時間。a標簽的href是可以在chrome。firefox包括高版本的IE，但是在HTTPS下面不起作用，需要meta來強制開啟功能

3.  這是DNS的提前解析，并不是css，js之類的文件緩存，大家不要混淆了兩個不同的概念。

4.  如果直接做了js的重定向，或者在服務(wù)端做了重定向，沒有在link里面手動設(shè)置，是不起作用的。

5.  這個對于什么樣的網(wǎng)站更有作用呢，類似taobao這種網(wǎng)站，你的網(wǎng)頁引用了大量很多其他域名的資源，如果你的網(wǎng)站，基本所有的資源都在你本域名下，那么這個基本沒有什么作用。因為DNS Chrome在訪問你的網(wǎng)站就幫你緩存了。

拓展知識學習

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

2. get/post請求傳參長度有什么特點

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

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  HTTP 協(xié)議 未規(guī)定 GET 和POST的長度限制

3.  GET的最大長度顯示是因為 瀏覽器和 web服務(wù)器限制了 URI的長度

4.  不同的瀏覽器和WEB服務(wù)器，限制的最大長度不一樣

5.  要支持IE，則最大長度為2083byte，若只支持Chrome，則最大長度 8182byte

3. 前端需要注意哪些 SEO

  1.  合理的 title、description、keywords：搜索對著三項的權(quán)重逐個減小，title 值強調(diào)重點即可，重要關(guān)鍵詞出現(xiàn)不要超過 2 次，而且要靠前，不同頁面 title 要有所不同；description 把頁面內(nèi)容高度概括，長度合適，不可過分堆砌關(guān)鍵詞，不同頁面 description 有所不同；keywords 列舉出重要關(guān)鍵詞即可

  2.  語義化的 HTML 代碼，符合 W3C 規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁

  3.  重要內(nèi)容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內(nèi)容一定會被抓取

  4.  重要內(nèi)容不要用 js 輸出：爬蟲不會執(zhí)行 js 獲取內(nèi)容

  5.  少用 iframe(搜索引擎不會抓取 iframe 中的內(nèi)容)

  6.  非裝飾性圖片必須加 alt

  7.  提高網(wǎng)站速度(網(wǎng)站速度是搜索引擎排序的一個重要指標)

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

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

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

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

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

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

•  將公用的JS庫通過script標簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源文件，提高下載速度；

•  在配置 路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調(diào)用某個組件時再加載對應(yīng)的js文件；

•  root中插入loading 或者 骨架屏 prerender-spa-plugin，提升用戶體驗；

•  如果在webview中的頁面，可以進行頁面預(yù)加載

•  獨立打包異步組件公共 Bundle，以提高復用性&緩存命中率

•  靜態(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 對象創(chuàng)建目的？

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  將 Object 對 象 的 一 些 明 顯 屬 于 語 言 內(nèi) 部 的 方 法 （ 比 如 Object.defineProperty，放到 Reflect 對象上。

3.  修改某些 Object 方法的返回結(jié)果，讓其變得更合理。

4.  讓 Object 操作都變成函數(shù)行為。

5.  Reflect 對象的方法與 Proxy 對象的方法一一對應(yīng)，只要是 Proxy 對象 的方法，就能在 Reflect 對象上找到對應(yīng)的方法。這就讓 Proxy 對象可 以方便地調(diào)用對應(yīng)的 Reflect 方法，完成默認行為，作為修改行為的基礎(chǔ)。

也就是說，不管 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ù)相對應(yīng)，不過也不總是這樣。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';  cons  一般不直ole.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ù)結(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    }  }

感謝各位的閱讀，以上就是“有哪些前端面試真題”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對有哪些前端面試真題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！