利用好浏览器的空闲时间 --- requestIdleCallback
页面流畅与 FPS页面是一帧一帧绘制出来的,当每秒绘制的帧数(FPS)达到 60 时,页面是流畅的,小于这个值时,用户会感觉到卡顿。 1s 60帧,所以每一帧分到的时间是 1000/60 ≈ 16 ms。所以我们书写代码时力求不让一帧的工作量超过 16ms。 Frame那么浏览器每一帧都需要完成哪些工作?
通过上图可看到,一帧内需要完成如下六个步骤的任务:
requestIdleCallback上面六个步骤完成后没超过 16 ms,说明时间有富余,此时就会执行
从上图也可看出,和 如此一来,假如浏览器一直处于非常忙碌的状态, API
示例
超时的情况,其实就是浏览器很忙,没有空闲时间,此时会等待指定的 cancelIdleCallback与 总结一些低优先级的任务可使用 因为它发生在一帧的最后,此时页面布局已经完成,所以不建议在 Promise 也不建议在这里面进行,因为 Promise 的回调属性 Event loop 中优先级较高的一种微任务,会在 参考 |
利用好浏览器的空闲时间 --- requestIdleCallback的更多相关文章
- 移动WebApp利用Chrome浏览器进行调试
详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net. ...
- 系统空闲时间判断&命名验证
一.系统空闲时间判断 需要一个自动登录注销的功能,当鼠标移动和或者键盘输入的时候认为当前用户在线,否则过了设置时间就自动退出.好在前辈们留下了这样的一个类: MouseKeyBoardOperate: ...
- mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案
在连接字符串中 添加设置节点 ConnectionLifeTime(计量单位为 秒).超过设定的连接会话 会被杀死! Connection Lifetime, ConnectionLifeTime ...
- Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法:
Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法: ------------------------------------------------------------ ...
- 使用Oracle PROFILE控制会话空闲时间
客户想实现对会话空闲时间的控制,下面是做的一个例子.Microsoft Windows [版本 6.1.7601] 版权所有 (c) 2009 Microsoft Corporation.保留所有权利 ...
- Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗?
什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...
- C# 获取操作系统空闲时间
获取系统鼠标和键盘没有任何操作的空闲时间 public class CheckComputerFreeState { /// <summary> /// 创建结构体用于返回捕获时间 /// ...
- 查看MySQL 连接信息--连接空闲时间及正在执行的SQL
MySQL 客户端与MySQL server建立连接后,就可以执行SQL语句了. 如何查看一个连接上是否正在执行SQL语句,或者连接是否处于空闲呢? 下面我们做下测试. 1.查看连接的空闲时间 首先看 ...
- oracle限制一个用户空闲时间
alter system set resource_limit = true; create profile idletime limit idle_time 3; alter user outln ...
随机推荐
- 精读《Function VS Class 组件》
1. 引言 为什么要了解 Function 写法的组件呢?因为它正在变得越来越重要. 那么 React 中 Function Component 与 Class Component 有何不同? how ...
- DW1000 用户手册中文版 附录2 IEEE-802.15.4 MAC层
由于已经在wode中排版无法直接复制到博客中,故本节博客发布使用了图片. 论坛可下载PDF http://bphero.com.cn/forum.php?mod=viewthread&tid ...
- maven项目如何手动打包
1.确定打包对象:dubbo-admin 2.进入打包对象目录,复制目录路径(D:\H\dubbox-master\dubbo-admin). 可以看到该对象为典型的maven目录,此时没有“targ ...
- python学习:字符串
字符串 #字符串操作# 对应操作:# 1.重复输出字符串# print('hello'*2)# 2.[],[:]通过索引获取字符串中字符,这里和列表的切片操作是相同的,具体内容见列表#print('h ...
- vue的父子组建之间的通信(-),基于props和$emit之间的传递
对于vue而言,以为其核心思想为前端组建化.所以组建之间的通信必不可少. 相信接触过Angularjs的童鞋都知道angularjs的控制器之间的通信机制. 1:父传子:官方的$broadcast() ...
- .NET题目(收集来自网络)
1: .NET和c#有什么区别? 答: .NET一般是指.NET FrameWork框架,是一种平台,一种技术 c#是一种编程语言,是可以基于.NET平台的应用 2: c#中的委托是什么?事件是不是一 ...
- 20175324 mycp
具体描述: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内容 ...
- List集合和JSON互转工具类
public class JsonListUtil { /** * List<T> 转 json 保存到数据库 */ public static <T> String list ...
- Maven插件一览
maven-assembly-plugin 将对应模块依赖在 mvn package 阶段全部打到一个 jar 包里面: java -cp xx.jar package.name.MainClass ...
- oracle启动服务和监听
1.故障问题:tomcat显示启动oracle数据库失败,数据库服务启动正常 操作1:重启tomcat查看错误信息 2:重启数据库服务 命令: (1) 启动Oracle服务 C:\Users\Admi ...