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)


相关推荐

  • 【Qt】下载与安装「建议收藏」

    【Qt】下载与安装「建议收藏」Qt下载与安装很简单,大家按照下面的步骤一步步安装就可以了。

  • matlab根据数据画三维图_matlab导入三组数据画三维图

    matlab根据数据画三维图_matlab导入三组数据画三维图首先先分析对象。将数据利用matlab画出图,最开始是导入数据,然后处理数据,最后将处理的数据画出来。所以我将它分为三个步骤。第一步:导入数据如果是mat数据。可以直接load 如果是txt数据。可以用txtread 如果是excel数据。可以用xlsread详细的,可以参考https://blog.csdn.net/blueskyjian/article/details/728…

    2022年10月11日
  • 关于.gitignore不起作用「建议收藏」

    关于.gitignore不起作用「建议收藏」由于公司和家里的as版本不同,倒腾了好久,但是代码到本地后build.gradle等文件做了修改,为了不影响公司版本,故家里的需要忽略这些文件的修改,想到的就是加gitignore配置,直接添加不起效果,找到如下办法:有时我们发现添加.gitignore文件后并没有忽略我们想要忽略的文件,解决方法就是清除一下缓存,原因gitignore对已经追踪(track)的文件无效,清除缓存后文件将以未追

    2022年10月21日
  • Java 实体对象转Map[通俗易懂]

    Java 实体对象转Map[通俗易懂]为了满足项目的参数传递,需要将实体对象转成map以满足业务需求,下面是实体对象转map的工具类。ObjectToMap.javaimportjava.util.Map;importjava.util.HashMap;importjava.lang.reflect.Field;publicclassObjectToMap{publicstaticMap<String,String>convert(Objectobject)throwsExcept.

  • 最新仿金蝶电商ERP进销存系统软件源码 销售库存仓库财务管理收银系统网络版「建议收藏」

    最新仿金蝶电商ERP进销存系统软件源码 销售库存仓库财务管理收银系统网络版「建议收藏」源码说明:超强的工作流系统,强大的可视化工作流编辑器,灵活自定义表单设计,充分实现企业基于工作流的各项业务管理,与其他模块数据(如HRM等)完美结合。全面综合的任务系统,实现基于信息录入、单据管理、业务协作、工作流转、任务提醒、统计分析等的智能管理。所有单据均支持上传附件功能;且报价单、销售合同、采购订单、发货出库、入库单、派工单等所有模板均支持自定义编辑打印。集成功能实用的CRM系统、进销存系统、生产ERP系统,实现对客户销售、供应商采购、产品物料、库存统计、生产监控等的精细化管理,直观强大的销售

  • XPath解析中的 ‘Element a at 0x5308a80’是什么

    XPath解析中的 ‘Element a at 0x5308a80’是什么话不多说,直接上代码以链家网为例,解析网页打印出来的东西居然不是想象中的html文件,而是“<Elementhtmlat0x52e5c10>”这么个东西。这个东西其实是一个元素,后面会介绍到。现在还是说说怎么把这个东西变成我们能看懂的html内容吧。fromlxmlimportetreeimportrequestsfromlxml.htmlimport…

发表回复

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

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