利用好浏览器的空闲时间 --- requestIdleCallback
页面流畅与 FPS页面是一帧一帧绘制出来的,当每秒绘制的帧数(FPS)达到 60 时,页面是流畅的,小于这个值时,用户会感觉到卡顿。 1s 60帧,所以每一帧分到的时间是 1000/60 ≈ 16 ms。所以我们书写代码时力求不让一帧的工作量超过 16ms。 Frame那么浏览器每一帧都需要完成哪些工作?
通过上图可看到,一帧内需要完成如下六个步骤的任务:
requestIdleCallback上面六个步骤完成后没超过 16 ms,说明时间有富余,此时就会执行
从上图也可看出,和 如此一来,假如浏览器一直处于非常忙碌的状态, APIvar handle = window.requestIdleCallback(callback[, options])
示例requestIdleCallback(myNonEssentialWork, { timeout: 2000 }); function myNonEssentialWork (deadline) { // 如果帧内有富余的时间,或者超时 超时的情况,其实就是浏览器很忙,没有空闲时间,此时会等待指定的 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 ...
随机推荐
- ISP PIPLINE (九_1) Denoise 之 space domain denoise
1.空间域噪声类型 1.gauss+possion 2.椒盐噪声(dpc处理已经处理了) 去除空域噪声有哪些方法? 空域噪声一般的思想是对某pixel邻域的pixels进行加权平均. 比如 1.高斯降 ...
- linux gdb
linux gdb linux 测试代码 #include <stdio.h> #include <stdlib.h> static char buf[255]; static ...
- golang 内存模型
1,是什么 是一套规范.内存操作指导 解决多线程编程的 程序的 原子性,有序性,可见性(主要)的问题. 多核操作系统,会存在缓存不一致的情况,说到底是一个同步的问题. 2, 内容 内存模型,除了定义了 ...
- python:os.path模块常用方法
os.path模块主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法.更多的方法可以去查看官方文档:http://docs.python.org/library/os.path.ht ...
- ionic-基于angularjs实现的多级城市选择组件
大家都知道在移动端的选择地区组件,大部分都是模拟IOS选择器做的城市三级联动,但是在IOS上比较好,在Android上因为有的不支持ion-scroll.所以就会出现滚动不会自动回滚到某一个的正中间. ...
- Docker安装及基本操作
系统环境 CentOS Linux release 7.5.1804 (Core) 安装依赖包 更新系统软件 yum update 安装docker yum install docker 启动dock ...
- centos7搭建本地 Remix
由于最近要弄加入某联盟链,是基于ETH 所以要弄一个开发环境 一.准备 安装 nodejs,npm,git 二.安装 git clone https://github.com/ethereum/rem ...
- Nginx的gzip
webpack compression-webpack-plugin => .gz CompressionPlugin = require("compression-webpack- ...
- TCPDF 背景图片透明度
1.TCPDF 背景图片透明度 参考:https://bbs.csdn.net/topics/392364981 效果: 2.画一条线: 2.1方法解说 /*画一条线: x1:线条起点x坐标 y1 ...
- python 中间件
中间件一.什么是中间件 中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于在全局范围内改变Django 的输入和输出.每个中间件组件都负责做一些特定的功 ...