常見的前端21道面試題及答案-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的陜州網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

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

2.document.write和innerHTML的區(qū)別；

q：document.write是直接寫入到頁面的內(nèi)容流，會(huì)導(dǎo)致頁面被重寫。innerHTML將內(nèi)容寫入某個(gè)DOM節(jié)點(diǎn)，不會(huì)導(dǎo)致頁面全部重繪

3.ajax的步驟；

q：(1) 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個(gè)異步調(diào)用對象.
      (2) 創(chuàng)建一個(gè)新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息.
      (3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
      (4)發(fā)送HTTP請求.
      (5)獲取異步調(diào)用返回的數(shù)據(jù).
      (6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

4.xml和json的區(qū)別；

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

5.清楚浮動(dòng)的方法；（常見）

q：(1).父級div定義 height ;(如果高度和父級div不一樣時(shí)，會(huì)產(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類型，代表“空值”代表一個(gè)空對象指針，使用typeof運(yùn)算得到 “object”
     undefined： Undefined類型，當(dāng)一個(gè)聲明了一個(gè)變量未初始化時(shí)，得到的就是undefined。(null 和 undefined 都表
     示“值的空缺”，你可以認(rèn)為undefined是表示系統(tǒng)級的、出乎意料的或類似錯(cuò)誤的值的空缺，而null是表示程序級的、正常
     的或在意料之中的值的空缺。)

8.常見的HTTP狀態(tài)碼；

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

9.網(wǎng)站性能優(yōu)化；

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

10.JS哪些操作會(huì)造成內(nèi)存泄露；

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

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

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

12.JavaScript的同源策略；

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

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

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

14.從輸入url到顯示頁面，都經(jīng)歷了什么；

q：1、首先，在瀏覽器地址欄中輸入url
    2、瀏覽器先查看瀏覽器緩存-系統(tǒng)緩存-路由器緩存，如果緩存中有，會(huì)直接在屏幕中顯示頁面內(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.對<meta></meta>標(biāo)簽有什么理解，meta的作用

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

16.怎么去設(shè)計(jì)一個(gè)組件封裝；

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

17.線程，進(jìn)程

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

18.vue數(shù)據(jù)的雙向數(shù)據(jù)綁定；

q：vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的，通過Object.defineProperty()來劫持各個(gè)屬性
的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

19.get與post 通訊的區(qū)別；

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

20.頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別；

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

21.this對象的理解；

q：this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
　如果有new關(guān)鍵字，this指向new出來的那個(gè)對象；
　在事件中，this指向觸發(fā)這個(gè)事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。

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

本文標(biāo)題：常見的前端21道面試題及答案-創(chuàng)新互聯(lián)
分享地址：http://bm7419.com/article6/ddpoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈、定制網(wǎng)站、App設(shè)計(jì)、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容