更多課程 選擇中心

Web培訓
達內IT學院

400-111-8989

Web培訓

Web前端面試必備面試題整理

  • 發布:Web前端培訓
  • 來源:web前端面試
  • 時間:2020-11-19 17:34

今天小編要跟大家分享的文章是關于Web前端面試必備面試題整理。準備參加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前端工程師

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

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

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:2020年Web前端筆試題匯總
下一篇:2020年前端面試題匯總之Webpack

Web前端面試前需要做的面試準備有哪些

2020年前端面試題匯總之概念

2020年前端面試題匯總之算法和應用

2020年前端面試題匯總之常見性能優化

  • 關注微信公眾號

    回復關鍵字:視頻資料

    免費領取 達內課程視頻學習資料

  • 視頻學習QQ群

    添加QQ群:1143617948

    免費領取達內課程視頻學習資料

Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

a一天堂网,靑靑青草手机版,免费视频,青娛樂,大香蕉,热热色,原网站,窝窝影院 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>