input处理函数
input处理函数是潜在的影响你app性能的问题,他们可以阻止帧的形成,并且可以造成多余的亦或不必要的layout的工作。
- 避免长时间运行input handler:它们会阻塞scroll
- 不要在input handler 中进行样式的改变
- Debounce 你的处理函数; 存储事件值并且在下一次requestAnimationFrame回调中处理样式改变
避免长时间运行的input处理函数
在最迅速的运行情况的假设下,当一个用户和页面进行交互的时候,页面的合成器线程(a compositor thread)可以获取用户的输入且移动输入的内容。
页面合成器线程在进行相关操作的时候,要求主线程不在进行任何的工作(js,layout和style以及paint都在主线程中进行)
当你使用了输入处理函数,例如 touchstart
, touchmove
, 亦或 touchend
,合成器线程必须等到处理函数执行完成,同样,用户的scroll也会被阻塞。
总之,你要确保用户输入处理函数尽快的被执行,且允许合成器来做这一项工作。
避免在输入处理函数中进行样式操作
输入处理函数,例如scroll和touch,在任何requestAnmationFrame回调函数之前被计划运行。
如果你在一个inout handler里面进行了一个样式的改变,那么在requestAnimationFrame开始的时候将会进行样式计算,然后会读取元素的样式属性在requestAnimationFrame回调函数执行的刚开始,这将触发一个同步的layout!
scroll处理函数去抖动(debounce)
所以你要做的是,在下一个requestAnimationFrame回调函数中去除视觉修改抖动。
function onScroll (evt) { // Store the scroll value for laterz.
lastScrollY = window.scrollY; // Prevent multiple rAF callbacks.
if (scheduledAnimationFrame)
return; scheduledAnimationFrame = true;
requestAnimationFrame(readAndUpdatePage);
} window.addEventListener('scroll', onScroll);
上面代码的好处是在使用input handler的同时不会阻塞scroll亦或touch。
input处理函数的更多相关文章
- 使用 JavaScript 实现名为 flatten(input) 的函数,可以将传入的 input 对象(Object 或者 Array)进行扁平化处理并返回结果
请使用 JavaScript 实现名为 flatten(input) 的函数,可以将传入的 input 对象(Object 或者 Array)进行扁平化处理并返回结果.具体效果如下: const in ...
- Python当中的len(),str(),input(),print()函数当中值得注意的点
在python当中很多时候会用到这三个函数,这也是考试当中十分常见的考点,这里做一些记录: 1.len():用于测量变量当中的字符串/元组等的长度 举个例子: >>> stt=&qu ...
- tp5中的input助手函数
详见手册:https://www.kancloud.cn/manual/thinkphp5/118044
- 让函数的input、output更"函数化"
前言 我们都知道函数的基本形式为:output f(input),且先按这种形式进行input与output的分析,我们的input与output可以有更好的设计方式,而我们的output是选择使用r ...
- Python 内置函数raw_input()和input()用法和区别
我们知道python接受输入的raw_input()和input() ,在python3 输入raw_input() 去掉乐,只要用input() 输入,input 可以接收一个Python表达式作为 ...
- 每天记一些php函数,jQuery函数和linux命令(三)
简介:学习完了php和jQuery之后,对函数的记忆不到位,导致很多函数没记住,所以为了促进自己的记忆,每天花一点时间来写这个博客. 时间:2016-12-21 地点:太原 天气:雨夹雪 一 ...
- linux kernel input 子系统分析
Linux 内核为了处理各种不同类型的的输入设备 , 比如说鼠标 , 键盘 , 操纵杆 , 触摸屏 , 设计并实现了一个对上层应用统一的试图的抽象层 , 即是Linux 输入子系统 . 输入子系统的层 ...
- PHP 正则表达式常用函数使用小结
在PHP中有两套正则表达式函数库.一套是由PCRE(Perl Compatible Regular Expression)库提供的.PCRE库使用和Perl相同的语法规则实现了正则表达式的模式匹配,其 ...
- 13、SQL Server 自定义函数
SQL Server 自定义函数 在SQL Server中不仅可以使用系统函数(如:聚合函数,字符串函数,时间日期函数等)还可以根据需要自定义函数. 自定义函数分为标量值函数和表值函数. 其中,标量值 ...
随机推荐
- ubuntu navicat for mysql破解
ubuntu navicat for mysql破解 ubuntu navicat for mysql只能试用14天. 破解方法:rm -rf /home/cxg/.navicat64/
- vue生命周期的栗子
vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html><html><head><me ...
- 电话号码 【trie树】
电话号码 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描写叙述 给你一些电话号码,请推断它们是否是一致的,即是否有某个电话是还有一个电话的前缀. 比方: Emerg ...
- 查找——图文翔解SkipList(跳跃表)
跳跃表 跳跃列表(也称跳表)是一种随机化数据结构,基于并联的链表,其效率可比拟于二叉查找树(对于大多数操作须要O(logn)平均时间). 基本上.跳跃列表是对有序的链表添加上附加的前进链接,添加是以随 ...
- HDU 5304(Eastest Magical Day Seep Group's Summer-环加外向树生成树计数)[Template:Kirchhoff矩阵]
Eastest Magical Day Seep Group's Summer Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 655 ...
- Markdown基础以及个人经验
前言 DFRobot论坛今日支持Markdown发帖了: [md] your content here [/md] 非常棒,再也不怕辛辛苦苦排个版,一夜回到解放前.这里介绍一下Markdown写博客发 ...
- favico是针对网页图标内容更改
favico.js源码 (function () { var Favico = function (opt) { "use strict"; opt = opt ? opt : { ...
- (updated on Mar 1th)Programming Mobile Applications for Android Handheld Systems by Dr. Adam Porter
本作品由Man_华创作,采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.基于http://www.cnblogs.com/manhua/上的作品创作. Lab - Inte ...
- mysql字符太长警告
用navicateclient,打开相应的数据库. 打开函数.找相应的val()函数,进行编辑,就能够!编辑范围为4000
- C语言预处理条件语句的 与或运算
1.#ifdef 与或运算 #ifdef (MIN) && (MAX) ----------------------------错误使用 #if defined(MIN) & ...