面试题总结

能力要求：

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

5.rem和em的区别

6.span和span之间有间距，怎么消除

父节点设置font-size: 0

7.rem具体是怎么计算的

8.box-sizing：content-box和border-box的区别

9.垂直水平居中的几种方式

二.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.宏任务和微任务，setTimeout设置时间为0

11.promise的原理, promise与async  await的区别，promise有哪几种状态

12.怎么解决跨域

13.js的难点和重点

14.闭包的原理，闭包的优缺点

15.原型链的理解

16.assign

17.作用域的原理

18.js响应式方法和非响应式方法

19.普通函数和箭头函数的区别

20.动态路由

21.懒加载

22.怎么样实现事件委托

23.dom事件流

24.js浏览器缓存机制

25.重绘和回流

三.VUE

1.vue生命周期钩子，created和mounted的区别

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

3.vue作用域

4.computed的性能优化

5.filter&plugin的区别

6.vue响应式原理

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

8.vuex理解action的用法

9.vue双向绑定的原理

10.vue的路由守卫

11.vue单页面和多页面的优缺点

12.vuex怎么实现action和munctions，以及其怎么使用

13.vue事件触发的原理

14.vue  router传参，router的原理

15.watch深度监听

16.vue 通讯的方式，兄弟组件通讯

17.vue性能优化的方法

18.ref和reactive的区别

19.webpack钩子函数，webpack打包优化

20.vue  hooks

21.vuex的工作流程

22.vue样式穿透

四.其他

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

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

3.canvas, raf

4.web安全

5.http的原理

6.三次握手协议

7.axios的封装和使用

8.MVVM框架的理解

9.什么是前端混合开发及其原理

10.前端工程化的理解

11.gitflow工作流

12.前端性能优化

13.浏览器兼容

14.SPA前端框架

15.nodejs

16.nginx服务配置

17.TS

18.Flutter

19.RN

20.前端什么时候要封装组件

21.vue和react的区别

五.手写代码

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.防抖输入框，写一个防抖的组件（能说清自己的代码逻辑）