HTML5
1.新特性
语义标签增强型表单新增表单属性：placehodler,autofocus,multiple,required,minlength,maxlength,max,min,pattern视频和音频HTML5提供了播放音频文件的标准，即使用audio，video元素Canvas绘图标签只是图形容器，必须使用脚本来绘制图形SVG绘图HTML5Geolocation（地理定位）用于定位用户的位置拖放APIondragstart：元素开始被拖动时触发作用在拖拽元素上ondragenter：当拖曳元素进入目标元素的时候触发的事件，作用在目标元素上ondragover：拖拽元素在目标元素上移动的时候触发的事件，作用在目标元素上ondragleave：拖拽元素拖离开了目标元素时触发，作用在目标元素上ondrop：被拖拽的元素在目标元素上同时鼠标放开触发的事件，作用在目标元素上ondragend：当拖拽完成后触发的事件，作用在被拖曳元素上WebWorkerHTML5的规范中提供了一个多线程的解决方案，这就是WebWorker(WebWorker学习参考文章)WebStorage(这个老生常谈了，就不展开了)WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议(WebSocket教程参考文章)CSS
1.CSS选择器
CSS几种常见选择器优先级是：!important内联ID选择器类选择器标签选择器通用选择器
ID选择器类选择器标签选择器后代元素选择器作用：选中指定元素的指定后代元素。语法：祖先元素后代元素{}（空格隔开）子元素选择器作用：选择指定父元素的指定子元素。语法：父元素子元素伪类伪类表示元素的一种特殊状态:active向被激活的元素添加样式:focus向拥有键盘输入焦点的元素添加样式:hover当鼠标悬浮在元素上方时，向元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式。（隐私问题只能设置颜色）:first-child向元素的第一个子元素添加样式:lang向带有指定lang属性的元素添加样式::selection匹配被用户选中或处于高亮状态的部分伪元素:伪元素表示元素中一些特殊的位置:first-letter向文本的第一个字母添加特殊样式。:first-line向文本的首行添加特殊样式。:before在元素之前添加内容。:after在元素之后添加内容其他子元素选择器:first-child指定父元素中第一个元素且为指定元素的样式2.如何清除浮动
给浮动元素的父元素添加高度在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both，这样就可以清除浮动伪元素清除(手写clearfix).clearfix:after{content:;display:block;clear:both;}复制代码给父元素使用overflow:hidden3.em、rem区别
em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算rem只相对于根目录，即HTML元素。有了rem这个单位，我们只需要调整根元素html的font-size就能达到所有元素的动态适配了4.重绘与回流（重排）
重绘不一定导致回流，回流一定会导致重绘
回流：当我们对DOM的修改引发了DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）最“贵”的操作：改变DOM元素的几何属性“价格适中”的操作：改变DOM树的结构最容易被忽略的操作：获取一些特定属性的值。当你要用到像这样的属性：offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight重绘：当我们对DOM的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘5.position粘性定位
sticky粘性定位(建议结合具体实践操作来进行理解，有的面试官会深挖)
sticky英文字面意思是粘，粘贴，所以可以把它称之为粘性定位position:sticky;基于用户的滚动位置来定位粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位这个特定阈值指的是top，right，bottom或left之一，换言之，指定top，right，bottom或left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同6.display:none与visibility:hidden
display:none
如果给一个元素设置了display:none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失visibility:hidden
给元素设置visibility:hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局7.style在body前与在body后的区别
写在body标签前利于浏览器逐步渲染写在body标签后：由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染8.Flex实现的原理
面试时候遇到的一个问题，我想的答案应该是flex底层原理，但至今还是没查到有关资料，（也有可能是我理解错意思了，难道面试官只是要我讲讲他的容器、属性之类的？）欢迎掘友们评论区指点9.标准盒子模型于IE盒子模型区别
两者width不一样，标准盒子模型的Width=content，IE盒子模型的Width=border+padding+content10.z-index失效的场景
主要考察对层叠上下文的概念、以及层叠顺序、层叠等级的优先级问题（具体学习请参考彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index）
层叠上下文：层叠上下文(stackingcontext)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖层叠等级：在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序如何产生“层叠上下文”HTML中的根元素本身j就具有层叠上下文，称为“根层叠上下文”普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文CSS3中的新属性也可以产生层叠上下文层叠顺序：按照如下图排列
11.CSSOM生成规则
构建CSSOM（CSS对象模型-CSSObjectModel）
构建CSSOM的过程与构建DOM的过程非常相似，当浏览器接收到一段CSS，浏览器首先要做的是识别出Token，然后构建节点并生成CSSOM（规则如下）Bytes→characters→tokens→nodes→CSSOMJS
1.var、let、const区别
1.1var
var声明的变量不存在块作用域var声明的全局变量会自动变成window对象的属性var声明的变量会提升（声明会提前，但赋值不会，还是会报undefined的错）var声明的变量在同一个作用域下可以被重复声明，而let和const则不被允许，否则报错1.2let和const
let命令，用来声明变量它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效const声明一个只读的常量。一旦声明，常量的值就不能改变暂时性死区vartmp=;if(true){tmp=abc;//ReferenceError报错lettmp;}复制代码ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错2.赋值、深拷贝、浅拷贝区别
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响3.箭头函数
语法更加简洁、清晰。从上面的箭头函数基本语法示例中可以看出，箭头函数的定义要比普通函数定义简洁、清晰得多，很快捷箭头函数没有prototype(原型)，所以箭头函数本身没有this箭头函数没有自己的this，箭头函数的this指向在定义（注意：是定义时，不是调用时）的时候继承自外层第一个普通函数的this。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变箭头函数不绑定arguments，取而代之用rest参数...代替arguments对象，来访问箭头函数的参数列表。箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值4.apply、call、bind作用及区别
4.1共同点
三者都是用来改变函数的上下文，也就是改变this指向4.2不同点
bind不会立即调用，而是返回一个绑定后的新函数。使用场景即：不需要立即指向的，而是像生成一个新的函数长期绑定某个函数给某个对象使用的时候letnewFn=fn.bind(this.Obj)newFn(arg1,arg2,arg3...)复制代码call、apply都是立即调用使用apply是立即调用的，返回函数的执行结果，this指向第一个参数，第二个参数是一个数组，这个数组里的内容是fn函数的参数（fn.apply(this.Obj,[arg1,arg2,...])）。使用场景：要传递的参数很多，则可以用数组将参数好调用call也是立即调用的，返回函数的执行结果，this指向第一个参数，后面可有多个参数，并且这些都是fn函数的参数(fn.call(this.Obj,arg1,arg2...))。使用场景：要传递的参数不多，则可以使用5.数组及字符的各种API方法
5.1数组
创建数组Array()letarr=newArray()[]letarr=[]Array.of()Array.of(1,2,3)//[1,2,3]检测数组Array.isArray(value)转换方法：toLocaleString()toString()letcolors=[red,yellow,blue];console.log(colors.toString())//red,blue,greenconsole.log(colors.toLocaleString())//red,blue,green复制代码栈方法：push()在数组末尾添加元素（会修改原数组），返回修改后的数组的长度pop()从数组的末尾移除最后一项（会修改原数组），减少数组的长度，返回删除的项队列方法：shift()移除数组中的第一项（会修改原数组），并返回该项unshift()在数组前端添加任意个元素（会修改原数组），并返回数组的长度操作数组方法：[a,b,c].fill(7)//[7,7,7]newArray(3).fill(7)//[7,7,7]复制代码还可以接收第二和第三个参数，用于指定填充的起始位置和结束位置[a,b,c].fill(7,1,2)//[a,7,c]复制代码flat()用于将嵌套的数组“拉平”，变成以为数组，返回一个新数组。接收一个参数，表示想要拉平的层数（不改变原数组）reverse()反转数组（会修改原数组），并返回排序后的数组sort()默认情况下，按照升序排列数组项，调用每个数组项的toString()方法，然后比较得到的字符串，确定如何排序（会修改原数组）。也可以接受一个函数。返排序后的数组concat()用于连接两个或多个数组arrayObject.concat(arrayX,arrayX,......,arrayX)，会先创建当前数组的一个副本，然后将接受到的参数添加到这个副本的末尾，最后返回数新构建的数组（不会修改原数组）slice()基于当前数组中的一个或多个项创建一个新数组，接受一或两个参数，既要返回的起始和结束位置（不会改变原数组）splice()第一个参数起始位置，第二参数删除几个，第三个参数要插入的任意项。splice返回的是删除的项组成的数组，没有则返回空（可进行删除、插入、替换操作）（会修改原数组）fill()该方法方法使用给定值，填充一个数组（会修改原数组）查位置方法：[1,5,10,15].findIndex(function(value,index,arr){//依次当前的值、当前的位置和原数组returnvalue9;})//2复制代码indexOf()和lastIndexOf()都接收两个参数：要查找的项和表示查找起点位置的索引。indexOf方法从数组的头部开始查找，lastIndexOf方法从数组的尾部开始查找。没找到则返回-1indexOf()，lastIndexOf()findIndex()返回第一个符合条件的数组成员位置，没找到返回-1，两个参数：每一项处理函数和（可选的）运行该函数的作用域对象查值方法：[1,4,-5,10].find((n)=n0)//-5复制代码includes()返回一个布尔值，接收两个参数：要查找的项和表示查找起点位置的索引find()查找出第一个符合条件的数组成员，接收两个参数：一个遍历每一项的函数和（可选的）运行该函数的作用域对象迭代方法：letnumber=[1,2,3,4,5];letfilterResult=number.filter((item,index,array)={returnitem2})console.log(filterResult)//[3,4,5]复制代码letnumber=[1,2,3,4,5];letmapResult=number.map((item,index,array)={returnitem*2})console.log(mapResult)//[2,4,6,8,10]复制代码forEach它只是对数组中的每一项运行传入的函数。没有返回值（遍历操作原数组，会修改原数组）map返回一个新数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果（不会改变原数组）every对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true，否则返回false（即全对即返回true，否则都返回false）some与前者相对，该方法是只传入的函数对数组中的某一项返回true，就会返回true（即全错即返回false，否则有一项符合都返回true）filter返回符合筛选条件的项所组成的一个新数组（不会改变原数组）6.遍历对象的方法
forin主要用于遍历对象的可枚举属性，包括自有属性、继承自原型的属性varobj={name:tom,sex:male}Object.defineProperty(obj,age,{value:18,enumerable:false})//增加不可枚举的属性ageObject.prototype.protoPer1=function(){console.log(nameistom);}//通过原型链增加属性，为一个函数Object.prototype.protoPer2=2//通过原型链增加属性，为一个整型值2for(varainobj){console.log(a)console.log(obj[a])}// 示例中的属性age为不可可枚举，所以没有输出复制代码Object.keys此方法返回一个数组，元素均为对象自有可枚举的属性// (示例为上面代码)console.log(Object.keys(obj))// [name,sex]复制代码Object.getOwnProperty此方法用于返回对象的自有属性，包括可枚举和不可枚举的属性// (示例为上面代码)console.log(Object.getOwnPropertyNames(obj))// [name,sex,age]复制代码7.Es6常见新特性
ES6类Classfor...of和for...in对象的解构rest操作符/Spread操作符模板字符串constletpromiseasync函数Module8.Set、Map、WeakSet和WeakMap的区别
详细区别请参考阮一峰老师的ECMAScript6入门Set和Map数据结构
集合（Set）ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值映射（Map）是用于存取键值对的数据结构，一个键只能对应一个值且键不能重复WeakSet结构和Set类似，都是不重复值的集合WeakSet的成员只能是对象，而不能是其他的值WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用，也就是说，如果其他对象都不再引用该对象。那么垃圾回收机制会自动会输该对象所占用的额内存，不考虑该对象还存在与WeakSet之中WeakMap结构与Map结构类似，也是用于生成键值对的集合WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名WeakMap的键名所指向的对象，不计入垃圾回收机制9.对原型、原型链的理解
像c语言有类实现继承、java可以通过抽象类实现继承，而js为了能将一类事物抽象出来，使相同一类事物能够拥有一样的属性跟方法，便将原型链作为实现继承的主要方式。原型链从数据结构来看，其实就是一个链表，实例有一个指向原型的指针，原型又包含一个指向构造函数的指针，层层递进
10.浏览器事件流的阶段以及事件监听的三个参数
DOM事件传播包括三个阶段：
1、捕获阶段2、目标对象调用事件处理程序3、冒泡阶段第三个参数为true就走捕获阶段，为false就走冒泡阶段。捕获是不可被取消的，但冒泡可以。绑定事件默认是冒泡阶段
11.闭包使用问题
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除
12.如何清除闭包
闭包的含义是函数在调用时能够访问函数在定义时可以访问的作用域，例如在定义函数a的时候，a能够访问变量b。每一个函数都有自己对应的闭包，当函数没有被垃圾回收机制回收时函数对应的闭包也会常驻内存。如果需要清除闭包就要回收不需要的函数，根据JavaScript回收机制，当一个内存空间没有变量指向的时候就会被回收。那么闭包清除的方式就是将不需要的函数名赋值为null
框架
1.vue的data为什么是一个方法
因为组件是用来复用的，且JS里对象是引用关系，如果组件中data是一个对象，那么这样作用域没有隔离，子组件中的data属性值会相互影响，如果组件中data选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的data属性值不会互相影响；而newVue的实例，是不会被复用的，因此不存在引用对象的问题一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数2.vue组件间通信问题
一般的父子组件、祖孙组件传值、Vuex应该都能答上来，但你能答得更清晰更全面吗？或许可以让面试官眼前一亮哦（请查看参考文章Vue组件通信方式居然有这么多？你了解几种）
3.watch监听实现
简单阐述原理（具体了解请查看官方源码）：vm调用$watch后，首先调用observe函数创建Observer实例观察数据，Observer又创建Dep,Dep用来维护订阅者。然后创建Watcher实例提供update函数。一旦数据变动，就层层执行回调函数
4.vue-router的hash跟history模式
4.1hash模式
hash模式，原本用来结合锚点控制页面视窗的位置，具有以下特点：
在hash模式下，所有的页面跳转都是客户端进行操作，因此对于页面拦截更加灵活；但每次url的改变不属于一次