能力要求：

1.有一定项目经验，能够呈现出项目中的亮点，对项目中使用到的技术有自己的见解

2.能够答对大部分基础问题，熟悉前端基础知识

3.提炼个人技术亮点，思维反应能力

4.对代码抽象设计能力，需要胜任日常功能开发对代码质量的最低要求

5.了解主流技术栈，代码能力，沟通能力

6.对基础有一定思考，组件化的思考，对如何定位问题的方法论

面试题：

一.CSS

1.盒子模型（清晰概念）

盒子模型可以对元素进行布局，包括实际内容，内边距，边框，外边距；

盒子模型分为两种，一种是W3C标准盒子模型（width和height只包含content，不包含padding和border），一种是IE标准盒子模型（width和height包含content、padding和border），

2.Flex布局

通过修改父容器的display属性，而让父元素成为一个flex容器，从而可以控制子元素的排列方式；

flex布局不会让div脱离文档流，flex布局主要由容器属性和项目属性构成

3.怎么实现动画

1) javascript实现动画（主要是通过setInterval或者setTimeout持续改变某个元素的css来实现）

=>会导致页面频繁重绘重排，消耗性能，一般用在桌面浏览器，在移动端使用会有明显卡顿

2）svg（由svg元素内部属性控制）=>原生绘制各种图形，能被js调用，svg是对图形的渲染，元素比较多或复杂的渲染的比较慢

3）transation过渡动画（不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的效果过渡，而不是马上改变）

=> 在移动端使用transation会让页面变慢甚至卡顿

4）animation（算是真正意义上的css动画，通过关键帧和循环次数的控制，关键帧的状态是通过百分比来控制的）=>CSS3最大的优势就是摆脱了js的控制，并能利用硬件加速实现复杂动画效果

5）canvas动画（完全通过js实现，适用于比较复杂的动画）

4.响应式布局的几种方法

1）媒体查询

2）百分比%

3）vw/vh

4）rem

二.JS

1.重绘重排

浏览器渲染网页分为下面几个步骤：

1）解析HTML  2)构建DOM树   3）构建渲染树   4）绘制渲染树

DOM的变化改变了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为重排；

完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是重绘

2.ES6的新特性

1）向对象添加属性（克隆对象，并向克隆对象中添加附加属性）

eg.const user = {id: '222', name: '张三'} 

     const userWithPwd = {...user, pwd: '123456'}

     // 打印出{id: '222', name: '张三', pwd: '123456'}

2) 合并对象

eg. const user1 = {id: 1, name: '张三'}

      const user2 = {id: 2, pwd: 123456}

     // 打印出{id: 2, name: '张三', pwd: 123456}

eg.const user1 = {id: 1, name: '张三'}

     const user2 = {...user1, id: 1, pwd: 123456}

     // 打印出{id: 1, name: '张三', pwd: 123456}

3）删除对象的属性

4）动态删除属性

5）调整对象属性的位置

6）默认属性

7）重命名对象的属性

8）条件属性

3.箭头函数的this指向

作用域指向的对象

4.面向对象的三个基本特征

封装（把客观事物封装成抽象类，并且类可以把自己的数据和方法只让可信的类和对象操作）

继承（使现有类的所有功能，在无须重新编写原来类的情况下对这些功能进行扩展）

多态

5.跨域

6.深拷贝给多种实现方式，注意实现细节，知道每种方式能处理的场景

7.节流函数

8.事件循环机制（promise）

9.webpack打包原理 

10.宏任务和微任务

11.promise的原理

12.怎么解决跨域

三.VUE

1.vue生命周期

2.nextTick干什么的，nextTick执行时机

3.vue作用域

4.computed的性能优化

5.filter&plugin的区别

6.vue响应式原理

7.怎么解决vue页面刷新数据丢失的问题

8.vuex理解action的用法

9.vue双向绑定的原理

四.其他

1.移动端开发和PC端开发的区别

2.框架的的内部实现原理

3.canvas, raf

4.web安全

五.手写代码

1.实现一个自定义bind方法（要有思路）

2.name = 'a'

   const obj = {name: 'b', fn: () => {return  this.name}}

   const fn = obj.fn

   const fn2 = obj.fn2

   console.log(obj.fn())

   console.log(fn())

   console.log(obj.fn2())

   console.log(fn2())

3.JS操纵元素位置

4.防抖输入框，写一个防抖的组件（能说清自己的代码逻辑）