常見的前端21道面試題及答案

這篇文章運用簡單易懂的例子給大家介紹常見的前端21道面試題及答案，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

1.如何用原生js給一個按鈕綁定兩個onclick事件

q：btn.addEventListener("click",hello);

2.document.write和innerHTML的區別；

q：document.write是直接寫入到頁面的內容流，會導致頁面被重寫。innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪

3.ajax的步驟；

q：(1) 創建XMLHttpRequest對象,也就是創建一個異步調用對象. 
      (2) 創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息. 
      (3)設置響應HTTP請求狀態變化的函數. 
      (4)發送HTTP請求. 
      (5)獲取異步調用返回的數據. 
      (6)使用JavaScript和DOM實現局部刷新.

4.xml和json的區別；

q：json數據體積小，傳遞速度快，JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互，XML對數據描述性比較好；

5.清楚浮動的方法；（常見）

q：(1).父級div定義 height ;(如果高度和父級div不一樣時，會產生問題)
      (2).結尾處加空div標簽 clear:both;
      (2).父級div定義 偽類:after 和 zoom;(IE8以上和非IE瀏覽器才支持:after)
      (2).父級div定義 overflow:hidden;(不能和position配合使用)

6.box-sizing常用的屬性;

q：· box-sizing：content-box；(默認屬性值，W3C)
      · box-sizing：border-box;(IE盒模型)
      · box-sizing：inherit;
(box-sizing屬性在FireFox中存在兼容問題，所以需要使用-moz-box-sizing做一下兼容)

7.undefined 和 null 區別；

q：null： Null類型，代表“空值”代表一個空對象指針，使用typeof運算得到 “object”
     undefined： Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined。(null 和 undefined 都表
     示“值的空缺”，你可以認為undefined是表示系統級的、出乎意料的或類似錯誤的值的空缺，而null是表示程序級的、正常
     的或在意料之中的值的空缺。)

8.常見的HTTP狀態碼；

q：2開頭 （請求成功）、3開頭 （請求被重定向）、4開頭 （請求錯誤）、5開頭（服務器錯誤）

9.網站性能優化；

q：1. JavaScript 壓縮和模塊打包
      2. 按需加載資源
      3. 緩存
      4. 使用索引加速數據庫查詢
      5. 使用更快的轉譯方案
      6. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
      7. 圖片編碼優化

10.JS哪些操作會造成內存泄露；

q：1）意外的全局變量引起的內存泄露；
      2）閉包引起的內存泄露；
      3）沒有清理的DOM元素引用；
      4）被遺忘的定時器或者回調；
      5）子元素存在引起的內存泄露；

11.什么是閉包，如何使用它，為什么要使用它；

q：閉包就是能夠讀取其他函數內部變量的函數。由于在Javascript語言中，只有函數內部的子函數才能讀取局部變量，因此可以把閉
包簡單理解成“定義在一個函數內部的函數”；由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，
否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。

12.JavaScript的同源策略；

q：同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。

13.瀏覽器是如何渲染頁面的；

q：1.解析HTML文件，創建DOM樹。
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續外部腳本的加載）。
     2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
     3.將CSS與DOM合并，構建渲染樹（Render Tree）；
     4.布局和繪制，重繪（repaint）和重排（reflow）；

14.從輸入url到顯示頁面，都經歷了什么；

q：1、首先，在瀏覽器地址欄中輸入url
    2、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，如果緩存中有，會直接在屏幕中顯示頁面內容。若沒有，則跳到第三
      步操作。
    3、在發送http請求前，需要域名解析(DNS解析)，解析獲取相應的IP地址。
    4、瀏覽器向服務器發起tcp連接，與瀏覽器建立tcp三次握手。（TCP即傳輸控制協議。TCP連接是互聯網連接協議集的一種。）
    5、握手成功后，瀏覽器向服務器發送http請求，請求數據包。
    6、服務器處理收到的請求，將數據返回至瀏覽器
    7、瀏覽器收到HTTP響應
    8、讀取頁面內容，瀏覽器渲染，解析html源碼
    9、生成Dom樹、解析css樣式、js交互
    10、客戶端和服務器交互
    11、ajax查詢

15.對<meta></meta>標簽有什么理解，meta的作用

q：可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務；meta里的數據是供機器解讀的，告訴
機器該如何解析這個頁面，還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容

16.怎么去設計一個組件封裝；

q：1)組件封裝的目的是為了重用，提高開發效率和代碼質量
      2)低耦合，單一職責，可復用性，可維護性
      3)前端組件化設計思路

17.線程，進程

q： 1)線程是最小的執行單元，進程是最小的資源管理單元
  2)一個線程只能屬于一個進程，而一個進程可以有多個線程，但至少有一個線程

18.vue數據的雙向數據綁定；

q：vue數據雙向綁定是通過數據劫持結合發布者-訂閱者模式的方式來實現的，通過Object.defineProperty()來劫持各個屬性
的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。

19.get與post 通訊的區別；

q：1).Get 請求能緩存，Post 不能；
    2).Post 相對 Get 安全一點點，因為Get 請求都包含在 URL 里，且會被瀏覽器保存歷史紀錄，Post 不會，但是在抓
    包的情況下都是一樣的；
      3).Post 可以通過 request body來傳輸比 Get 更多的數據，Get 沒有這個技術；
      4).URL有長度限制，會影響 Get 請求，但是這個長度限制是瀏覽器規定的，不是 RFC 規定的；
      5).Post 支持更多的編碼類型且不對數據類型限制；

20.頁面導入樣式時，使用link和@import有什么區別；

q：（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加
載CSS;
　  （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
　  （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。

21.this對象的理解；

q：this總是指向函數的直接調用者（而非間接調用者）；
　  如果有new關鍵字，this指向new出來的那個對象；
　  在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。

關于常見的前端21道面試題及答案就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。