面试小节之字节
作者：互联网
能力要求：
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.防抖输入框，写一个防抖的组件（能说清自己的代码逻辑）
标签：动画,const,字节,元素,小节,name,面试,id,属性 来源： https://blog.csdn.net/diaoweixiao/article/details/120111060