大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
文章目录
动画卡顿分析及解决方法
一、卡顿原因分析
我们所使用的设备大多数的刷新频率都是60HZ，也就是每秒钟会有60个画面来组成一个完整的动画来进行展示。这就要求我们的浏览器对每一帧动画的渲染都在16ms内完成（1秒等于1000ms），一旦渲染时间超过了这个时间段，用户在观看时就会感觉到卡顿。通常，一般人可以分辨的频率也在60HZ左右，所以经常会有人提起打游戏时卡顿，也就是游戏掉帧。
二、优化的一些方法
1.JavaScript的相关优化：优化JavaScript的执行效率
- 使用
requestAnimationFrame代替setTimeout和setInterval
requestAnimationFrame是window对象的一个方法，他会告诉浏览器执行一个动画，并要求浏览器在下次重绘之前调用指定的回调函数更新动画。具体参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
js是单线程执行，所以为了避免一些执行时间过长的任务会阻塞整个任务的执行，js中引入了异步队列的概念。执行程序是会首先执行主任务队列中的代码，当主任务队列为空时才执行异步队列中的任务。所以
setTimeout和setInterval无法保证回调函数的执行时机，可能会在一帧之内执行多次导致多次页面渲染，浪费CPU资源甚至产生卡顿。
- DOM无关的耗时操作放到Web Worker中
Web Worker的作用在于为JavaScript创建了多线程环境，Web Worker线程在后台运行，受主线程控制，两者互不干扰。Web Worker线程负担高延迟且UI无关的任务，主线程负责UI交互就会相对流畅。
2.降低样式选择器的复杂度，减少需要计算样式的元素个数
3.使用flex布局替代原有的老式布局。
flexbox布局更加高效。在能用flexbox布局的项目中，尽量用flexbox布局。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/183330.html原文链接：https://javaforall.net
