有哪些前端面試真題

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

1. 談談你對 dns-prefetch 的理解

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

DNS Prefetching

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

使用方式

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

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

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

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

總結一下

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

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

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

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

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

拓展知識學習

•  web下的性能優化1(網絡方向)

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

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

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2.  HTTP 協議 未規定 GET 和POST的長度限制

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

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

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

3. 前端需要注意哪些 SEO

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

  2.  語義化的 HTML 代碼，符合 W3C 規范：語義化代碼讓搜索引擎容易理解網頁

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

  4.  重要內容不要用 js 輸出：爬蟲不會執行 js 獲取內容

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

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

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

4. 實現一個頁面操作不會整頁刷新的網站，并且能在瀏覽器前進、后 退時正確響應。給出你的技術實現方案？

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

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

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

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

5. 如何優化SPA應用的首屏加載速度慢的問題？

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

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

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

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

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

•  靜態文件本地緩存，有兩種方式分別為HTTP緩存，設置Cache-Control，Last-Modified，Etag等響應頭和Service Worker離線緩存

•  配合 PWA 使用

•  SSR

•  root中插入loading 或者 骨架屏 prerender-spa-plugin

•  使用 Tree Shaking 減少業務代碼體積 更多參考：https://github.com/LuckyWinty/fe-weekly-questions/issues/69

6. Reflect 對象創建目的？

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

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

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

4.  讓 Object 操作都變成函數行為。

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

也就是說，不管 Proxy 怎么修改默認行為，你總可以在 Reflect 上獲取 默認行為。

7. 內部屬性 [[Class]] 是什么？

所有 typeof 返回值為 "object" 的對象（如數組）都包含一個內部屬性 [[Class]]（我 們可以把它看作一個內部的分類，而非傳統的面向對象意義上的類）。這個屬性無法直接訪問， 一般通過 Object.prototype.toString(..) 來查看。例如：

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

多數情況下，對象的內部[[class]]屬性和創建該對象的內建原生構造函數相對應，不過也不總是這樣。2.基本類型值的[[class]]屬性

雖然Null()和Undefined()這樣的原生構造函數并不存在，但是內部[[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]

基本類型值被各自的封裝對象自動包裝，所以他們的內部[[class]]屬性分別為“String”，“Number”和“Boolean”。3.封裝對象

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

//封裝對象包裝  var b = 'abc';  cons  一般不直ole.log(b.length);  console.log(b.toUpperCase());  ```js接使用封裝對象（即通過new操作創建基本類型值），優先考慮使用“abc”和“42”這樣的基本類型值，而不是new String("abc") 和 new Number(42)。4.拆封  如果想要得到封裝對象中的基本類型值，可以使用valueOf()函數。   ```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. 什么是堆？什么是棧？它們之間有什么區別和聯系？

堆和棧的概念存在于數據結構中和操作系統內存中。在數據結構中，棧中數據的存取方式為 先進后出。而堆是一個優先隊列，是按優先級來進行排序的，優先級可以按照大小來規定。完全 二叉樹是堆的一種實現方式。在操作系統中，內存被分為棧區和堆區。棧區內存由編譯器自動分 配釋放，存放函數的參數值，局部變量的值等。其操作方式類似于數據結構中的棧。堆區內存一 般由程序員分配釋放，若程序員不釋放，程序結束時可能由垃圾回收機制回收。

詳細資料可以參考：《什么是堆？什么是棧？他們之間有什么區別和聯系？》

9. isNaN 和 Number.isNaN 函數的區別？

函數 isNaN 接收參數后，會嘗試將這個參數轉換為數值，任何不能被轉換為數值的的值都會返 回 true，因此非數字值傳入也會返回 true ，會影響 NaN 的判斷。

函數 Number.isNaN 會首先判斷傳入參數是否為數字，如果是數字再繼續判斷是否為 NaN ，這種方法對于 NaN 的判斷更為準確。

10. 什么情況下會發生布爾值的隱式強制類型轉換？

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

11. undefined 與 undeclared 的區別？

已在作用域中聲明但還沒有賦值的變量，是 undefined 的。相反，還沒有在作用域中聲明 過的變量，是 undeclared 的。對于 undeclared 變量的引用，瀏覽器會報引用錯誤，如 ReferenceError: b is not defined 。但是我們可以使用 typeof 的安全防范機制來避免 報錯，因為對于 undeclared（或者 not defined ）變量，typeof 會返回 "undefined"。

12. 如何封裝一個 javascript 的類型判斷函數？

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

感謝各位的閱讀，以上就是“有哪些前端面試真題”的內容了，經過本文的學習后，相信大家對有哪些前端面試真題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！