前端面试题-笔记1

1、transfrom、translate、tranition分别是什么属性？CSS中常用的实现动画方式

transform是指变换、变形，是CSS3的一个属性，和width,height属性一样；

translate是transform的属性值，是指元素进行2D（3D）维度上位移和范围变换

transition是指过渡效果，往往理解成简单的动画，需要有触发条件。

这里可以补充下transition和animation的比较，前者一般定义开始结束两个状态，需要触发条件；而后者引入了关键帧、速度曲线，播放次数等概念，更符合动画的定义，且无需触发条件

2、介绍一下raf(requestAnimationFrame)

专门用来做动画，不卡顿，用法和setTimeout一样。对rAF的阐述MDN资料

定时器一直是js动画的核心技术，但它们不够精准，因为定时器时间参数是指将执行代码放入UI线程队列中等待的时间，如果前面有其他任务队列执行时间过长，则会导致动画延迟，效果不精确等问题

所以处理动画循环的关键是知道延迟多长时间合适：时间要足够短，才能让动画看起来比较柔滑平顺，避免多余性能损耗；时间要足够长，才能让浏览器准备好变化渲染。这个时候rAF会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成。

3、javascript的垃圾回收机制讲一下

定义：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。

像C这样的编程语言，具有低级内存管理原语，如malloc()和free().开发人员使用这些原语显式地对操作系统的内存进行分配和释放。

而javascript在创建对象（对象，字符串等）时会为他们分配内存，不再使用对时会“自动”释放内存，这个过程称为垃圾收集。

内存生命周期中的每一个阶段；

分配内存-内存是由操作系统分配，它允许您的程序使用它。在低级语言（例如C语言）中，这是一个开发人员需要自己处理的显式执行的操作。然而，在高级语言中，系统会自动为你分配内在。

使用内存-这是程序实际使用之前分配的内存，在代码中使用分配的变量时，就会发生读和写操作。

释放内存-释放所有不再使用的内存，使之成为自由内存，并可以被重利用。与分配内存操作一样，这一操作在低级语言中也是需要显式地执行

四种常见地内存泄漏：全局变量，未清除地定时器，闭包，以及dom的引用

1.全局变量不用var声明的变量，相当于挂载到window对象上。如：b=1;解决：使用严格模式

2.被遗忘的定时器和回调函数

3.闭包

4.没有清理的DOM元素引用

4、对前端性能优化的七大手段

1.减少请求数量

2.减小资源大小

3.优化网络连接

4.优化资源加载

5.减少重绘回流

6.性能更好的api

7.webpack优化