其他分享
首页 > 其他分享> > 面试小节之字节

面试小节之字节

作者:互联网

能力要求:

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