2020年Web前端面试题汇总(三)

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天来和小编一起看一看第三部分的内容，希望这些面试题能够对正准备找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前端工程师。

【免责声明：本文图片及文字信息均由小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】