JS动画卡顿分析_学会java就能自己设计软件吗

JS动画卡顿分析_学会java就能自己设计软件吗文章目录动画卡顿分析及解决方法一、卡顿原因分析二、优化的一些方法动画卡顿分析及解决方法一、卡顿原因分析我们所使用的设备大多数的刷新频率都是60HZ,也就是每秒钟会有60个画面来组成一个完整的动画来进行展示。这就要求我们的浏览器对每一帧动画的渲染都在16ms内完成(1秒等于1000ms),一旦渲染时间超过了这个时间段,用户在观看时就会感觉到卡顿。通常,一般人可以分辨的频率也在60HZ左右,所以经常会有人提起打游戏时卡顿,也就是游戏掉帧。二、优化的一些方法1.JavaScript的相关优化:优化Jav

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

动画卡顿分析及解决方法

一、卡顿原因分析

我们所使用的设备大多数的刷新频率都是60HZ,也就是每秒钟会有60个画面来组成一个完整的动画来进行展示。这就要求我们的浏览器对每一帧动画的渲染都在16ms内完成(1秒等于1000ms),一旦渲染时间超过了这个时间段,用户在观看时就会感觉到卡顿。通常,一般人可以分辨的频率也在60HZ左右,所以经常会有人提起打游戏时卡顿,也就是游戏掉帧。

二、优化的一些方法

1.JavaScript的相关优化:优化JavaScript的执行效率

  • 使用requestAnimationFrame代替setTimeoutsetInterval

requestAnimationFrame是window对象的一个方法,他会告诉浏览器执行一个动画,并要求浏览器在下次重绘之前调用指定的回调函数更新动画。

具体参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

js是单线程执行,所以为了避免一些执行时间过长的任务会阻塞整个任务的执行,js中引入了异步队列的概念。执行程序是会首先执行主任务队列中的代码,当主任务队列为空时才执行异步队列中的任务。所以 setTimeoutsetInterval无法保证回调函数的执行时机,可能会在一帧之内执行多次导致多次页面渲染,浪费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账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号