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优化