1，阐述一下你对HTML语义化的理解？
通过使用恰当语义的 HTML 标签，可以让页面具有良好的结构与含义
1. 增强了 HTML 代码的可读性，使开发者能够更好地开发网页；
2. 增强了 HTML 代码的互用性，使其他开发者能够更容易地阅读和理解源代码，并更好地进行后续的维护与更新；
3. 让页面的内容结构更清晰，便于浏览器和搜索引擎解析；
4. 有利于搜索引擎优化（SEO）（搜索引擎的爬虫依赖于 “HTML 标记” 来确定上下文和各个关键字的权重）。
2，标签上的title与alt属性的区别是什么？
title:title作为标签时，网页的标题就是写在这对标签之内的。title作为属性时，可以为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
alt：alt属性只能用在img、area和input元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。alt是替代图像作用而不是提供额外说明文字的。
3，iframe的缺点是什么？
优点：
iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
iframe会阻塞主页面的onload事件；
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。，会产生很多页面，不容易管理。
iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化（SEO）。
很多的移动设备无法完全显示框架，设备兼容性差。
iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
4，介绍下css的盒子模型？
盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型
**标准(W3C)盒子模型：**内容content+填充padding+边框border+边界margin
宽高指的是 content 的宽高
**低版本IE盒子模型：**内容（content+padding+border）+ 边界margin，
宽高指的是 content+padding+border 部分的宽高
** CSS 如何设置这两种模型？**：
box-sizing : content-box
box-sizing : border-box
5，垂直居中有几种方式？
a,position 元素已知宽度 绝对定位+margin反向偏移
b,position transform 元素未知宽度 如果元素未知宽度，只需将上面example2中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
c, flex布局
6，rgba和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
7，position的值，relative,absolute分别是相对于谁进行定位的？
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。
css 定位还有一个新增属性，粘性定位 sticky，它主要用在对 scroll 事件的监听上；
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
8，HTML5,CSS3新增了那些新的特性？
1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器 多背景 rgba
5. 在CSS3中唯一引入的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image
9，BFC是什么？
（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。
BFC 规定了内部的 Block Box 如何布局。
定位方案：
内部的 Box 会在垂直方向上一个接一个放置。
Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
每个元素的 margin box 的左边，与包含块 border box 的左边相接触。
BFC 的区域不会与 float box 重叠。
BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算 BFC 的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发 BFC
根元素，即 html
float 的值不为none（默认）
overflow 的值不为 visible（默认）
display 的值为 inline-block、table-cell、table-caption
position 的值为 absolute 或 fixed
10，常见的兼容性问题有什么？
1，不同浏览器的标签默认的margin和padding不一样。解决办法是加一个全局的*{margin:0;padding:0;} 来统一；
2，png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
3，iOS下取消input在输入的时候英文首字母的默认大写，解决方案：
4，移动端1px边框问题
5，阻止冒泡的兼容，stopPropagation()
6，阻止默认行为的兼容，preventDefault()
6，CSS3兼容前缀表示
11，JS数据类型？
原始类型：number,boolean,string,null,undefined,symbol
引用类型：object
12，判断一个值是什么类型有那些方法？
a，tyoeof，
b，object.prototype.toString.call()，
c，instanceof-（arri.nstanceof Array）
d，console.log(arr.constructor===Array);//true
13，null和undefined的区别？
14，怎么判断一个变量arr的是否是数组（此题用typeof不行）？
Array.isArray()，object.prototype.toString.call()
15，箭头函数有哪些特点？
a，写法简洁，（）=>
b，箭头函数没有 prototype (原型)，所以箭头函数本身没有this
c，箭头函数不绑定arguments，取而代之用rest参数...代替arguments对象，来访问箭头函数的参数列表
d，箭头函数不会创建自己的this，
d，call | apply | bind 无法改变箭头函数中this的指向
e，箭头函数不能作为构造函数使用
16，new操作符具体干了什么？
新建一个对象obj
把obj的和构造函数通过原型链连接起来
将构造函数的this指向obj
如果该函数没有返回对象，则返回this
17，documen,wri是什么？
document.write 是直接将内容写入页面的内容流，会导致页面全部重绘，
innerHTML 将内容写入某个DOM节点，不会导致页面全部重绘
18，ajax过程是什么？
https://juejin.cn/post/6878455733131116551
https://juejin.cn/post/6997575695404793893
创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新
19，请解释下js的同源策略
http://blog.51weblove.com/254.html
概念:同源策略是客户端脚本（尤其是Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是： 协议，域名，端口 相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
20，介绍下闭包和闭包的常用 场景？
21，js的内存（垃圾）回收机制？
Vue面试题：
https://juejin.cn/post/7043074656047202334
22，谈谈你对mvvm的开发模式的理解？
https://juejin.cn/post/6857322438486589453
23，v-if和v-show有什么区别？
v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；
v-show 则适用于需要非常频繁切换条件的场景。
v-if 是条件渲染，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。
24，你使用过Vuex吗？
25，说说你对SPA单页面的理解，它的优点缺点分别是什么？
26，class与style如何动绑定的？
Class ，style，可以通过对象语法和数组语法进行动态绑定：
27，怎样理解VUE的单向数据流？
1. Vue 的单向数据流：指数据一般从父组件传到子组件，子组件没有权利直接修改父组件传来的数据，即子组件从 props 中直接获取的数据，只能请求父组件修改数据再传给子组件。父级属性值的更新会下行流动到子组件中。
2. 为什么不能子组件直接修改父组件传来的值呢？父组件的值可能会不断发生变化，那么如果我们子组件对父组件传来的值比如说 props 有一个 number，子组件收到了 number=1，在收到后，子组件直接改变number 的值为 5，去做些事情，但还未做时父组件数据更新了，传过来一个值 3，也就是说子组件刚将其变为 5，父组件又把它变成了 3，可能影响子组件的使用。说的官方一些，就是父组件的值更新时，子组件中 props 的值也会发生更新。
3. 在子组件中直接用 v-model 绑定父组件传过来的数据是不合理的，如果希望修改父组件传给子组件的值：
（1）在子组件 data 中创建一个变量获取 props 中的值，再改变这个 data 中的值。
（2）子组件使用 $emit 发出一个事件，让父组件接收去修改这个值。
28，computed和watch的区别，运用场景？
https://juejin.cn/post/7038934727318831135
计算属性computed :
支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
侦听属性watch：
不支持缓存，数据发生改变，会直接触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
29，直接给一个数组赋值，Vue能检测到变化吗？
由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一个问题，Vue 提供了以下操作方法：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
为了解决第二个问题，Vue 提供了以下操作方法：
// Array.prototype.splice
vm.items.splice(newLength)
30，谈谈你对Vue的生命周期的理解？
vue实例从开始创建、初始化数据，编译模板、挂载DOM 渲染、更新、卸载等一系列过程，称为Vue的生命周期，可以分为创建前后、载入前后、更新前后、销毁前后。
创建前后：BeforeCreate、Created
载入前后：BeforeMount 、Mounted
更新前后：BeforeUpdate、Update
销毁前后：BeforeDestory、Destroyed
31，Vue的父组件和子组件的生命同期钩子函数执行顺序？
32，父组件可以监听到子组件的生命周期吗？
能，$emit，$hook
33，Vue框架怎么实现对象和数组的监听的？
https://blog.csdn.net/Z_Gleng/article/details/122761247
34，Vue是如何实现数据的双向绑定的？
Vue的双向绑定原理其实就是MVVM的实现原理, Vuejs官网已经说明, 实际就是通过 Object.defineProperty方法 完成了对于Vue实例中数据的 劫持, 通过对于 data中数据 set的监听,
然后通过观察者模式, 通知 对应的绑定节点 进行节点数据更新, 完成数据驱动视图的更新
同理, 通过对于节点的表单值改变事件的监听, 执行对于数据的修改
简单概述 : 通过Object.defineProperty 完成对于数据的劫持, 通过观察者模式, 完成对于节点的数据更新
35，Vue怎么用vm.$set()解决对象新增属性不以响应的问题？
vue给对象和数组本身都增加了dep属性
当给对象新增不存在的属性的时候，就会触发对象依赖的watcher去更新
当修改数组索引的时候，就调用数组本身的splice方法去更新数组
36，虚拟DOM的优点缺点，diff算法是什么？
37，虚拟DOM实现原理？
用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
38，Vue中key的有什么用？
作为一个DOM节点的标识值，结合Diff算法可实现对节点的复用。(key相同的节点会被复用。)只有当key(或其他导致isSameNode判断为false)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。
列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于key没发挥作用）。
需要注意的是，变动项往后所有列表节点的更新本质是节点属性的更新，节点本身会被复用。
某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
39，你对有Vue项目进行那些优化？
40，对于Vue3.0特性有什么了解的吗？
41，Vue中keep-alive的使用？
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：
一般结合路由和动态组件一起使用，用于缓存组件；
提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。
42，制作一个访问量很高的大型网站，你会如何来管理所有CSS文件,js 与图片？
（1） 先期团队必须确定好全局样式，编码模式等
（2） 编写习惯必须一致
（3） 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）
（4） 页面进行标注
（5） Css与html分文件夹并行存放，命名都要统一
（6） Js分文件夹存放，命名以该JS功能为准英文翻译
（7） 图片采用整合的.png格式文件使用，尽量整合在一起，方便将来的管理。
43，对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
44，v-if和v-for的优先级
经过上述分析，显然v-for要先于v-if被执行，这是重要结论；
2. 如果它们同时出现在一个元素层，那么每次渲染都会先执行循环，然后在执行判断，无论如何，每次循环都不可避免的要执行一次判断，浪费了性能；
3. 要避免出现这种情况，则需要在外层嵌套template，在这一层进行v-if判断，然后在标签内使用v-for进行循环。