一、说一下Vue和jQuery的区别？你为什么用Vue
jQuery是使用选择器选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

二、vue生命周期
vue实例从创建到销毁的过程，就是生命周期：
（1）创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段，vue实例的数据对象data有了，el还是没有。
（2）载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但是还挂载之前的虚拟dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染
(3)更新前/后：当data发生改变时，会触发beforeUpate和updated方法；
（4）销毁前/后：在执行destory方法后，对打他的改变不会触发周期函数，说明此时的vue实例已经解除了事件监听和dom绑定，但dom结构依然存在，
vue生命周期的事件钩子，让我们在控制整个Vue实例的过程更加容易形成更好的逻辑。

三、vue的key工作原理
key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新相同元素，减少DOM操作量，提高性能。
2.另外，若不设置key，还可以在列表更新时引发一些隐蔽的bug。
3.vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

四、如何确定this指向是正确的

五、.display:none、visibility:hidden和opacity:0之间的区别
(1)display:none 不占空间，无点击事件
（2）visibility:hidden 占空间，无点击事件
（3）opacity:0 占空间，有点击事件

**六、谈谈原型、原型链、继承的理解
在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。
这是每个对象(除null外)都会有的属性，叫做proto，这个属性会指向该对象的原型。
每个原型都有一个constructor属性，指向该关联的构造函数。
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

七、你有用过哪些vue高级属性
八、ajax请求的过程
九、css选择符有哪些？优先级怎么计算？哪些可以被继承？h5新增了哪些伪类？

27、有几种前端存储方式？这些方法的区别是上面？

cookie、localStorage、sessionStroage都是前端的本地存储方式。存储字符串类型对象。
（1）cookie大小在4kb左右，一般由服务器产生，可设置过期时间，如果在浏览器中生成，则在关闭浏览器的时候会消失。每次携带会放在http的头部，如果保存太多，会带来性能问题。
注释：cookie，session都是存储用户相关信息的，cookie存在浏览器而session存在服务器。cookie和session结合使用，cookie(浏览器)存储一个session_ID，下次请求的时候带上sessionID去服务器中获取数据
（2）localStorage永久存在，除非手动清除，大小在5m左右，仅在客户端保存，不会与服务器端通信。可以访问同个浏览器的不同页面
（3）sessionStorage在关闭窗口会话的时候清除，大小也5m。不可以访问同个浏览器的不同页面的数据

28、性能优化的方法

1、减少行内元素
2、script标签写在body尾标签前
3、增加图片预加载、懒加载
4、文件优化，图片可以使用图标或者雪碧图去定位到所需要的内容
5、避免无用的闭包，无用的作用域
6、css选择器不要嵌套太深
7、用css原生动画代替动画
8、 少用全局变量、缓存DOM节点查找的结果

29、字符串大小相互取反

  let str = "ACvd";
    str = str.replace(/[a-zA-z]/g, content => {
      return content.toUpperCase() === content ? content.toLowerCase() : content.toUpperCase();
    })
    console.log(str)

25、内联元素，块级元素水平垂直居中

（1）内联元素：
水平居中：在其父元素添加 text-aligin:center
垂直居中:在其父元素上添加 padding或者line-height
（2）块级元素：
水平居中：固定宽度margin:0 auto; 没有宽度固定 marign:0 20px(这个值随便写)
垂直居中：固定宽度或者不固定都可 padding:100px 0

第一种方法：
水平垂直居中：**父元素高度固定，子元素的宽高都要固定,position结合margin:auto**
.parent {
            position: relative;
            height: 200px;
        }

        .child {
            position: absolute;
            margin: auto;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 150px;
            height: 150px;

        }

第二种方法:flex弹性盒子(只支持到IE9)
.parent{
            display: flex;
            justify-content: center;
            align-items:center
        }

第三种方法:定位(只支持到IE9))
**不定宽高**
.parent{position:relative}
.child{
      position:absolute;
      top:50%;
      left:50%;
      tranform:translate(-50%,-50%)
}

**position和margin负值,父盒子高度确定,子元素确定宽高**
.parent{position:relative;height:400px}
.child{
    width:300px;
    height:300px;
    margin:-150px 0;
    position:absolute;
    top:50%;
    left:50%;
}

10、prototype和proto有什么关系？

任意一个函数都有一个prototype属性，指向该函数的原型对象，原型对象上面又都有一个proto属性，

11、接口如何防刷？

12、input搜素如何防抖，如何处理中文输入？

13、实现一个sleep函数？比如sleep(1000)意味着1000毫秒，可以从promise，generaor,async/await等角度实现？

//Promise
        const sleep = time => {
          return new Promise(resolve => setTimeout(resolve,time))
        }
        sleep(1000).then(()=>{
          console.log(1)
        })
        
        //Generator
        function* sleepGenerator(time) {
          yield new Promise(function(resolve,reject){
            setTimeout(resolve,time);
          })
        }
        sleepGenerator(1000).next().value.then(()=>{console.log(1)})
        
        //async
        function sleep(time) {
          return new Promise(resolve => setTimeout(resolve,time))
        }
        async function output() {
          let out = await sleep(1000);
          console.log(1);
          return out;
        }
        output();

14、防抖和节流

防抖，触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间
节流，就是指连续触发事件，每隔 n 秒中只执行一次函数。
区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

15、清除浮动的几种方法（四种）

1、添加空标签，并设置样式clear:both;
2、父级添加overflow:hidden;触发bfc;
3、after伪元素；

.clearfix:after{//正常浏览器
      clear:both;
      content:"";
      visbility:hidden;
      height:0;
      display:block
}
clearfix{//兼容ie7以下的浏览器
      *zoom:1;
}

4、before,after双伪元素清除浮动

.clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

16、移动端响应式布局方案

1、使用rem开发
2、使用媒体查询
3、使用弹性盒子，flex
4、宽度用百分比

17、pc端的响应式

媒体查询+流式布局（百分比布局）

18、一个页面从输入url到页面加载完成，这个过程都发生了什么？

1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询

19、跨域的几种方法

1、jsonp跨域
2、html5新引进的window.postMessage
3、CORS（需要服务器设置header头）
4、document.domain来跨子域
5、window.name来进行跨域
6、nginx反向代理

http协议

1、http和https有何区别？

http端口80，https端口443，http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。

2、tcp和udp的区别？

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！
UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

3、http协议是什么？

对客户端和服务器端之间的数据传输的格式规范，格式称之为“超文本传输协议”

4、http协议的请求方法

post get put delete connect options

5、面试官：你还有什么问我的？

1、贵公司目前在做的项目是什么，使用的技术栈是什么？
2、贵公司的开发团队是如何构成的？
3、如果要入职需要做好什么知识储备？
谈薪资的时候问:
1、薪资构成
2、五险一金的一金百分比

6、css预处理器

CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color），Mixin等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更更易于代码的维护等诸多好处。

7、vue全家桶是什么？

1、Vue-cli：快速创建项目的脚手架
2、vue-router：关于路由方面的配置
3、vuex：数据共享和缓存用
4、axios:于后台交互用