更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

2020年Web前端面試題匯總(一)

  • 發布:Web前端培訓
  • 來源:Web職場
  • 時間:2020-06-02 15:21

今天小編要跟大家分享的文章是關于2020年Web前端面試題匯總。由于內容較多小編分開為大家介紹,今天首先來和小編一起看一看第一部分的內容,希望這些面試題能夠對正準備找Web前端相關工作的小伙伴們有所幫助。

2020年web前端面試題匯總(一)

1. 說幾條寫JavaScript的基本規范?

1) 不要在同一行聲明多個變量;

2) 請使用===/!==來比較true/false或者數值;

3) 使用對象字面量替代new Object這種形式;

4) 減少使用全局函數, 全局變量;

5) switch語句必須帶有default分支;

6) if語句必須使用大括號;

7) for-in循環中的變量;

應該使用var關鍵字明確限定作用域;

從而避免作用域全局污染。

2. 說說平衡二叉樹?

平衡二叉搜索樹(Self-balancing binary search tree)

又被稱為AVL樹。

具有以下性質:

1)它是一棵空樹或它的左右兩個子樹

的高度差的絕對值不超過1,

并且左右兩個子樹都是一棵平衡二叉樹。

2)平衡二叉樹必定是二叉搜索樹,反之則不一定。

3)平衡二叉樹的常用實現方法有紅黑樹、AVL、

替罪羊樹、Treap、伸展樹等。

最小二叉平衡樹的節點的公式如下:

F(n)=F(n-1)+F(n-2)+1 備注:1是根節點,

F(n-1)是左子樹的節點數量,

F(n-2)是右子樹的節點數量。

3. 清除浮動和解決垂直外邊距重疊的解決方案?

問題描述:

1) 父元素沒有設置寬高,尺寸由子元素撐起;

子元素一旦浮動,父元素高度會發生塌陷。

2)子元素設置margin-top會作用的父元素的margin-top;

此時會造成垂直外邊距重疊。

.clearfix::after,.clearfix::before{

content: ' ';

display: table;

clear: both;

}

4. sessionStorage 、localStorage 和 cookie ?

相同點:

都用于瀏覽器端存儲的緩存數據;

不同點:

1) 存儲內容是否發送到服務器端

當設置了Cookie后,數據會發送到服務器端,

造成一定的寬帶浪費;xxxstorage則會將數據保存

到本地,不會造成寬帶浪費;

2) 數據存儲大小不同

Cookie數據不能超過4K,適用于會話標識;

xxxstorage數據存儲可以達到5M;

3) 數據存儲的有效期限不同

cookie只在設置了Cookid過期時間

之前一直有效,即使關閉窗口或者瀏覽器;

sessionStorage,僅在關閉瀏覽器之前有效;

localStorage,數據存儲永久有效;

4) 作用域不同

cookie和localStorage是在同源同窗口中

都是共享的;

sessionStorage不在不同的瀏覽器窗口

中共享,即使是同一個頁面;

5. 判斷一個單詞是否是回文?

回文是指把相同的詞匯或句子,

在下文中調換位置或顛倒過來,

產生首尾回環的情景,

叫做回文,也叫回環。

比如 cacac,redivider 。

let checkPalindrom = (str)=>{

return str ===

str.split('').reverse().join('');

}

6. 不借助臨時變量,進行兩個整數的交換?

輸入 a = 3, b =1,

輸出 a = 1, b =3

let swap = (a , b)=>{

b = b - a;

a = a + b;

b = a - b;

return [a,b];

}

7. 請寫出至少5個html5新增的標簽,并說明其語義和應用場景?

section:定義文檔中的一個章節;

nav:定義只包含導航鏈接的章節;

header:定義頁面或章節的頭部;

它經常包含 logo、頁面標題和導航性的目錄。

footer:定義頁面或章節的尾部;

它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside:定義和頁面內容關聯度較低的內容,

如果被刪除,剩下的內容仍然很合理。

8. get和post請求在緩存方面的區別?

get請求類似于查找的過程,用戶獲取數據,

可以不用每次都與數據庫連接,所以可以使用緩存。

post不同,post做的一般是修改和刪除的工作,

所以必須與數據庫交互,所以不能使用緩存。

因此get請求適合于請求緩存。

9. 如何解決異步回調地獄?

promise、generator、async/await

10. 圖片的懶加載和預加載?

預加載:提前加載圖片,

當用戶需要查看時可直接

從本地緩存中渲染。

懶加載:懶加載的主要目的

是作為服務器前端的優化,

減少請求數或延遲請求數。

兩種技術的本質:

兩者的行為是相反的,

一個是提前加載,

一個是遲緩甚至不加載。

懶加載對服務器前端有一定

的緩解壓力作用,

預加載則會增加服務器前端壓力。

11. bind,apply,call的區別?

通過apply和call改變函數的this指向,

這兩個函數的第一個參數都是一樣的,

表示要改變指向的那個對象,

第二個參數,apply是數組,

而call則是arg1,arg2...這種形式。

通過bind改變this作用域

會返回一個新的函數,

這個函數不會馬上執行。

12. js怎么控制一次加載一張圖片,加載完后再加載下一張?

方法一:

<script type="text/javascript">

var obj=new Image();

obj.src="http://www.itlike.com/21.jpg";

obj.onload=function(){

document.getElementById("pic")

.innnerHTML="<img src='"+this.src+"' />";

}

</script><div id="pic">加載中……</div>

方法二:

<script type="text/javascript">

var obj=new Image();

obj.src="http://www.itlike.com/21.jpg";

obj.onreadystatechange=function(){

if(this.readyState=="complete"){

document.getElementById("pic")

.innnerHTML="<img src='"+this.src+"' />";

}

}

</script>

<div id="pic">加載中……</div>

以上就是小編今天為大家分享的關于2020年Web前端面試題匯總的文章,希望本篇文章能夠對想要參加web前端面試的小伙伴們有所幫助,想要了解更多Web前端相關知識記得關注達內Web培訓官網。最后祝愿小伙伴們面試成功,成為一名優秀的Web前端工程師

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

預約申請免費試聽課

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

上一篇:轉行Web前端工程師要掌握的學習知識匯總
下一篇:Web前端開發者要知道的幾個前端框架

Web前端初學者要避免的常見錯誤有哪些

Web前端學習人群分類有哪些?學Web前端會遇到哪些困難?

Web前端工程師都在用的前端開發工具匯總

Web前端初學者快速掌握JavaScript的技巧

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

开心激情五月天