vue方面：

Vue 是一套用于构建用户界面的渐进式框架， 自底向上逐层应用，核心只关注视图层

1. 说一说 Vue 响应式原理

    基于ES5的object.definedProperty() 这个方法对数据做劫持。劫持数据的set与get，然后结合watch监听（发布订阅模式）在数据发生变化时，通知页面进行更新
 特点：
    由于ES5的object.definedProperty（）这个方法不兼容  IE8，所以我们的vue的兼容性也是不兼容  IE8  及以下版本

2. MVVM架构思想

MVVM分为Model、View、ViewModel三者。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

3. 解释单向数据流和双向数据绑定

单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度

4. hash、history 的区别？

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history
!!!
需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面
-----------------------------------------------------
url 展示上，hash 模式有“#”，history 模式没有
刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由
兼容性，hash 可以支持低版本浏览器和 IE。

4. 对 MVC 、MVVM的理解

mvc

v2-966f734915e4c99223a7c6be9a7a8519_720w (2).jpg

mvvm

v2-b922b2d0e3c1f174d071a564407c5aac_720w.jpg

MVC 特点：

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

MVVM : 
特点：
MVVM是Model-View-ViewModel的缩写
各部分之间的通信，都是双向的
采用双向绑定：View 的变动，自动反映在 ViewModel，反之亦然

MVVM分为Model、View、ViewModel三者。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

5. 常用的Vue 指令有哪些?

v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-html：更新元素的innerHTML
v-show与v-if：条件渲染，注意二者区别
v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数
v-for：基于源数据多次渲染元素或模板
v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法
v-bind:title=”msg”简写：title="msg"

6. 父子组件互相调用方法

父组件与子组件传值：Props
子组件向父组件传递数据: 子组件通过$emit方法传递参数,触发父组件event

7. computed 和 watch 有什么区别？

----------------------------
computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。
watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。
所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。

8. vue是渐进式的框架的理解 :（主张最少，没有多做职责之外的事）

9. 图片懒加载原理，如何实现 (第三方库 lazysizes)

10. 页面加载会调用几个钩子

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

11.restful 接口规范

RestFul风格(接口)
专人专职
一个方法只对应一种功能
mock 模拟数据
json-server 服务器

12. 介绍下 虚拟DOM

虚拟dom与diff运算:
虚拟dom就是一个json对象，他用于对真实的dom进行描述
diff运算：当vue实例中的数据发生变化时，vue会获得一份对虚拟dom的拷贝，如此我们就有两份虚拟dom，一份是数据变化前的虚拟dom，一份是数据变化后的虚拟dom，所谓的diff运算就是对着两份虚拟dom进行差异比较，从而找出他们最小的差异，再把这份最小的差异渲染到真实dom中去
同级比较，再比较子节点
先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
比较都有子节点的情况(核心diff)
递归比较子节点

12.diff算法

减少Dom操作  提高组件复用性
diff运算：新的虚拟dom与旧的虚拟dom对比，找出**最小差异**，发送给真实的dom进行更新

13. vue生命周期的理解

* beforeCreate: vue实例的挂载元素el和数据对象data都为undefined，还未初始化。
* created: vue实例的数据对象data有了，el还没有
* beforeMount: vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
* mounted: vue实例挂载完成，data.message成功渲染。
* beforeUpdate: 数据更新前调用
* Update: 数据更新后调用
* beforeDestroy：适合移除事件、定时器等等，否则可能会引起内存泄露的问题。
* destroyed: 进行一系列的销毁操作，如果有子组件的话，也会递归销毁子组件，所有子组件都销毁完毕后才会执行  
------------------------------------------------------------------------------------------------------------
第一次页面加载会触发哪几个钩子？
会触发下面这几个beforeCreate、created、beforeMount、mounted 

简单描述每个周期具体适合哪些场景？
生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom;

14. 组件通信

父组件向子组件通信
子组件通过 props 属性，绑定父组件数据，实现双方通信

子组件向父组件通信
将父组件的事件在子组件中通过 $emit 触发

非父子组件、兄弟组件之间的数据传递

15. vue-rotuer 路由实现

路由的概念就是， 能够通过不同的请求地址来响应不同的页面或数据
视图：  router-view   路由坑   路由匹配到的组件将渲染在这里

导航： router-link     路由跳转  相当于a标签   没有a标签的#号 而且还自带样式    .router-link-active    还有起到跳转作用 

16. v-if 和 v-show 的区别

 1. v-if 是真正的条件渲染, 默认条件为false时元素不渲染，默认条件为true时元素渲染  条件变为false时元素会销毁，条件变为            true时元素会重新创建。

           而 v-show 只是简单的去控制元素的css的display属性。

 2. v-show 有更高的初始渲染开销（因为不管默认条件为真还是假，都会渲染出来）
         v-if 有更高的切换开销（切换时做销毁与重建的操作）

         如果需要频繁切换显示隐藏使用v-show更好，其余情况使用v-if就好。

 3. v-if 有 v-else v-else-if 去配套使用。
         v-show 没有，它是孤零零的一个人
        
 4. v-if 能配合 template 元素使用，而 v-show 不能。

17.Vue组件中 data 为什么必须是函数？

组件时可以进行复用的，如果 data直接写成对象，复用的时候，会造成数据污染 (复用后影响其他实例)  因为对象是引用数据类型
 data方法返回一个对象作为组件的属性，这样做的目的是为了每一个组件实例都拥有独立的data属性
 

17.vue 等单页面应用的优缺点

优点：
良好的交互体验
良好的前后端工作分离模式
减轻服务器压力
缺点：
SEO难度较高
前进、后退管理
初次加载耗时多

17. router的区别

$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等

18. NextTick 是做什么的

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

19. 计算属性computed 和 事件 methods 有什么区别

computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method ，只要发生重新渲染，method 调用总会执行该函数

20. 对比 jQuery ， Vue 有什么不同

jQuery 通过操作 DOM 去实现页面的一些逻辑渲染； Vue 通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

21. Vue中怎么使用过滤器

可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>

mixin 和 mixins 区别

`mixin` 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的

22. 对keep-alive 的理解

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

- 如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 `keep-alive` 组件包裹需要保存的组件。
- 对于 `keep-alive` 组件来说，它拥有两个独有的生命周期钩子函数，分别为 `activated` 和 `deactivated` 。用 `keep-alive` 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 `deactivated` 钩子函数，命中缓存渲染后会执行 `actived` 钩子函数。

23. Vue 中 key 的作用

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误

24. Vue 的核心是什么

数据驱动 组件系统

26. hash模式与 history模式的区别？

1.url 地址表现不同，hash模式有#号，history模式没有
2.实现原理不同
3. 兼容不同 ：
     1.hash模式都可以兼容
     2.histyory 模式只能兼容到IE10及以上
     3.history 模式会出现404 找不到页面这种问题，需要后端配置相关的处理才行，而hash 模式没有这个问题
     4.history 模式时，重定向会有些问题 ，需要页面的名字叫index.html才行

性能优化琐碎事

图片优化
图片加载优化
节流
防抖
预加载
预渲染
懒执行
懒加载
CDN

js方面：

深拷贝和浅拷贝 深拷贝有哪些方法

递归，JSON.parse和JSON.stringify

bind、call、aplly?

axios 的封装?

请求拦截器和响应拦截器；然后在api.js 配置请求时的方法

$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

27.闭包的特点(优缺点并存)

闭包的应用场景  缓存中间变量

闭包的定义其实很简单：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包 ；闭包存在的意义就是让我们可以间接访问函数内部的变量 ；

--------------------------------------------------------------------
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存溢出。在js中，函数即闭包，只有函数才会产生作用域的概念
闭包 的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中
闭包的另一个用处，是封装对象的私有属性和私有方法
好处：能够实现封装和缓存等；
坏处：就是消耗内存、不正当使用会造成内存溢出的问题

使用闭包的注意点:  
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
解决方法是，在退出函数之前，将不使用的局部变量全部删除

闭包的作用

​     就是当你需要延长变量的生命周期

​     或者你需要访问某一个函数内部的私有数据的时候

​     你可以使用闭包   函数来解决

生成闭包的三个条件：
1.在函数A 内部直接或者间接返回一个函数B
2.B函数外部使用着 A 函数的私有变量(私有数据)
3.A函数外部有一个变量接受着函数B
形成了一个不会销毁的函数空间

28.Promise对象（异步编程的一种解决方案）

Promise 是ES6 新增的语法
promise 是异步编程的一种解决方案，比传统的解决方案，  ---回调函数事件 --- 更合理和更强大

所谓 promise 蛮简单说是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)  的结果，从语法说， promise 是一个对象，从他可以获取异步操作的消息，

promise对象的状态改变，只有两种可能:  从pending(进行中) ， fulfilled（已成功），和 rejected （已失败）

解释一下原型和原型链

原型： 其实原型就只是个普通对象，里面存放着所有实例对象需要共享的属性和方法！所以，我们把需要共享的放到原型对象里，把那些不需要共享的属性和方法存在在构造函数里  ！ 

原型链： 是由子对象对父对象进行多次原型继承形成的链式关系。当调用子对象的某个属性或方法时，javascript会向上遍历原型链，直到找到为止，没有返回undefined。但是注意： 属性在查找的时候是先查找自身的属性，如果没有再查找原型，再没有，再往上走，一直插到Object的原型上。

优化前端性能的方法

1. 压缩图片
     雪碧图
     图片压缩
     base64
     响应式图片
     延迟加载
     图标字体
     SVG
2. 减少http请求
3. 合并脚步和样式表
4. 配置多个域名和CDN 加速
     
     

跨域怎么处理， 有哪几种解决方式？

 通过jsonp跨域
 跨域资源共享（CORS）.纯后端方式: CORS，服务器代理
 nginx代理跨域

bind、 call 、 apply ?

call()、apply()、bind() 都是用来重定义 this 这个对象的！
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别：
call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 。
apply 的所有参数都必须放在一个数组里面传进去 。
bind 除了返回是函数以外，它 的参数和 call 一样。
当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

深浅拷贝？

假设b复制了a，当a修改时b如果发生了变化就是浅拷贝，如果没变就是深拷贝。
浅拷贝是用 Object.assign 和 展开运算符 ... 来实现浅拷贝。
深拷贝是用 JSON.parse(JSON.stringify(object)) 来解决。但是该方法也是有局限性的：会忽略 undefined；会忽略 symbol；不能序列化函数；不能解决循环引用的对象

什么是事件冒泡？什么是事件捕获？事件委托？

事件委托是指将事件绑定目标元素的父元素上，利用冒泡机制触发该事件，核心属性是事件对象的target属性
优点： ▪ 可以减少事件注册，节省大量内存占用 ▪ 可以将事件应用于动态添加的子元素上 缺点：使用不当会造成事件在不应该触发时触发
事件的三个阶段
捕获、目标、冒泡
冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发
捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发

递归函数?

一个函数 或者直接或者间接的调用自己，有 一个出口，不然就会死循环

http状态码

1xx：代表客户端应该继续发送请求
2xx：表示服务器已经成功接受请求；202：表示服务器已经接受了请求，但是还没有处理
3xx：重定向
4xx: 客户端请求错误
5xx： 服务端错误

this指向问题？

（1）全局定义的函数直接调用，this => window 
（2）对象内部的方法调用，this => 调用者 
（3）定时器的处理函数，this => window 
（4）事件处理函数，this => 事件源  
（5）自调用函数，this => window     
（6）箭头函数的this是上下文的this    

1. 常见的数据类型 类型 以及 基础数据类型和引用数据类型的区别
2. 解释一下原型和原型链
3. new 一个构造函数的时候都做了什么
4. 数组的方法：

concat(): 连接两个或者更多的数组，返回结果。
join():数组转字符串的方法，把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop(): 删除并返回数组的最后一个元素
push(): 向数组的末尾添加一个或者更多元素，并返回新的长度。
shift(): 删除并返回数组的第一个元素。
unshift(): 向数组的开头添加一个或更多元素，并返回新的长度
reverse(): 颠倒数组中元素的顺序
slice(): (截头不截尾) 从某个已有的数组截取相对应的元素

px 和 em 和 rem 的区别？

px 是固定大小
em 的值并不是固定的
rem 会继承父级元素的字体大小
使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML 跟元素

谈谈你对ES6的理解

let   有快级作用域  跟var一样   不能重复声明
const  有快级作用域  定义常用    不能重复声明
箭头函数  没有this指向问题
模板字符串
json
 

display： none 和 display： hidden 的区别

.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；  不占空间，占位置
visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；  占空间，占位置

1. 标准的盒子模型

2. 伪类选择器什么时候回用到 ，为什么要用伪类选择器

3. 如何解决跨域问题， 为什么会有跨域的问题

ajax工作原理

3.AJAX的工作原理
Ajax的工作原理相当于在用户和服 务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

4. sessionld 详解

7

react方向的问题： v16.13.1

React 是一个用户构建用户界面的Javascript 库，

1.redux工作流程，以及中间件

为啥要用 redux？

   1.很多非父子通信需要管理
   2.缓存后端数据，减少重复的后端请求，减轻服务器压力，提高用户体验
     减少Dom操作  提高组件复用性

react中有多少种创建组件的方法？

 ES5组件 React.createElement()
 类组件 class User extends React.Component {}
 无状态组件 function User(props) {}
 高阶组件 function Hoc(Child) { }
 Hocks 组件

jsx 语法糖:

jsx = javascript xml 语法糖
jsx 变量、对象
jsx 不是强制的，但jsx让代码更具可读性
jsx 可以嵌套
jsx 中可以使用表达式，使用方法用 单大括号进行包裹
jsx 语法更接近javascript 而不是html

React 非常灵活，但它也有一个严格的规则

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

 2. 钩子函数
 3. 项目做过哪些性能优化，你知道的性能优化方式有哪些
 4. 项目难点是什么，怎么解决的
 5. 说一下diff运算的理解，虚拟dom的原理
 6. git版本管理工具
 7. webpack打包工具
 8. gulp自动化构建工具
 9. 假如需要你封装一个表格组件，你的思路是什么
 10. HTTP和HTTPS的区别
 11. get和post区别
 12. setState的同步和异步
 15. 你的设计稿是多大的，

​

防抖和节流？

>相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿.

>不同:防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次.

说几条写JavaScript的基本规范？

·  不要在同一行声明多个变量
·  请使用===/!==来比较true/false或者数值
·  使用对象字面量替代new Array这种形式
·  不要使用全局函数
·  Switch语句必须带有default分支
·  If语句必须使用大括号

ES6 语法特性：

变量：

var 重复声明， 不能限制修改 函数级

let 不能重复声明 ，变量，块级 ， 不存在变量提升 不会预处理 应用： 循环遍历加监听，使用

const 不能重复声明 常量 块级

解构赋值：

块级作用域：

let 防止重复声明，变量 只在代码块里起作用

const 防止重复声明，常量

函数：

箭头函数 和 this

  箭头函数
       function () {
           ...
       }
         
       () => {}

​ 简写：

​ 1.如果有且仅有一个参数，()也可以不写

​ 2.如果有且仅有一个语句并且是 return ，{ } 也可以不写

参数扩展、数组展开 ...扩展

...

参数展开

​ 收集参数

​ 展开

  ```

let arr1 = [12,3,4]
let arr2 = [4,5,6]
let arr = [...arr1,...arr2]
console.log(arr) // 12,3,4,4,5,6
```

数组展开

json展开

原生对象扩展

Array扩展，map，reduce， filter， forEach

模板字符串

json 写法， JSON 对象

map: 映射 ： -- 对应 有多少个就会返回多少个

​ react： list.map(item => return { <li> </li> })

reduce: 进去很多 返回值 只有个 用于求平均分之类

filter : 过滤 过滤出你想要的值 用于 删除某一项

​ 点击删除某一项 : list.filter(item => item.id !== id )

​ 这个是相当于满足条件的那个就会返回出去

forEach: 遍历

JSON.stringify() // 把JavaScript 对象转换为字符串。

JSON.parse() // 把JavaScript 字符串转换为对象。

js 方面：

什么是继承？

1. 继承是与 构造函数 相关的应用
2. 是指让一个构造函数去继承另一个构造函数的属性和方法
3. 继承是发生在两个构造函数之间的
4. 继承的是父级的属性和方法
出现在两个构造函数之间的关系
当A构造函数的属性和方法被B 构造函数的实例使用了
那么我们就说 B继承自A 构造函数
    A是B 的构造函数的父类
    B是A 的构造函数的子类
    
  

new 操作符具体干了什么?

创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创建的对象由 this 所引用，并且最后隐式的返回 this 

JS数组去重的几种常见方法?

1. indexOf
2. 利用数组原型对象上的includes方法。
3. ES6 的set 方法
4. 利用数组原型对象上的 splice 方法
5. 利用filter
6. 利用sort

简单说下原型链？

每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。
每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]]是内部属性，我们并不能访问到，所以使用 _proto_来访问。
对象可以通过 __proto__ 来寻找不属于该对象的属性，__proto__ 将对象连接起来组成了原型链。

async、await?

async 和 await 相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码。缺点在于滥用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性

1. 说一说箭头函数

3. 项目上线跨域怎么处理

4. 浏览器缓存

5. webpack 和 gulp 的区别

6. awite, async 应用场景

7. 基本数据类型与复杂数据类型有什么区别？

基本数据类型存储在栈内存，存储的是值。

复杂数据类型存储在堆内存，存储的是地址。当我们把对象赋值给另外一个变量的时候，复制的是地址，指向同一块内存空间，当其中一个对象改变时，另一个对象也会变化。

CSS3 新特性:

1.  过渡
2.  动画
3.  形状转换
4.  阴影
5.  边框
6.  背景
7.  渐变
8.  弹性布局 flex
9.  栅格布局
10.  多列布局
11.  盒模型定义

HMTL5的新特性：

1. 语义化标签 
2. 新增的input 的 type 类型和属性
3. 新的多媒体标签 (视频 音频)
4. 自定义元素标签
5. 浏览器的支持度(所有现代浏览器都支持 HTML5)
6. HTML5通过meta标签达到监听并适配设备屏幕的布局
7. WebSocket 本地缓存  可以是不同的浏览器就行通信   客户端和服务器之间的数据交换变得更加简单
8. 媒体查询  (响应式布局)

stylus/sass/less区别?

sass： 一个css的预编译语言  也就是用写代码的方式写css 然后把文件编译成css文件运行
·  均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
·  Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
·  Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
·  Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS``NPM下载相应库后进行编译；

你都做过哪些Vue的性能优化？

编码阶段

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连用
如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载
SEO优化
预渲染
服务端渲染SSR
打包优化
压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化

用户体验
骨架屏
PWA
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

项目中遇到过什么问题？

一些常见问题
1.自我介绍
2.面试完你还有什么问题要问的吗
3.你有什么爱好?
4.你最大的优点和缺点是什么?
5.你为什么会选择这个行业，职位?
6.你觉得你适合从事这个岗位吗?
7.你有什么职业规划?
8.你对工资有什么要求?
9.如何看待前端开发？
10.未来三到五年的规划是怎样的？
11.你的项目中技术难点是什么？遇到了什么问题？你是怎么解决的？
12.你们部门的开发流程是怎样的
13.你认为哪个项目做得最好？
14.说下工作中你做过的一些性能优化处理
15.最近在看哪些前端方面的书？
16.平时是如何学习前端开发的？
17.你最有成就感的一件事
18.你为什么要离开前一家公司？
19.你对加班的看法
20.你希望通过这份工作获得什么？

性能优化？

兼容问题？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8
浏览器默认的margin和paddin不同。解决方案是body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{margin:00;padding:000;}
IE下,event对象有x,y属性,但是没有pageX,pageY属性
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

说说移动端是如何调试的?

(1)模拟手机调试
(2)真机调试之android手机+Chrome
(3)真机调试之 iphone+ safari ⑷UC浏览器
(1)微信内置浏览器调试
(2)debuggap
(3)抓包

项目测试没问题。但是放到线上就有问题了，你是怎么分析解决的？

可能的原因：
(1)后端原因：后端接口，后端服务器
(2)域名、IP和路径问题
(3)网络环境问题
(4)线上库、框架、工具的版本和本地不—致问题
(5)线上和本地数据资源不—致问题
(6)程序bug

对前端界面工程师这个职位是怎么样理解的？

1. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
2. 参与项目，快速高质量完成实现效果图，精确到1px；
3. 与团队成员，UI设计，产品经理的沟通；
4. 做好的页面结构，页面重构和用户体验；
5. 处理hack，兼容、写出优美的代码格式；
6. 针对服务器的优化、拥抱最新前端技术。

说一下浏览器的缓存机制？

浏览器缓存机制有两种，一种为强缓存，一种为协商缓存
对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。
对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存

谈谈你对webpack的看法?

WebPack 是一个模块打包工具，
他做的事情是，分析你的项目结构，找到javascript 模块(commonJs)以及其它的一些浏览器  不能直接运行的扩展语言 (Scss,jsx,vue 等) ，并将其打包为合适的格式以供浏览器使用

怎么判断一个对象为空对象

1. 将 json 对象转化为 json 字符串，在判断该字符串是否为 {}
2. for in 循环判断
3. ES6 的 Object.keys() 方法，返回值也是对象中属性名组成的数组

gulp 和 webpack的区别

gulp 是工具链 构建工具。
webpack 是文件打包工具，可以把项目的各种js 文件 css文件等打包合并成一个或多个文件，主要编译模块的方案

cookies , sessionStorage , localStorage 的区别

cookie 是网站为了标识用户身份存在用于本地终端  是在请求中携带，
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小:
   cookie 数据大小不能超过 4k
   sessionStorage 和 localStorage 是5M

有效时间:
    localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
    sessionStorage 数据在当前浏览器窗口关闭后自动删除
    cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

不忘初心，方得始终

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

HTML5 离线存储

localStorage: 长期存储数据，浏览器关闭后数据不的清除
sessionStorage: 数据在浏览器关闭后自动删除

src 与 href 的区别

href 是指向网络资源所在位置，建立和当前元素 或 当前文档之间的链接  ， 用于超链接
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置

Tcp连接: TCP 三次握手

第一次握手，由浏览器发起，告诉服务器，我要发起请求了，
第二次握手，由服务器发起，告诉浏览器我准备接受了，你发送吧
第三次握手，由浏览器发送，告诉服务器，我马上发送了准备接受吧

Tcp 四次挥手

第一次挥手， 浏览器发起，发送给服务器 ，我东西发送完了，你准备关闭吧
第二次挥手，服务器发送，告诉浏览器，我东西接收完了(请求报文) 我准备关闭了 你也准备吧
第三个挥手， 服务器发起，告诉浏览器，我东西发送完了，(响应报文) 我准备关闭了 你也准备吧
第四次挥手， 浏览器发起，告诉浏览器，我东西接受完了，我准备关闭，你也准备吧

你平时做接口测试的过程中发现过哪些bug？

1.常规错误，接口没有实现，没按约定返回结果，边界值处理出错等
2. 输入异常值，(空值，特殊字符，超过约定长度，等) 接口抛错，没做封装处理
3. 输入错误的参数，多输入，少输入的参数，
4. 安全性问题，如明文传输，返回结果含有敏感信息，没对用户身份信息做校验，没做恶意请求拦截等

怎么用css 实现一个三角形？

/* 把上、左、右三条边隐藏掉（颜色设为 transparent） */
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

// 给其他三个边框都设为 透明
div {
    width: 0 ; 
    height: 0 ;
    border: 100px solid red;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

Ajax 的实现步骤

1. 创建ajax 对象
2. 设置请求地址请求信息
3. 发送请求
4. 服务器正在接受数据
5. 服务器接受完成数据了

原型

每次定义函数数据类型的时候，都会天生自带一个porpttype 这个属性， 这个属性指向函数的原型对象

原型链

每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype ）。该原型对象也有一个自己的原型对象( __proto__ ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节  （原型链）

token的原理

1. 客户端输入用户名和密码
2. 服务端来验证这个用户名和密码 如果是正确的 会签发一个token 再把这个 token 返回给客户端  
3. 客户端把这个token 存储起来 
4. 客户端每次像服务端请求资源的时候需要带着服务端签发的 token 
5. 服务端 然后做比较  如果是验证成功 ，就会返回客户端请求的数据

该项目主要是为企业提供了 方便管理所有地区发货量，库存管理，销售额度管理，员工管理 ，地区人员分配的管理系统

负责的模块有: 原材料管理，员工原理这几个模块

“HTTP状态码中302、401、502分别是什么情况？

Vue 项目优化:

cdn 加速器
路由懒加载
v-if 和 v-show 的选择使用
图片懒加载
异步组件
第三方库按需引入
浏览器缓存

react 项目优化

使用代码分割  实现代码分割  让组件按需加载  优化项目 性能
使用 key
shouldconmpoentUpdate
组件尽可能的进行拆分
传参优化
多组件优化

性能优化

使用 防抖  节流
cdn 加速器
图片懒加载
减少回流与重绘
dns 预解析
预加载

socket : 双向通信
可以减少服务器压力   股票交易   聊天室   实时图表更新