前端經典面試題

時間 2019-11-08

原文原文鏈接

1.什麼是盒子模型？javascript

　　在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。css

2.簡述一下src與href的區別html

　　href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。html5

　　src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。java

3.簡述同步和異步的區別web

　　同步是阻塞模式，異步是非阻塞模式。ajax

　　同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；算法

　　異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。數據庫

4.怎樣添加、移除、移動、複製、建立和查找節點？json

1）建立新節點

　　createDocumentFragment() //建立一個DOM片斷

　　createElement() //建立一個具體的元素

　　createTextNode() //建立一個文本節點

2）添加、移除、替換、插入

　　appendChild() //添加

　　removeChild() //移除

　　replaceChild() //替換

　　insertBefore() //插入

3）查找

　　getElementsByTagName() //經過標籤名稱

　　getElementsByName() //經過元素的Name屬性的值

　　getElementById() //經過元素Id，惟一性

5.一次完整的HTTP事務是怎樣的一個過程？

　　基本流程：a. 域名解析

　　　　　　　b. 發起TCP的3次握手

　　　　　　　c. 創建TCP鏈接後發起http請求

　　　　　　　d. 服務器端響應http請求，瀏覽器獲得html代碼

　　　　　　 e. 瀏覽器解析html代碼，並請求html代碼中的資源

　　　　　　 f. 瀏覽器對頁面進行渲染呈現給用戶

6.你所瞭解到的Web攻擊技術

　　（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。

　　（2）SQL注入攻擊

　　（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。

7.ajax是什麼?ajax的交互模型?同步和異步的區別?如何解決跨域問題?

AJAX 的全稱是異步的 Javascript 和 XML ，是一種建立快速動態的技術，經過在後臺與服務器進行少許數據交互，實現網頁的異步更新，在不從新加載整個界面的狀況下，作到網頁的部分刷新；
AJAX 的交互模型（ AJAX 的過程）

　　　　一、用戶發出異步請求；

　　二、建立 XMLHttpRequest 對象；

　　三、告訴 XMLHttpRequest 對象哪一個函數會處理 XMLHttpRequest 對象狀態的改變，爲此要把對象的 onReadyStateChange 屬性設置爲響應該事件的 JavaScript 函數的引用

　　四、建立請求，用 open 方法指定是 get 仍是 post ，是否異步， url 地址；

　　五、發送請求， send 方法

　　六、接收結果並分析

　　七、實現刷新

　同步腳本會停留並等待服務器發送回覆而後再繼續

　異步：腳本容許頁面繼續其進程並處理可能的回覆

　　跨域問題的解決

　　1. 使用 document.domain+iframe 解決跨子域問題

　　2. 使用 window.name

　　3. 使用 flash

　　4. 使用 iframe+location.hash

　　 5. 使用 html5 的 postMessage ；

　　 6. 使用 jsonp （建立動態 script ）。

8.什麼叫優雅降級和漸進加強？

　　漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

　　優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

　　區別： a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給 b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要 c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

9.在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？

　　僞數組（類數組）：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。可使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。

10.瀏覽器本地存儲

　　在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

　　sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

11.線程與進程的區別

　　一個程序至少有一個進程,一個進程至少有一個線程.線程的劃分尺度小於進程，使得多線程程序的併發性高。另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。

　　從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

12.請說出三種減小頁面加載時間的方法。

　　1.優化圖片

　　2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

　　3.優化CSS（壓縮合並css，如margin-top,margin-left...)

　　4.網址後加斜槓（如http://www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄。）

　　5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。

　　當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）

　　6.減小http請求（合併文件，合併圖片）。

13.null和undefined的區別？

　　null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。當聲明的變量還未被初始化時，變量的默認值爲undefined。

　　null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

　　undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：

　　　　（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

　　　　（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

　　　　（3）對象沒有賦值的屬性，該屬性的值爲undefined。

　　　　（4）函數沒有返回值時，默認返回undefined。

　　null表示」沒有對象」，即該處不該該有值。典型用法是：

　　　　（1）做爲函數的參數，表示該函數的參數不是對象。

　　　　（2）做爲對象原型鏈的終點。

14 .new操做符具體幹了什麼呢?

　　一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

　　二、屬性和方法被加入到 this 引用的對象中。

　　三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

15 .哪些操做會形成內存泄漏？

　　內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

　　垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

　　setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

　　閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

16.對Node的優勢和缺點提出了本身的見解？

　　*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

　　*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

17.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

　　分爲4個步驟：

　　（1），當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。

　　（2），瀏覽器與遠程Web服務器經過TCP三次握手協商來創建一個TCP/IP鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

　　（3），一旦TCP/IP鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。

　　（4），此時，Web服務器提供資源服務，客戶端開始下載資源。

18.HTTP狀態碼

　　100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

　　200 OK 正常返回信息

　　201 Created 請求成功而且服務器建立了新的資源

　　202 Accepted 服務器已接受請求，但還沒有處理

　　301 Moved Permanently 請求的網頁已永久移動到新位置。

　　302 Found 臨時性重定向。

　　303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。

　　304 Not Modified 自從上次請求後，請求的網頁未修改過。

　　400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

　　401 Unauthorized 請求未受權。

　　403 Forbidden 禁止訪問。

　　404 Not Found 找不到如何與 URI 相匹配的資源。

　　500 Internal Server Error 最多見的服務器端錯誤。

　　503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

19.請解釋一下 JavaScript 的同源策略。

　　概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

20 .GET和POST的區別，什麼時候使用POST？

　　GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

　　POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。

　　GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。

　　然而，在如下狀況中，請使用 POST 請求：

　　　　沒法使用緩存文件（更新服務器上的文件或數據庫）

　　　　向服務器發送大量數據（POST 沒有數據量限制）

　　　　發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠。

21.XHTML和HTML有什麼區別

　　HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

　　最主要的不一樣：

　　　　XHTML 元素必須被正確地嵌套。

　　　　XHTML 元素必須被關閉。

　　　　標籤名必須用小寫字母。

　　　　XHTML 文檔必須擁有根元素。

22.什麼是語義化的HTML?

　　直觀的認識標籤對於搜索引擎的抓取有好處，用正確的標籤作正確的事情！

　　html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；

　　在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。

　　使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

23.常見的瀏覽器內核有哪些？

　　Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

　　Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

24.HTML5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和HTML5？

　　HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

　　繪畫 canvas

　　用於媒介回放的 video 和 audio 元素

　　本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

　　sessionStorage 的數據在瀏覽器關閉後自動刪除

　　語意化更好的內容元素，好比 article、footer、header、nav、section

　　表單控件，calendar、date、time、email、url、search

　　新的技術webworker, websockt, Geolocation

　　移除的元素

　　　　純表現的元素：basefont，big，center，font, s，strike，tt，u；

　　　　對可用性產生負面影響的元素：frame，frameset，noframes；

　　支持HTML5新標籤：

　　IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

25.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

　　cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會

　　sessionStorage和localStorage的存儲空間更大；

　　sessionStorage和localStorage有更多豐富易用的接口；

　　sessionStorage和localStorage各自獨立的存儲空間；

26.談談This對象的理解。

　　this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。可是有一個總原則，那就是this指的是調用函數的那個對象。this通常狀況下：是全局對象Global。做爲方法調用，那麼this就是指這個對象。

27.談一談JavaScript做用域鏈

　　當執行一段JavaScript代碼（全局代碼或函數）時，JavaScript引擎會建立爲其建立一個做用域又稱爲執行上下文（Execution Context），在頁面加載後會首先建立一個全局的做用域，而後每執行一個函數，會創建一個對應的做用域，從而造成了一條做用域鏈。每一個做用域都有一條對應的做用域鏈，鏈頭是全局做用域，鏈尾是當前函數做用域。

　　做用域鏈的做用是用於解析標識符，當函數被建立時（不是執行），會將this、arguments、命名參數和該函數中的全部局部變量添加到該當前做用域中，當JavaScript須要查找變量X的時候（這個過程稱爲變量解析），它首先會從做用域鏈中的鏈尾也就是當前做用域進行查找是否有X屬性，若是沒有找到就順着做用域鏈繼續查找，直到查找到鏈頭，也就是全局做用域鏈，仍未找到該變量的話，就認爲這段代碼的做用域鏈上不存在x變量，並拋出一個引用錯誤（ReferenceError）的異常。

28.如何理解JavaScript原型鏈

　　JavaScript中的每一個對象都有一個prototype屬性，咱們稱之爲原型，而原型的值也是一個對象，所以它也有本身的原型，這樣就串聯起來了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值爲null。

　　原型鏈的做用是用於對象繼承，函數A的原型屬性(prototype property)是一個對象，當這個函數被用做構造函數來建立實例時，該函數的原型屬性將被做爲原型賦值給全部對象實例，好比咱們新建一個數組，數組的方法便從數組的原型上繼承而來。

　　當訪問對象的一個屬性時, 首先查找對象自己, 找到則返回; 若未找到, 則繼續查找其原型對象的屬性(若是還找不到實際上還會沿着原型鏈向上查找, 直至到根). 只要沒有被覆蓋的話, 對象原型的屬性就能在全部的實例中找到，若整個原型鏈未找到則返回undefined。

29..JavaScript如何實現繼承？

　　構造繼承

　　原型繼承

　　實例繼承

　　拷貝繼承

　　原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。

　　　　function Parent(){

　　　　this.name = 'wang';

　　　　}

　　　　function Child(){

　　　　this.age = 28;

　　　　}

　　　　Child.prototype = new Parent();//繼承了Parent，經過原型

　　　　var demo = new Child();

　　　　alert(demo.age);

　　　　alert(demo.name);//獲得被繼承的屬性

30.清除浮動有哪些方式？比較好的方式是哪種？

　　（1）父級div定義height。

　　（2）結尾處加空div標籤clear:both。

　　（3）父級div定義僞類:after和zoom。

　　（4）父級div定義overflow:hidden。

　　（5）父級div定義overflow:auto。

　　（6）父級div也浮動，須要定義寬度。

　　（7）父級div定義display:table。

　　（8）結尾處加br標籤clear:both。

　　比較好的是第3種方式，好多網站都這麼用。

31.box-sizing經常使用的屬性有哪些？分別有什麼做用？

　　(Q1)box-sizing: content-box|border-box|inherit;

　　(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。

　　border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。

32.Doctype做用？標準模式與兼容模式各有什麼區別?

　　(Q1)<!DOCTYPE>告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。

　　(Q2)標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

33.HTML5 爲何只須要寫 <!DOCTYPE HTML>？

　　HTML5不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）。

而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

34.頁面導入樣式時，使用link和@import有什麼區別？

　　（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;

　　（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

　　（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題。

35.介紹一下你對瀏覽器內核的理解？

　　主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

　　渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

　　JS引擎則：解析和執行javascript來實現網頁的動態效果。

　　最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

36.IE和DOM事件流的區別

　　1執行順序不同、

　　2參數不同

　　3事件加不加on

　　4this指向問題

37.哪些地方會出現css阻塞，哪些地方會出現js阻塞？

　　js 的阻塞特性：全部瀏覽器在下載 JS 的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到 JS 下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗，新一代瀏覽器都支持並行下載 JS，可是 JS 下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。

　　因爲瀏覽器爲了防止出現 JS 修改 DOM 樹，須要從新構建 DOM 樹的狀況，因此就會阻塞其餘的下載和呈現。嵌入 JS 會阻塞全部內容的呈現，而外部 JS 只會阻塞其後內容的顯示，2 種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。

　　CSS 怎麼會阻塞加載了？CSS 原本是能夠並行下載的，在什麼狀況下會出現阻塞加載了(在測試觀察中，IE6 下 CSS 都是阻塞加載）當 CSS 後面跟着嵌入的 JS 的時候，該 CSS 就會出現阻塞後面資源下載的狀況。而當把嵌入 JS 放到 CSS 前面，就不會出現阻塞的狀況了。

　　根本緣由：由於瀏覽器會維持 html 中 css 和 js 的順序，樣式表必須在嵌入的 JS 執行前先加載、解析完。而嵌入的 JS 會阻塞後面的資源加載，因此就會出現上面 CSS 阻塞下載的狀況。

38.CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?

　　標籤選擇符類選擇符 id選擇符

　　繼承不如指定 Id>class>標籤選擇

　　後者優先級高

39.在JavaScript咱們會遇到閉包，請大家根據本身的理解分析一下什麼是閉包？閉包有什麼好處？使用閉包要注意什麼？

　　閉包：函數嵌套函數，內部函數能夠引用外部函數的參數和變量，變量和參數不會被垃圾回收機制所回收

　　好處：（1）但願一個變量長期駐紮在內存之中

　　　　　（2）避免全局變量的污染

　　　　（3）私有成員的存在