大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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布局。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/183330.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...