常見的前端21道面試題及答案
這篇文章運用簡單易懂的例子給大家介紹常見的前端21道面試題及答案，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
公司主營業(yè)務(wù)：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出棲霞免費做網(wǎng)站回饋大家。
1.如何用原生js給一個按鈕綁定兩個onclick事件
q：btn.addEventListener("click",hello);
2.document.write和innerHTML的區(qū)別；
q：document.write是直接寫入到頁面的內(nèi)容流，會導(dǎo)致頁面被重寫。innerHTML將內(nèi)容寫入某個DOM節(jié)點，不會導(dǎo)致頁面全部重繪
3.ajax的步驟；
q：(1) 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.
(2) 創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實現(xiàn)局部刷新.
4.xml和json的區(qū)別；
q：json數(shù)據(jù)體積小，傳遞速度快，JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互，XML對數(shù)據(jù)描述性比較好；
5.清楚浮動的方法；（常見）
q：(1).父級div定義 height ;(如果高度和父級div不一樣時，會產(chǎn)生問題)
(2).結(jié)尾處加空div標(biāo)簽 clear:both;
(2).父級div定義 偽類:after 和 zoom;(IE8以上和非IE瀏覽器才支持:after)
(2).父級div定義 overflow:hidden;(不能和position配合使用)
6.box-sizing常用的屬性;
q：· box-sizing：content-box；(默認(rèn)屬性值，W3C)
· box-sizing：border-box;(IE盒模型)
· box-sizing：inherit;
(box-sizing屬性在FireFox中存在兼容問題，所以需要使用-moz-box-sizing做一下兼容)
7.undefined 和 null 區(qū)別；
q：null： Null類型，代表“空值”代表一個空對象指針，使用typeof運算得到 “object”
undefined： Undefined類型，當(dāng)一個聲明了一個變量未初始化時，得到的就是undefined。(null 和 undefined 都表
示“值的空缺”，你可以認(rèn)為undefined是表示系統(tǒng)級的、出乎意料的或類似錯誤的值的空缺，而null是表示程序級的、正常
的或在意料之中的值的空缺。)
8.常見的HTTP狀態(tài)碼；
q：2開頭 （請求成功）、3開頭 （請求被重定向）、4開頭 （請求錯誤）、5開頭（服務(wù)器錯誤）
9.網(wǎng)站性能優(yōu)化；
q：1. JavaScript 壓縮和模塊打包
2. 按需加載資源
3. 緩存
4. 使用索引加速數(shù)據(jù)庫查詢
5. 使用更快的轉(zhuǎn)譯方案
6. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
7. 圖片編碼優(yōu)化
10.JS哪些操作會造成內(nèi)存泄露；
q：1）意外的全局變量引起的內(nèi)存泄露；
2）閉包引起的內(nèi)存泄露；
3）沒有清理的DOM元素引用；
4）被遺忘的定時器或者回調(diào)；
5）子元素存在引起的內(nèi)存泄露；
11.什么是閉包，如何使用它，為什么要使用它；
q：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉
包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”；由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，
否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
12.JavaScript的同源策略；
q：同源策略規(guī)定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。
13.瀏覽器是如何渲染頁面的；
q：1.解析HTML文件，創(chuàng)建DOM樹。
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。
2.解析CSS。優(yōu)先級：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式
4.布局和繪制，重繪（repaint）和重排（reflow）；
14.從輸入url到顯示頁面，都經(jīng)歷了什么；
q：1、首先，在瀏覽器地址欄中輸入url
2、瀏覽器先查看瀏覽器緩存-系統(tǒng)緩存-路由器緩存，如果緩存中有，會直接在屏幕中顯示頁面內(nèi)容。若沒有，則跳到第三
步操作。
3、在發(fā)送http請求前，需要域名解析(DNS解析)，解析獲取相應(yīng)的IP地址。
4、瀏覽器向服務(wù)器發(fā)起tcp連接，與瀏覽器建立tcp三次握手。（TCP即傳輸控制協(xié)議。TCP連接是互聯(lián)網(wǎng)連接協(xié)議集的一種。）
5、握手成功后，瀏覽器向服務(wù)器發(fā)送http請求，請求數(shù)據(jù)包。
6、服務(wù)器處理收到的請求，將數(shù)據(jù)返回至瀏覽器
7、瀏覽器收到HTTP響應(yīng)
8、讀取頁面內(nèi)容，瀏覽器渲染，解析html源碼
9、生成Dom樹、解析css樣式、js交互
10、客戶端和服務(wù)器交互
11、ajax查詢
15.對標(biāo)簽有什么理解，meta的作用
q：可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)；meta里的數(shù)據(jù)是供機器解讀的，告訴
機器該如何解析這個頁面，還有一個用途是可以添加服務(wù)器發(fā)送到瀏覽器的http頭部內(nèi)容
16.怎么去設(shè)計一個組件封裝；
q：1)組件封裝的目的是為了重用，提高開發(fā)效率和代碼質(zhì)量
2)低耦合，單一職責(zé)，可復(fù)用性，可維護性
3)前端組件化設(shè)計思路
17.線程，進程
q： 1)線程是最小的執(zhí)行單元，進程是最小的資源管理單元
2)一個線程只能屬于一個進程，而一個進程可以有多個線程，但至少有一個線程
18.vue數(shù)據(jù)的雙向數(shù)據(jù)綁定；
q：vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的，通過Object.defineProperty()來劫持各個屬性
的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
19.get與post 通訊的區(qū)別；
q：1).Get 請求能緩存，Post 不能；
2).Post 相對 Get 安全一點點，因為Get 請求都包含在 URL 里，且會被瀏覽器保存歷史紀(jì)錄，Post 不會，但是在抓
包的情況下都是一樣的；
3).Post 可以通過 request body來傳輸比 Get 更多的數(shù)據(jù)，Get 沒有這個技術(shù)；
4).URL有長度限制，會影響 Get 請求，但是這個長度限制是瀏覽器規(guī)定的，不是 RFC 規(guī)定的；
5).Post 支持更多的編碼類型且不對數(shù)據(jù)類型限制；
20.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別；
q：（1）link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加
載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題。
21.this對象的理解；
q：this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
如果有new關(guān)鍵字，this指向new出來的那個對象；
在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。
關(guān)于常見的前端21道面試題及答案就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
當(dāng)前標(biāo)題：常見的前端21道面試題及答案
URL鏈接：http://www.jiaotiyi.com/article/ieieph.html