今天小編要跟大家分享的文章是關于Web前端面試必備面試題整理。準備參加Web前端面試的小伙伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。

1.如何理解閉包?

1、定義和用法：當一個函數的返回值是另外一個函數，而返回的那個函數如果調用了其父函數內部的其它變量，如果返回的這個函數在外部被執行，就產生了閉包。

2、表現形式：使函數外部能夠調用函數內部定義的變量。

3、實例如下：

(1)、根據作用域鏈的規則，底層作用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這里明顯count 是函數內部的flag2 的那個count 。

var count=10; //全局作用域 標記為flag1function add(){

var count=0; //函數全局作用域 標記為flag2

return function(){

count+=1; //函數的內部作用域

alert(count);

}

}

var s = add()

s();//輸出1

s();//輸出2

4、變量的作用域

要理解閉包，首先必須理解Javascript特殊的變量作用域。

變量的作用域分類：全局變量和局部變量。

特點：

1、函數內部可以讀取函數外部的全局變量;在函數外部無法讀取函數內的局部變量。

2、函數內部聲明變量的時候，一定要使用var命令。如果不用的話，你實際上聲明了一個全局變量!

5、使用閉包的注意點

1)濫用閉包，會造成內存泄漏：由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。

2)會改變父函數內部變量的值。所以，如果你把父函數當作對象(object)使用，把閉包當作它的公用方法(Public Method)，把內部變量當作它的私有屬性(private value)，這時一定要小心，不要隨便改變父函數內部變量的值。

2.談談垃圾回收機制方式及內存管理

回收機制方式

1、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程中使用的內存。

2、原理：垃圾收集器會定期(周期性)找出那些不在繼續使用的變量，然后釋放其內存。但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收器會按照固定的時間間隔周期性的執行。

3、實例如下：

function fn1() {

var obj = {name: 'hanzichi', age: 10};

}

function fn2() {

var obj = {name:'hanzichi', age: 10};

return obj;

}

var a = fn1();var b = fn2();

fn1中定義的obj為局部變量，而當調用結束后，出了fn1的環境，那么該塊內存會被js引擎中的垃圾回收器自動釋放;在fn2被調用的過程中，返回的對象被全局變量b所指向，所以該塊內存并不會被釋放。

4、垃圾回收策略：標記清除(較為常用)和引用計數。

標記清除：

定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記為："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視為準備回收的變量。

到目前為止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時間間隔互不相同。

引用計數：

定義和用法：引用計數是跟蹤記錄每個值被引用的次數。

基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數為0時，被視為準備回收的對象。

3.判斷一個字符串中出現次數最多的字符，統計這個次數

var str = 'asdfssaaasasasasaa';

var json = {};

for (var i = 0; i < str.length; i++) {

if(!json[str.charAt(i)]){

json[str.charAt(i)] = 1;

}

else{

json[str.charAt(i)]++;

}

};

var iMax = 0;var iIndex = '';for(var i in json){

if(json[i]>iMax){

iMax = json[i];

iIndex = i;

}

}

console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');

4.$(document).ready()方法和window.onload有什么區別?

(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全加載到瀏覽器后才執行的。

(2)、$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，并調用執行綁定的函數。

5.jquery中$.get()提交和$.post()提交有區別嗎?

相同點：都是異步請求的方式來獲取服務端的數據;

異同點：

1、請求方式不同：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。

2、參數傳遞方式不同：get請求會將參數跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。

3、數據傳輸大小不同：get方式傳輸的數據大小不能超過2KB 而POST要大的多

4、安全問題：GET 方式請求的數據會被瀏覽器緩存起來，因此有安全問題。

6.jQuery的事件委托方法bind 、live、delegate、on之間有什么區別?(常見)

(1)、bind 【jQuery 1.3之前】

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監聽函數;

語法：bind(type,[data],function(eventObject));

特點：

(1)、適用于頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給未來新增的元素綁定事件。

(2)、當頁面加載完的時候，你才可以進行bind()，所以可能產生效率問題。

實例如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之后】

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監聽函數;

語法：live(type, [data], fn);

特點：

(1)、live方法并沒有將監聽器綁定到自己(this)身上，而是綁定到了this.context上了。

(2)、live正是利用了事件委托機制來完成事件的監聽處理，把節點的處理委托給了document，新添加的元素不必再綁定一次監聽器。

(3)、使用live()方法但卻只能放在直接選擇的元素后面，不能在層級比較深，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行;

實例如下：$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定義和用法：將監聽事件綁定在就近的父級元素上

語法：delegate(selector,type,[data],fn)

特點：

(1)、選擇就近的父級元素，因為事件可以更快的冒泡上去，能夠在第一時間進行處理。

(2)、更精確的小范圍使用事件代理，性能優于.live()。可以用在動態添加的元素上。

實例如下：

$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});

(4)、on 【1.7版本整合了之前的三種方式的新事件綁定機制】

定義和用法：將監聽事件綁定到指定元素上。

語法：on(type,[selector],[data],fn)

實例如下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不一樣。

說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。

總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件為：.unbind(),.die(), .undelegate(),.off()

7.px和em的區別(常見)

相同點：px和em都是長度單位;

異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

8.瀏覽器的內核分別是什么?

IE: trident內核

Firefox：gecko內核

Safari：Webkit內核

Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核

Chrome：Blink(基于Webkit，Google與Opera Software共同開發)

9.什么叫優雅降級和漸進增強?(常見)

漸進增強 progressive enhancement：

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

優雅降級 graceful degradation：

一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

c. 降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

10.sessionStorage 、localStorage 和 cookie 之間的區別(常見)

共同點：用于瀏覽器端存儲的緩存數據

不同點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie后，數據會發送到服務器端，造成一定的寬帶浪費;

Web storage,會將數據保存到本地，不會造成寬帶浪費;

(2)、數據存儲大小不同：Cookie數據不能超過4K,適用于會話標識;Web storage數據存儲可以達到5M;

(3)、數據存儲的有效期限不同：cookie只在設置了Cookid過期時間之前一直有效，即使關閉窗口或者瀏覽器;

sessionStorage,僅在關閉瀏覽器之前有效;localStorage,數據存儲永久有效;

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面;

以上就是小編今天為大家分享的關于Web前端面試必備面試題整理的文章，希望本篇文章能夠對正在從事Web前端工作的小伙伴們有所幫助，想要了解更多Web前端知識記得關注達內Web培訓官網，最后祝愿小伙伴們工作順利，成為一名優秀的Web前端工程師。

文章來源：原創 是小正吖 進階全棧開發

【免責聲明：本文圖片及文字信息均由小編轉載自網絡，旨在分享提供閱讀，版權歸原作者所有，如有侵權請聯系我們進行刪除。】