前端面试题总结（续）

前期的面试大部分都黄掉之后有点忧愁了啊，于是出去玩了一个星期放松压抑的心情之后接着来战，总结一下上个星期的面试题吧，此次的题目太多关于原理方面的知识，对于我这样一个初级前端菜鸟来说还是比较难以理解，所以引用了很多其他大佬的文章，请自行查看，勿喷~~
（最近工作不太好找，毕竟找工作还是在讲究金九银十，所以各位找工作的同学千万不可以放弃啊，保持好的心态，没有面试的时候也不能颓废，而是努力学习打好基础才是王道！好了，说正事。。。。。。。）

HTML（5）和CSS（3）

一、以下单位分别是什么意思：px, em, rem, vh?你还知道哪些其他单位以及意思？

 em: 相对长度单位，相当于当前对象内文本的字体尺寸。兼容所有浏览器。
 ex: 相对于长度单位，相对于字符“x”的高度，通常为字体高度的一半。兼容所有浏览器。
 ch: 数字“0”的宽度。
 rem: 相对长度单位，相对于根元素（即html元素）font-size计算值的倍数。
 vw: 相对于视口的宽度，视口被均分为100单位的vw。
（举个栗子：如果视口的宽度是200mm，那么设置元素（假设h1）的实际字体大小为h1*200/100 ）
 vh: 相对于视口的高度，视口被均分为100单位的vh。
 （举个栗子：如果视口的宽度是200mm，那么设置元素（假设h1）的实际字体大小为h1*200/100 ）
 vmax: 相对于视口的宽度或高度中较大的那个，其中最大的那个被均分为100单位的vmax。
 vmin: 相对于视口的宽度和高度中较小的那个，其中最小的那个被均分为100单位的vmin。

二、怎么理解盒模型？
盒模型就是网页中的每个元素，它由几部分组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)， 这些都是CSS盒子模式所具备的属性。我们可以将css中的盒模型理解为日常生活中的盒子，content就是盒子中装载的物品，padding就是防止物品被损坏而防止的泡沫或塑料薄膜，border就是装载物品的盒子，margin就是这个盒子与其他盒子或物品之间的距离。

盒模型分为W3C标准盒模型和IE盒模型，他们的区别在于元素的width不同：
W3C标准盒模型：元素的width = content的width（不包含padding和border）
IE盒模型：元素的width = content的width + padding + border

我们可以利用CSS3中box-sizing的属性来切换这两种盒模型：
box-sizing：content-box； // W3C标准盒模型（默认值）
box-sizing：border-box； // IE盒模型

三、HTML5有哪些新标签？
1.语义化标签

header：文档头部
footer：文档尾部
section：文档的节（section、区段）
nav：文档的导航
article：页面独立的内容区域
aside：页面的侧边栏
detailes：描述文档或文档某个部分的细节
summary：标签包含detailes元素的标题
dialog：对话框

2.增强型表单（input的多个type）

color：主要用于选取颜色
date：从一个日期选择器选择一个日期
datetime：选择一个日期（UTC 时间）
email：包含 e-mail 地址的输入域
month：选择一个月份
number：数值的输入域
range：一定范围内数字值的输入域
search：用于搜索域
tel：定义输入电话号码字段
time：选择一个时间
ur：URL 地址的输入域
week：选择周和年

3.新增表单元素

datalist：元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist 元素的 id 绑定
keygen：提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段
output：用于不同类型的输出，比如计算或脚本输出

4.新增表单属性

placeholder：简短的提示在用户输入值前会显示在输入域上
required：是一个 boolean 属性。要求填写的输入域不能为空
pattern：描述了一个正则表达式用于验证 input 元素的值
min和max：设置元素最小值与最大值
step：输入域规定合法的数字间隔
height 和 width：用于 image 类型的 input 标签的图像高度和宽度
autofocus：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple：是一个 boolean 属性。规定 input 元素中可选择多个值

5.音频和视频

audio、video

6.画布

canvas：基于网页画布2D位图绘图技术，可用于统计图表、页面游戏、地图应用、网页特效等。

7.地理定位

8.拖拽

dragstart：拖动开始
drag：拖动中
dragend：拖动结束

dragenter：拖动进入
dragover：拖动悬停
drop：松手释放
dragleave：拖动离开

9.本地存储

localStorage和sessionStorage两者的比较请查看上一篇总结：https://blog.csdn.net/Daisy_1/article/details/91614974

10.新事件

onresize：当调整窗口大小时运行脚本
ondrag：当拖动元素时运行脚本
onscroll：当滚动元素滚动元素的滚动条时运行脚本
onmousewheel：当转动鼠标滚轮时运行脚本
onerror：当错误发生时运行脚本
onplay：当媒介数据将要开始播放时运行脚本
onpause：当媒介数据暂停时运行脚本

11.webSocket

四、CSS3有哪些新属性？
1.新增各种选择器
2.边框
3.背景属性
4.渐变（线性渐变和径向渐变）
5.文本效果
6.字体
7.变形、转换、动画、弹性盒子（请查看上一篇总结：https://blog.csdn.net/Daisy_1/article/details/91614974
）
8.多列
9.多媒体查询

VUE部分

一、v-if和v-show的区别？

他们都是操作元素的现实和隐藏的指令。

v-if：当隐藏结构时该结构会直接从整个dom树中移除；（页面检查时看不到该dom节点，更损耗性能）
v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。（页面检查时可以看到该dom节点）

所以当页面中某个元素只需要判断一次显示或隐藏时使用v-if，但需要频繁更改时使用v-show比较合理。

二、vue-router的实现原理

这有一篇大佬写的，还是很详细的，贴上链接，请自行查看：
https://www.cnblogs.com/mmzuo-798/p/10791315.html

JS部分

一、数组的常用方法有哪些？

◆ length: 返回数组的长度
◆ from(): 将类数组（伪数组）转为一个新的数组实例
◆ isArray(): 判断传递的值是否是数组
◆ fill(value， start， end): 用一个固定的值来填充一个数组重起始索引到
终止索引内的全部元素
◆ filter(): 返回数组中满足提供的测试函数的元素组成的数组
>>>举个栗子：
[1,45,23,4,79].filter((item) => {
    return item>50;
} // [79]

◆ find(): 返回数组中满足提供的测试函数的第一个元素
>>>举个栗子：
function isBigEnough(element) {
return element >= 15;
}
[12, 5, 8, 130, 44].find(isBigEnough); // 130

◆ findIndex(): 返回数组中满足提供测试函数的第一个元素的索引
>>>接着上一个栗子：
[12, 5, 8, 130, 44].findIndex(isBigEnough);  // ‘3’

◆ forEach(): 对数组的每个元素都执行一遍提供的函数
>>>举个栗子：
array.forEach(callback(value, index, array){
     // do something
}, this)

◆ includes(): 用来判断一个数组是否包含一个指定的值，返回true或false
◆ indexOf(): 返回数组中可以找到一个给定元素的索引，不存在则返回-1
◆ lastIndexOf(): 返回指定元素在数组中的最后一个索引，从后向前查找，不存在则返回-1
◆ join(): 将数组（或类数组对象）的所有元素连接到一个字符串中，返回该字符串
◆ map(): 返回一个数组，该数组中的每个元素都调用一个提供的测试函数后返回的结果
◆ concat(): 合并数组，并返回一个新的数组，不改变原数组
◆ pop(): 删除并返回数组中的最后一个元素，改变原数组
◆ shift(): 删除并返回数组的第一个元素，改变原数组
◆ push(): 将一个或多个元素添加到数组的末尾
◆ unshift(): 将一个或多个元素添加到数组的开头，并返回新数组的长度
◆ reverse(): 颠倒数组中元素的位置，并返回颠倒后的数组
◆ slice(): 返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象
◆ splice(): 通过删除现有元素和/或添加新元素来更改一个数组的内容
◆ some(): 测试数组中的某些元素是都通过由提供的函数实现的测试
>>>举个栗子：
const isBiggerThan10 = (element, index, array) => {
	return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10);// true

◆ sort(): 返回排序后的数组
◆ toString(): 返回一个字符串，表示指定的数组及其元素

二、对ES6有什么了解？

对于入门的同学来说推荐去看阮一峰老师的ES6入门：http://es6.ruanyifeng.com/

此处有一个重点就是箭头函数！！！！！！

三、说一下数组去重的方法

此处直接贴链接，请自行查看：https://www.cnblogs.com/baiyangyuanzi/p/6726258.html

四、找到一个字符串中第一个只出现一次的字符。如输入adcbssdsa，输出c。
演示代码：

function findSingleChar(str) {
	var len = str.length;
	for(var i = 0;i < len; i ++){
    	var firStr = str.slice(i+1);
    	var secStr = str.slice(0,i);
    	if(firStr.indexOf(str[i]) == -1 && secStr.indexOf(str[i]) == -1){
        	return str[i];
    	}else{
        	continue;
        }
    }
}

五、请说一下事件冒泡和事件代理
1.事件冒泡

事件冒泡是指当子元素的事件处理函数被触发，该事件会从事件源（当前子元素）逐级向上层元素
传递，触发祖先元素的点击事件，直至最外层的html元素。

可以使用event对象的stopPropagation()方法阻止事件冒泡。

2.事件代理

事件代理也叫事件委托，就是利用事件冒泡的原理来实现的，当我们需要为父元素的很多子元素添加
事件时，可以通过把事件添加到父元素并把事件委托给父元素来触发事件处理函数。

在开发中，我们有时会遇到给列表每一个子元素都添加一个事件，可以用遍历来操作，这种方法固然
简单，但是如果这个列表有巨量的子元素的时候，就要消耗大量的性能，并且当子元素需要新增的时
候，每增加一个子元素就需要遍历一次，这种方法就更不可取。

事件委托不仅实现相同了功能，而且大大减少了DOM操作。

六、jsonp的工作原理是什么？

请关注大佬的这篇文章：https://blog.csdn.net/hansexploration/article/details/80314948

七、简单说一下深拷贝和浅拷贝

1.浅拷贝：将原对象或原数组的引用直接赋给新对象或新数组，此时的新对象或新数组知识原对象
的一个引用
2.深拷贝：创建一个新的对象（或数组），将原对象的各项属性的“值”（或数组的所有元素）拷贝
过来，是“值”而不是“引用”

在浅拷贝中，当改变新对象或新数组中的属性值或元素时，原对象或原数组中相对应的属性值或元素
会被改变，但是深拷贝不会改变原来对象或数组的值或元素。

其他问题

一、有哪些常用的http状态码？
2**开头 （请求成功）表示成功处理了请求的状态代码。

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206 （部分内容） 服务器成功处理了部分 GET 请求。

3** 开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user 	agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4**开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时） 服务器等候请求时发生超时。
409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。

5**开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

二、浏览器如何渲染页面？

请查看文章：https://srtian96.gitee.io/blog/2018/06/01/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/

三、前端有哪些方法优化性能？
1.网络方面

减少http请求：合并js文件、合并css文件、使用sprite图、使用base64表示简单的图片
减少资源体积：gzip压缩、js混淆、css压缩、图片压缩
缓存：DNS缓存、CDN部署与缓存、http缓存
移动端优化：使用长cache，减少重定向、首屏优化，保证首屏加载数据小于14kb、不滥用web字体

2.渲染和DOM操作方面

优化网页渲染：css的文件放在头部，js文件放在尾部或者异步、尽量避免内联样式
DOM操作优化：
避免在document上直接进行频繁的DOM操作、
使用className代替大量的内联样式修改、
对于复杂的UI元素，设置position为absolute或fixed、
尽量使用css动画、
使用requestAnimationFrame代替setlnterval操作、
适当使用canvas、
尽量减少css表达式的使用、
使用事件代理
操作细节：避免图片或frame使用空src、
在css属性为0时，去掉单位、
禁止图像缩放、
正确的css前缀的使用、
移除空的css规则、
对于css中可继承的属性尽量减少继承、
缩短css选择器，多食用微元素等帮助定位
移动端优化：长列表滚动优化、函数防抖和函数节流、使用touchstart、touchend代替click、HTML的viewport设置 、开启GPU渲染加速

3.数据方面

图片加载处理：图片预加载、图片懒加载、首屏加载时进度条显示
异步请求优化：使用正常的json数据格式进行交互、部分常用数据缓存、数据埋点和统计

四、web有哪些常用的攻击技术？

请查看文章：https://www.cnblogs.com/Miss-mickey/p/6636813.html?utm_source=tuicool&utm_medium=referral

---

本次总结就到这里了，关于很多原理以及一些常见的web知识还很不熟悉，准备先记录下来，然后再一点一点的吃透了。
面试很难，但是不能放弃，加油~~