更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

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

  • 發布:Web前端培訓
  • 來源:web前端面試
  • 時間:2020-06-15 14:42

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

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

1. html5有哪些新特性、移除了那些元素?

HTML5 現在已經不是 SGML 的子集,

主要是關于圖像,位置,存儲,多任務等功能的增加:

1) 繪畫標簽canvas;

2) 用于媒介回放的 video 和 audio 元素;

3) 本地離線存儲 localStorage 長期存儲數據,

瀏覽器關閉后數據不丟失;

4) sessionStorage 的數據在瀏覽器關閉后自動刪除;

5) 語意化更好的內容元素,

比如article、footer、header、nav、section;

6) 表單控件,calendar、date、time、email、url、search;

7) Webworker, Websocket, Geolocation;

移除的元素:

1) 純表現的元素:basefont,big,center,font, s,strike,tt,...

2) 對可用性產生負面影響的元素:frame,frameset,noframes

2. display: none;與visibility: hidden;的區別?

相同點:

它們都能讓元素不可見

不同點:

display:none;

會讓元素完全從渲染樹中消失,

渲染的時候不占據任何空間;

visibility: hidden;

不會讓元素從渲染樹消失,

渲染師元素繼續占據空間,

只是內容不可見;

display: none;是非繼承屬性,

子孫節點消失由于元素從渲染樹消失造成,

通過修改子孫節點屬性無法顯示;

visibility: hidden;

是繼承屬性,

子孫節點消失由于繼承了hidden,

通過設置

visibility: visible;

可以讓子孫節點顯示;

修改常規流中元素的display通常會造成文檔重排。

修改visibility屬性只會造成本元素的重繪。

讀屏器不會讀取display: none;元素內容;

會讀取visibility: hidden;元素內容

3. 如何解決跨域問題?

1) jsonp

2) iframe

3) window.name

4) window.postMessage

5) 服務器上設置代理頁面

4. XML和JSON的區別?

1) 數據體積方面JSON相對于XML來講,

數據的體積小,傳遞的速度更快些。

2) 數據交互方面JSON與JavaScript的交互更加方便,

更容易解析處理,更好的數據交互。

3) 數據描述方面;JSON對數據的描述性比XML較差。

4) 傳輸速度方面:JSON的速度要遠遠快于XML。

5. px和em的區別?

px和em都是長度單位;

區別是:

px的值是固定的,指定是多少就是多少,

計算比較容易。

em得值不是固定的,并且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px;

所以未經調整的瀏覽器都符合: 1em=16px;

那么12px=0.75em, 10px=0.625em

6. CSS 去掉inline-block元素間隙的幾種方法?

間隙是怎么來的:

間隙是由換行或者回車導致的;

只要把標簽寫成一行或者

標簽直接沒有空格,就不會出現間隙;

怎么去除?

方法1:

元素間的間隙出現的原因

是元素標簽之間的空格,

把空格去掉間隙自然就會消失。

<div class="itlike">

<span>撩課itlike</span>

<span>撩課itlike</span>

</div>

方法2:

利用HTML注釋標簽

<div class="demo">

<span>撩課itlike</span><!-- -->

<span>撩課itlike</span></div>

方法3:

取消標簽閉合

<div class="demo">

<span>撩課itlike

<span>撩課itlike

<span>撩課itlike

<span>撩課itlike

</div>

方法4:

在父容器上使用font-size:0;可以消除間隙

<div class="demo">

<span>撩課itlike</span>

<span>撩課itlike</span>

<span>撩課itlike</span>

<span>撩課itlike</span>

</div>

.demo {font-size: 0;}

7. 在Javascript中什么是偽數組?如何將偽數組轉化為標準數組?

偽數組(類數組):

無法直接調用數組方法,

length屬性有什么特殊的行為,

但仍可以對真正數組遍歷方法來遍歷它們。

典型的是函數的argument參數,

還有像調getElementsByTagName,

document.childNodes之類的,

它們都返回NodeList對象,

這些都屬于偽數組。

可以使用

Array.prototype.slice.call(fArray)

將數組轉化為真正的Array對象。

8. 數組快速排序?

思路:

a) 在數據集之中,選擇一個元素作為"基準"(pivot)。

b) 所有小于"基準"的元素,都移到"基準"的左邊;

所有大于"基準"的元素,都移到"基準"的右邊。

c) 對"基準"左邊和右邊的兩個子集,

不斷重復第一步和第二步,

直到所有子集只剩下一個元素為止。

var quickSort = function(arr) {

if (arr.length <= 1) { return arr; }

var pivotIndex = Math.floor(arr.length / 2);

var pivot = arr.splice(pivotIndex, 1)[0];

var left = [];

var right = [];

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

if (arr[i] < pivot) {

left.push(arr[i]);

} else {

right.push(arr[i]);

}

}

return quickSort(left).concat([pivot],

quickSort(right));

};

9. 開發中有哪些常見的Web攻擊技術?

a) XSS(Cross-Site Scripting,跨站腳本攻擊):

指通過存在安全漏洞的Web網站注冊用戶的瀏覽器

內運行非法的HTML標簽或者JavaScript進行的一種攻擊。

b)SQL注入

c) CSRF(Cross-Site Request Forgeries,跨站點請求偽造):

指攻擊者通過設置好的陷阱,強制對已完成的認證用戶進行

非預期的個人信息或設定信息等某些狀態更新。

10. 如何手寫一個JQ插件?

方式一:

$.extend(src)

該方法就是將src合并到JQ的全局對象中去:

$.extend({

log: ()=>{alert('撩課itLike');}

});

方式二:

$.fn.extend(src)

該方法將src合并到jquery的實例對象中去:

$.fn.extend({

log: ()=>{alert('撩課itLike');}

});

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

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

預約申請免費試聽課

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

上一篇:2020年Web前端面試題匯總(二)
下一篇:2020年Web前端面試題匯總(四)

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

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

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

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

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

欧美在线v中文字幕