1、html5新增的标签有哪些？
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
2、css的position有哪些值？
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
3、css的盒子模型分哪几种？如何设置这两种模型？
标准模型、IE模型。
box-sizing:content-box;/*标准盒子模型*/
box-sizing:border-box; /*IE模型*/
4、css清除浮动的方法？
使用空标签（给所有浮动标签后面添加一个空标签，定义CSS clear:both，但是这种方法会增加一个无意义的标签。）
设置父级元素高度或父元素overflow:hidden或auto
使用after伪元素清除浮动（这个方法只适用于非IE浏览器。该方法必须为需要清除浮动元素的伪对象中设置height:0,不然该元素会比实际元素高出若干像素。）
5、在项目中为什么要初始化css样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
6、display: none与visibility: hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
7、pc端显示的最小字体是多大？如何显示小于最小字体的字体？
12px。
显示10px的字体大小（用css的缩放属性），例：p{font-size:10px; -webkit-transform:scale(0.8);}//0.8是缩放比例。
8、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决方法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：将
浮动li（float：left）
ul中font-size：0（谷歌不支持）；可以使用letter-space：-3px
9、行内元素、块级元素、行内块元素分别有哪些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
行内块元素：img、input、td
10、如何做移动端的适配？
rem
媒体查询
vw和vh
11、前端性能优化方法有哪些？
页面内容（减少 HTTP 请求数、减少 DNS 查询、避免重定向、缓存 Ajax 请求、延迟加载、预先加载、减少 DOM 元素数量、划分内容到不同域名、尽量减少 iframe 使用、避免 404 错误）
服务器（使用 CDN、添加 Expires 或 Cache-Control 响应头、启用 Gzip、配置 Etag、尽早输出缓冲、Ajax 请求使用 GET 方法、避免图片 src 为空）
Cookie（减少 Cookie 大小、静态资源使用无 Cookie 域名）
CSS（把样式表放在
中、不要使用 CSS 表达式、使用 替代 @import、不要使用 filter）JavaScript（把脚本放在页面底部、使用外部 JavaScript 和 CSS、压缩 JavaScript 和 CSS、移除重复脚本、减少 DOM 操作、使用高效的事件处理）
图片（优化图片、优化 CSS Sprite、不要在 HTML 中缩放图片、使用体积小、可缓存的 favicon.ico、懒加载）
移动端（保持单个文件小于 25 KB、打包内容为分段（multipart）文档）
12、js数据类型有哪些？
值类型/ 基本数据类型：undefined、string、number、boolean、null
引用类型：对象、数组、函数
ES6新类型：symbol
13、DOM事件模型分哪几种？
两种：事件冒泡和事件捕获
14、DOM和BOM分别指是什么？navigator是谁的属性？
DOM是文档对象模型，BOM是浏览器对象模型
navigator是BOM常用属性
15、vue的原理是什么？
数据双向绑定和虚拟DOM
16、vue的数据双向绑定的实现原理？
数据劫持结合发布者-订阅者模式。通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
17、简述vue的生命周期？
beforeCreate // 在实例初始化之前
created // 在实例创建完成后被立即调用, data,computed,methods,watch 已可用， dom (ref)不可用
beforeMount // 挂载实例开始之前
mounted // 挂载实例之后 （dom节点已经建好）, dom (ref)已可用
beforeUpdata // 数据更新之前，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有DOM，比如手动移除已添加的事件监听器。
updated // 组件 DOM 已经更新
beforeDestory // 实例销毁之前，在这一步，vue 实例仍然完全可用。
destoryed // 实例销毁之后，Vue 实例指示的所有东西都会解绑定
18、vue中key的作用？
key 是给每一个 vnode 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速 (对于简单列表页渲染来说 diff 节点也更快,但会产生一些隐藏的副作用,比如可能不会产生过渡效果,或者在某些节点有绑定数据（表单）状态，会出现状态错位。)
19、vue一般在哪个钩子函数里面进行数据请求？
created和mounted
20、vue中的data为什么是函数而不是对象？
js中对象是引用类型，而引用类型存储的是指向值的指针，这样做了为了节省内存，引用类型的赋值是变量指针的赋值，不是真的拷贝，他们之间的值是会相互干扰的，而在开发vue项目中我们有多组件，如果组件的data是对象，那么，当我们修改其中的一个参数，那所有使用这个参数的页面都会跟着改变，这显然不是我们需要的。
用function return 其实就相当于申明了新的变量，相互独立，自然就不会有这样的问题；每个实例维护一个被返回的对象的独立的拷贝。
21、$nextTick的使用场景有哪些？为什么这样用？
在 created 和 mounted 阶段，如果需要操作渲染后的视图，可以使用 nextTick 方法。
在希望所有子组件加载完成时进行某些操作时，可以采用。
重新渲染元素时，想拿到元素的属性。
原因：vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
22、vue监听数据方法有哪些？
有三种。
input标签里绑定keyup事件。
watch(监听数据变化、监听路由变化)。
computed计算属性的使用。
23、vue的路由跳转方式有哪些？
有三种。
router-link 【实现跳转最简单的方法】。
this.$router.push({ path:’/user’})。
this.$router.replace{path：‘/’ }。
24、vue组件间通信方法有哪些？
有八种。
props和$emit（父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的）。
$attrs和$listeners（第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C。简单来说就是祖孙组件之间通信可用此种方法。）。
中央事件总线（上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。）。
provide和inject（父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。）。
v-model（父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值）。
$parent和$children。
broadcast和dispatch（vue1.0中提供了这种方式，但vue2.0中没有，但很多开源软件都自己封装了这种方式，比如min ui、element ui和iview等。比如如下代码，一般都作为一个mixins去使用, broadcast是向特定的父组件，触发事件，dispatch是向特定的子组件触发事件，本质上这种方式还是on和on和emit的封装，但在一些基础组件中却很实用。）。
vuex处理组件之间的数据交互（如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。）。
25、vue中v-if和v-show的区别？
v-if每次都会重新创建或删除元素，有较高的切换性能消耗；
v-show不会每次进行DOM的创建和删除操作，知识切换了display： none的样式；
如果元素涉及到频繁的切换，最好不要使用 v-if，而是推荐使用 v-show，如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if。
26、vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、Module。
27、px、em、rem的区别？
px是一个绝对字体大小，em是根据其父元素的字体大小来设置，1em=16px。那么12px=0.75em, 10px=0.625em，但是用em计算相对复杂；CSS3提供了rem，它也是个相对单位，rem只相对跟节点计算，适用于响应式页面。
28、常用的es6有哪些？
let/const、解构赋值、字符串模板、map()、sort()、flat()、for in 循环、for of 循环、箭头函数、模块化（import、export）、promise对象、Class语法糖等。
29、js中深拷贝和浅拷贝的区别？深拷贝的实现方式？
浅拷贝(shallow copy)：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存;
深拷贝(deep copy)：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变;
实现深拷贝主要有2种方法（递归、JSON.stringify结合JSON.parse）。
30、重绘和回流（重排）的区别和关系？
重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘；
回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流；
注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值；
回流必将引起重绘，而重绘不一定会引起回流。