前端面試題及答案(常見的前端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).父級p定義height;(如果高度和父級p不一樣時,會產生問題)
(2).結尾處加空p標簽clear:both;
(2).父級p定義偽類:after和zoom;(IE8以上和非IE瀏覽器才支持:after)
(2).父級p定義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合并,構建渲染樹(RenderTree);
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可以通過requestbody來傳輸比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道面試題及答案就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。