更多课程 选择中心

Web培训
达内IT学院

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年前端面试题汇总之算法和应用

2020年前端面试题汇总之常见性能优化

2020年前端面试题汇总之Webpack

Web前端面试必备面试题整理

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省