2020年前端工程师面试题（一）

一、简述一下HTML5新特性

1）增长了section footer header nav等自定义语义化标签

2）增长了表单输入框新time color number tel search等特性

3）提供了视频音频标签

4）添加了canvas绘画功能

5）支持展现SVG矢量图形

6）使用getCurrentPosition()方法获取当前终端地理位置

7）提供drag拖拽，任何元素都能被拖拽

8）webStorage是HTML5最流行的缓存之一

sessionStorage缓存是基于浏览器会话的缓存，关闭浏览器就会清除缓存

localStroage缓存没有时间限制，只能手动清除

9）提供WebSocket全双工通讯机制

客户端与服务器双方握手采用http协议，默认80、443端口

没有同源限制，任何客户端能够与服务器通讯，经常使用于临时社交通讯，例如聊天室

10）WebWork

WebWork基本原理是在当前JavaScript主线程中，加载一个js文件从而建立一个新线程

目的为了起到互相不阻塞运行其余脚本文件

WebWork线程与主线程之间能够实现数据传输

var webWorker =new Worker("webWorker.js");
webWorker.postMessage("主线程发送的数据");
webWorker.onmessage = function(event){
  console.log(event)
}

二、讲述一下js的循环有哪些方式

// 传统的for循环方式
for(var i = 0;i < 20;i++){
  console.log(i);// 输出索引
}
// ES6for方式，用于循环json对象
var arr = [{b:2},{c:3}];
for(var i in arr){
    console.log(i);// 输出索引
  console.log(arr[i]);// 输出对象值1,2,3
}
// ES5foreach循环获取key、value，但过程当中不能跳出循环
var array = ['1','2','3'];
array.forEach((currentValue, index, arr)=>{
  console.log(currentValue); // 输出1,2,3
  console.log(index); // 输出索引
  console.log(arr); // 输出arr数组自己
})

三、浏览器及浏览器内核

IE浏览器：Trident内核

Chrome谷歌：以前一直都是和苹果共用Webkit内核，如今的谷歌浏览器是Blink内核，Blink是在webkit基础上衍生而来的

Firefox火狐：Gecko内核

Safari苹果浏览器：Webkit内核

Opera欧朋浏览器：由Presto内核，转成Webkit内核，再转成Blink内核

360、搜狗、遨游、QQ等一系列浏览器基本上为Trident（兼容模式）+Webkit（高速模式）双核浏览器

四、不一样浏览器有不一样兼容问题，如何解决？

兼容性问题太多，此处列举3处

1）默认内外边距的不一样，设置通配符选择器

*{margin:0;padding:0;}

2）在IE六、7中设置float浮动再设置margin后，会出现双边距现象，如何解决？

.dom{display:inline;}

3）margin边距重叠问题

上下两div之间分别设置5px、10px

量元素之间的间距形成重叠为10px

解决：两元素最好给上面的元素设置margin-bottom

或者将元素再套一层div，再设置margin

五、HTML网页的造成过程

浏览器先解析html源代码，生成一个DOM树，再解析css代码，计算出样式数据，二者合为渲染树，再由浏览器将渲染树绘制到浏览器页面中

六、jQuery异步接口请求代码

get是从服务器上获取数据，post是向服务器传送数据

get参数经过地址栏传递，post放在request body中

get请求只能进行encodeURI编码，而post支持多种编码方式

get传送的数据量较小，不能大于2KB。post传送的数据量较大，通常被默认为不受限制

get参数类型只接受ASCII字符串类型，而post没有限制

get安全性很是低，可直接暴露在地址栏中，post安全性较高

get在浏览器回退时是无害的，而post会再次提交请求

get请求会被浏览器主动cache，而post不会，除非手动设置

$.ajax({
  type: "POST",
  url: "http://xxxxxx.com/requestUrl",
  data: {
    name:$("#name").val(),
  },  dataType: "json",
  success: function(result,status,xhr){
    // 输出请求成功返回结果
    console.log(result);
  },
  error:function(xhr,status,error){
    // 输出请求失败回调  
}})

七、长度有哪些单位

px

%百分比

em

rem

vw、vh

八、盒模型理解

盒模型包括：content内容体、padding内边距、border边框、margin外边距

九、清除浮动方式

父级元素添加overflow:hidden;

子级元素添加<div style="clear:both;"></div>

十、图片的title和alt有什么区别？

alt是图片加载失败时，在网页上显示的替代文字

title是鼠标放在图片上显示的提示文字

十一、绝对定位和相对定位的区别？

position:absolut

绝对定位：当前元素是相对于最近定位的祖先元素进行定位

position:relative

相对定位：当前元素是相对于该元素的初始位置进行移动

十二、display:inline-block怎样不显示间隙？

margin设置负值

或者父级元素设置font-size:0

1三、垂直居中有哪些方法？

单行文本垂直居中能够把hight和ilne-hight设置相同的高度值

块级元素能够使用子绝父相+指定高度解决，例如：

父元素设置position:relative; 子元素设置hight :10px;position:absolute;top:50%;margin-top:-5px;

或者使用子绝父相+transform，不用指定高度也能够解决，例如：

父元素设置position:relative;子元素设置position:absolute;top:50%;transform:translate (0 -50%);

1四、水平居中有哪些方法？

行内元素能够设置父元素text-align:center;

元素宽度固定时，也能够设置元素的左右margin值为auto

子元素为绝对定位时，能够设置父元素相对定位，子元素设置left:0;right:0;margin:auto;

1五、content属性有什么做用？能够怎么应用？

content属性用在before和after伪类元素里，用来生成插入内容；常见的应用是做用在伪类元素里清除浮动

1六、CSS优先级怎么肯定？

优先级关系：

!important>内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

存在多个优先级时，相加计算比较；优先级相同时，显示后写的样式；