标签：动画 const 字节 元素 小节 name 面试 id 属性
能力要求：
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。