前端面试题汇总

1.HTML

1. html5有哪些新标签
（1） 多媒体元素
audio、video、embed（ 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件））
（2）表单元素
datalist 用来表示可选的列表(跟html中的select标签功能一样)
（3）新的语义和结构元素
artic、aside、section、nav、figure(单个单元引用的自包含内容)
mark（高亮）、progress（进度条）、meter（给定范围数据）、time（时间）、
2. html5语义化作用
（1）利于网站的SEO；各大网站在抓取网页时，语义化标签更清楚的表达网站的逻辑与内容，搜索引擎更加友好，更利于解析上下文环境，抓取各个关键字的权重
（2）方便其他设备的解析，比如屏幕阅读器、盲人阅读器、移动设备，能有意义的渲染网页，清晰的表达网页的上下文内容以及强调部分等
（3）布局的语义化标签，会使得项目在没有css的情况下，页面也能呈现出更好的结构
（4）代码的可读性与可维护性更强；比较以往的div布局来说，越来越多的语义化标签使得代码更加就见名之意的，带给开发者更好的体验。

3. localStorage和sessionStorage和cookie
（1）localStorage：没有时间限制的数据存储。即使浏览器关闭，仍然保存数据在本地，除非手动删除数据。永久保存。
（2）sessionStorage：针对一个session的数据存储。浏览器窗口关闭，数据被删除。临时保存
（3）cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。存储容量小。
注意：三者都保存在浏览器端。但是sessionStorage和localStorage不会主动把数据发给服务器，仅在本地保存。

2.css

1. flex布局
父元素设置flex后，子元素的float、clear和vertical-align属性将失效
（1）父元素上设置子元素排列方向：flex-direction:row | row-reverse | column | column-reverse;
（2）子元素是否换行flex-wrap: nowrap | wrap | wrap-reverse;
（3） flex-flow:flex-direction flex-wrap;
（4）子元素的对齐方式：justify-content:flex-start | flex-end | center | space-between |space-around;
（5）项目在Y轴方向对齐：align-items:flex-start | flex-end | center |baseline | stretch;
（6）子元素上设置flex-grow属性定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。
（7）子元素上设置flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，改项目将缩小。
2. 选择器
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
3. 元素垂直居中有多少种方式
（1）position:absolute;
top:50%;
left:50%;
margin-top:-height/2;
margin-left:-left/2;
（2）设置父元素display:table-cell并且vertical-align:middle,这样子元素可以实现垂直居中
（3）将父元素设置display:flex,并且设置align-items:center; justify-content:center
（4）父元素position：relative。子元素position:absolute;top:0;bottom:0:left:0;right:0;margin:0
4. 盒模型
（1）标准盒模型
width指content部分的宽度。box-sizing:content-box
（2）IE盒模型
width指content+padding+border。box-sizing:border-box
5. 如何去除浮动导致的父级高度塌陷
浮动产生原因：http://www.divcss5.com/jiqiao/j406.shtml
（1）给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。
（2）给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
（3）添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
（4）给父元素添加 overflow：hidden；
（5）通过伪类::after清除浮动
7. 如何实现响应式布局
（1）meta标签定义
<meta name=“viewport” content=“width=device-width,initial-scale=1,maximum-scale=1” />
（2）使用Media Queries适配对应样式
8. 如何用css画一个三角形

#box{
        height: 0;
        width: 0;
        border: 20px solid transparent;
        border-bottom: 20px solid black;
    }

9. display：none和visible：hidden的区别
（1） 给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。
（2）给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
10.隐藏元素方法

opacity: 0	visibility: hidden	diaplay: none	position: absolute	clip-path
元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。	被隐藏的元素依然会对我们的网页布局起作用，它不会响应任何用户交互	被隐藏的元素不占据任何空间	可交互，不影响网页布局	隐藏元素的另一种方法是通过剪裁它们实现，具体是通过clip-path属性，这个属性比较新，浏览器兼容性也会比较差。

3.js

1. 事件绑定的所有方式
（1）在DOM元素中直接绑定
（2）在JavaScript代码中绑定
（3）绑定事件监听函数addEventListener()
2. 什么是事件冒泡和事件捕获
（1）冒泡：从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；
（2）捕获：从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。
3. 什么是闭包
闭包就是既重用变量又保护变量不被篡改的一种机制
判断闭包：
（1）外层函数包裹受保护的内层函数和变量
（2）外层函数将内层函数返回到外部
（3）使用者调用内层函数获得内层函数的对象–形成闭包
闭包的缺点：
　比普通函数占用更多的内存。
解决：闭包不在使用时，要及时释放。
　将引用内层函数对象的变量赋值为null。
4. call、apply、bind的用法和区别
相同：都是替换不想要的this为想要的对象
不同：
（1）call(替换this对象，参数值1，参数值2…)
（2）apply(替换this对象，arr)
call和apply：强行调用指定函数，并临时替换函数中的this为指定对象
强调：立即执行且仅执行一次
（3）var 新函数=原函数.bind(替换this对象，参数值1，参数值2…)。创建一个和原函数完全相同的函数，并永久绑定函数中的this为指定对象
5. js支持的数据类型以及判断数据类型的所有方式
（1）简单类型(基本类型): number,string,boolean,null,undefined
（2）复杂类型(引用类型):object

6. 深拷贝和浅拷贝
（1）浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用。浅拷贝只是拷贝了它在栈中存储的指针，它们指向的都是同一个堆内存地址，所以浅拷贝在某些情况会造成改变数据后导致别的另一份数据也同步被改变的情况
（2）深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。深拷贝是直接将堆内存中存储的数据直接复制一份，不会有浅拷贝互相影响的问题。
7. this指向问题

• 在全局范围内，this指向全局对象（浏览器下指window对象）
• 对象函数调用时，this指向当前对象
• 全局函数调用时，应该是指向调用全局函数的对象。
• 使用new关键字实例化对象时，this指向新创建的对象
• 当用apply和call上下文调用的时候指向传入的第一个参数
  详情见此链接
  8. 什么是隐式类型转换
  （1）字符串与数字相加转为字符串
  （2）两个引用类型比较，只需判断它们是不是引用了同一个对象，是返回true，否则为false。
  （3）undefined 和 null 两者互相比较或者与自身比较，结果是true。它俩与其他任何值比较的都为false。
  （4）NaN与任何值比较包括它自身结果都是false。
  （5）引用类型和基本数据类型进行比较，两者最后都会转换成基本数据类型再进行比较。
  （6）String，Boolean，Number中的任意两个进行比较，最后都会转为Number类型再进行比较。
  9. 什么是防抖与节流
  都是为了限制函数的执行频次，以优化因触发频率过高而导致的响应速度跟不上触发频率，出现延迟，死卡的现象。
  （1）防抖：在事件被触发n秒后执行回调，如果在这n秒后又被触发，则重新计时
  （2）节流 ：规定一个单位时间， 在这个单位时间内，只能有一个触发事件的回调函数，如果在同一事件内有多个事件被触发多次，只能有一次生效。应用：输入框模糊搜索
  10. 什么是原型与原型链
  （1）原型：
  ①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
  ②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
  ③所有引用类型的__proto__属性指向它构造函数的prototype
  （2）原型链：
  当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
  11. js如何实现继承
  （1）原型链继承
  （2）构造函数继承
  （3）组合式继承
  （4）原型式继承
  （5）经典继承
  （6）寄生式继承
  （7）寄生组合式继承
  12. 数组API
  https://www.cnblogs.com/ZhuChuan/p/7904819.html
  13. 字符串API
  https://www.cnblogs.com/tuspring/p/9706274.html
  14. 重绘与回流
  重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
  回流：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了
  他们的区别：
  回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流
  减少重绘与回流：
  不在布局信息改变时做DOM查询
  使用cssText,className一次性改变属性
  使用fragment
  对于多次回流的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
  15. setTimeout中for循环的this指向问题
  在setTimeout中传入函数，函数中的this会指向window对象
  解决：
  （1）将当前的对象的this存为一个变量
  （2）利用bind方法
  （3）箭头函数
  https://www.cnblogs.com/zsqos/p/6188835.html
  16. js数组去重
  （1）es6的set方法去重
  （2）for嵌套for，然后splice去重（es5常用）。双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
  （3）indexof去重。新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。
  （4）利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。
  https://segmentfault.com/a/1190000016418021?utm_source=tag-newest
  17.事件循环，宏任务微任务
  js是单线程，任务队列可分为同步任务和异步任务。
  （1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
  （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
  （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
  （4）主线程不断重复上面的第三步，称为事件循环(Event Loop)。
  异步任务中有微任务和宏任务。先执行微任务在执行宏任务。
• 微任务中的方法：Promise ，nextTick
• 宏任务中的方法：script (可以理解为外层同步代码，作为入口，setTimeout/setInterval
  总结执行顺序：同步任务->异步任务（微任务->宏任务）
  https://blog.csdn.net/m0_46846526/article/details/117909805?utm_medium=distribute.pc_category.none-task-blog-hot-11.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-11.nonecase

4.es6

1. 块级作用域
https://blog.csdn.net/weixin_41424247/article/details/80575465
2. 扩展运算符
https://www.cnblogs.com/minigrasshopper/p/9156027.html
3. 结构赋值
https://blog.csdn.net/Sallywa/article/details/85705370
4. symbol
https://www.jianshu.com/p/f40a77bbd74e
5. 字符串新增方法
（1）includes(), startsWith(), endsWith()
let str = ‘abc’
str.includes(‘a’) //是否包含
str.startsWith(‘a’) //字符串开始位置是否包含
str.endsWith(‘c’) //字符串结束位置是否包含
（2）repeat 原来都认为这个就是替换，如今有了更多的用法
相信再开发中经常会碰到需要造假数据，有时候甚至需要很长的。有了这个后就可以方便的造重复数据了
‘abc’.repeat(10) //参数给多少，字符串就重复多少次，很方便
（3）padStart()，padEnd()
//常用于日期补足2位 如： 2017-1-1 想改成 2017-01-01
‘1’.padStart(2, ‘0’) //第一个参数是限制字符串的长度，第二个要补的内容
‘1’.padEnd(2, ‘0’) //这个是从结尾处补足
（4）字符串模板，这个用的比较多。
（5）indexOf()方法和lastIndexOf()方法。

https://blog.csdn.net/zhanghuali0210/article/details/81154083
6. 数组新增方法
（1）forEach遍历数组，无返回值，不改变原数组，仅仅只是遍历、常用于注册组件、指令等等
（2）map遍历数组，返回一个新数组，不改变原数组的值。
（3）filter过滤掉数组中不满足条件的值，返回一个新数组，不改变原数组的值
（4）reduce 让数组的前后两项进行某种计算。然后返回其值，并继续计算。不改变原数组，返回计算的最终结果，从数组的第二项开始遍历
（5）遍历数组每一项，有一项返回true,则停止遍历，结果返回true。不改变原数组
（6）遍历数组每一项，每一项返回true,则最终结果为true。当任何一项返回false时，停止遍历，返回false。不改变原数组
详情link
7. set
https://www.jianshu.com/p/98a412de4a50
8. promise
解决回调地狱。promise是一个构造函数，参数是一个函数，函数中有两个参数resolve和reject。resolve执行成功后，reject失败。原型上有then和catch方法。then返回resolve数据，catch错误处理

var p = new Promise(function(resolve,reject){
        console.log("结果");
        resolve("结果")
        })
    //以上代码将一段同步代码封装成了一个promise实例,promise实例有两个三个状态
    //peding   正在请求
    //resolved 成功
    //rejected 失败
    //这个实例内部调用resolve，返回成功状态，并将结果通过resolve传递。
    
    //传递出来的结果如何使用呢？
    //下面的代码，通过调用promise实例上面的then方法来获得resolve传递的数据。
    p.then(function(data){
        console.log(data)
        })

原生ajax封装成promise

var myNewAjax=function(url){
	return new Promise(function(resolve,reject){
		var xhr=new XMLHttpRequest();
		xhr.open();
		xhr.send(data);
		xhr.onreadystatechange=function(){
			if(xhr.status==200&&readyState==4){
				var json=JSON.parse(xhr.responseText);
				resolve(json);
			}else{
				if(xhr.readyState==4&&xhr.status!=200){
					reject('error');
				}
			}
		}
	})
}

9. asyn
async函数的使用方式，直接在普通函数前面加上async，表示这是一个异步函数，在要异步执行的语句前面加上await，表示后面的表达式需要等待
https://segmentfault.com/a/1190000008677697
10. 模块化
https://www.jianshu.com/p/9e5f39e4792b

5.框架

1. 说说vue生命周期
（1）初始化(beforeCreate/created)
created后才可使用data中的数据
（2）挂载到视图(beforeMount/mounted)
mounted后，编译的模板内容才会出现在视图中
（3）数据更新(beforeUpdate/update)
（4）销毁(beforeDestroy/destroyed)
2. 什么是虚拟dom
虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。
这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

6.算法

• 冒泡排序
• 选择排序
• 快速排序

7.其他

1. 如何实现跨域
（1）通过jsonp跨域。
jsonp实现跨域请求的原理简单的说, 就是动态创建script标签, 然后利用scrip>的src 不受同源策略约束来跨域获取数据.
jsonp由两部分组成: 回调函数和数据. 回调函数是当响应到来时应该在页面中调用的函数. 回调函数的名字一般是在请求中指定的. 而数据就是传入回调函数中的json数据。
（2）CORS（跨域资源共享）
允许浏览器向跨域服务器发出XMLHTTPRequest请求，从而克服AJAX只能同源使用的限制。
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
（3）WebSocket协议跨域。
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
（4） postMessage跨域。
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递
2. ajax的优缺点
优点：
（1）局部刷新
（2）异步与服务器通信
（3）前端和后端负载平衡
（4）基于标准被广泛支持
（5）界面与应用分离
缺点：
（1）AJAX 干掉了Back和History功能，即对浏览器机制的破坏
（2）AJAX的安全问题。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。
（3）对搜索引擎支持较弱
（4）破坏程序的异常处理机制
（5）违背URL和资源定位的初衷
（6）AJAX不能很好支持移动设备

8. 浏览器

1. 浏览器缓存类型
浏览器缓存主要分为强缓存和协商缓存
1.1强缓存：
浏览器在加载资源时，会先根据本地缓存资源的 header 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。
这里的 header 中的信息指的是 expires 和 cahe-control

expires	cahe-control
该字段是 http1.0 时的规范，它的值为一个绝对时间的 GMT 格式的时间字符串，比如 Expires:Mon,18 Oct 2066 23:59:59 GMT。这个时间代表着这个资源的失效时间，在此时间之前，即命中缓存。这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当服务器与客户端时间偏差较大时，就会导致缓存混乱。	Cache-Control 是 http1.1 时出现的 header 信息，主要是利用该字段的 max-age 值来进行判断，它是一个相对时间，例如 Cache-Control:max-age=3600，代表着资源的有效期是 3600 秒。cache-control 除了该字段外，还有下面几个比较常用的设置值：
	1. no-cache：需要进行协商缓存，发送请求到服务器确认是否使用缓存。2. no-store：禁止使用缓存，每一次都要重新请求数据。3.public：可以被所有的用户缓存，包括终端用户和CDN 等中间代理服务器。4. private只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其存。

1.2协商缓存
当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据 header 中的部分信息来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源未更新，可使用本地的缓存。
这里的 header 中的信息指的是 Last-Modify/If-Modify-Since 和 ETag/If-None-Match.

Last-Modify/If-Modify-Since	ETag/If-None-Match
浏览器第一次请求一个资源的时候，服务器返回的 header 中会加上 Last-Modify，Last-modify 是一个时间标识该资源的最后修改时间。
当浏览器再次请求该资源时，request 的请求头中会包含 If-Modify-Since，该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后，根据资源的最后修改时间判断是否命中缓存。如果命中缓存，则返回 304，并且不会返回资源内容，并且不会返回 Last-Modify。缺点:短时间内资源发生了改变，Last-Modified 并不会发生变化。	Etag/If-None-Match 返回的是一个校验码。ETag 可以保证每一个资源是唯一的，资源变化都会导致 ETag 变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存。与 Last-Modified 不一样的是，当服务器返回 304 Not Modified 的响应时，由于 ETag 重新生成过，response header 中还会把这个 ETag 返回，即使这个 ETag 跟之前的没有变化。

总结
当浏览器再次访问一个已经访问过的资源时，它会这样做：

1.看看是否命中强缓存，如果命中，就直接使用缓存了。
2.如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。
3.如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。
4.否则，返回最新的资源。

9. webpack

webpack相关概念
配置

let webpack = require('webpack');

module.exports = {
    entry:'./entry.js',  //入口文件
    
    output:{
        //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
        path:__dirname, //输出位置
        filename:'build.js' //输入文件
    },
    
    module:{  
        // 关于模块的加载相关，我们就定义在module.loaders中
        // 这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器。
        // 比如说给less文件定义串联的三个加载器（！用来定义级联关系）：
        rules:[
          {
            test:/\.css$/,      //支持正则
            loader:'style-loader!css-loader'
          }
        ]
    },
    
    //配置服务
    devServer:{
        hot:true, //启用热模块替换
        inline:true 
        //此模式支持热模块替换：热模块替换的好处是只替换更新的部分,而不是页面重载.
    },
    
    //其他解决方案配置
    resolve:{ 
        extensions:['','.js','.json','.css','.scss']  
    },
    
    //插件
    plugins:[
        new webpack.BannerPlugin('This file is create by baibai')
    ]

}