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中不仅可以使用系统函数(如:聚合函数,字符串函数,时间日期函数等)还可以根据需要自定义函数. 自定义函数分为标量值函数和表值函数. 其中,标量值 ...
随机推荐
- iOS真机测试,为Provisioning添加设备
------------添加设备到provisioning------------- 1,登陆https://developer.apple.com/devcenter/ios/index.actio ...
- Android重写view时onAttachedToWindow () 和 onDetachedFromWindow ()
在重写View的时候,会遇到这两个方法 protected void onAttachedToWindow() Description copied from class: View This is ...
- procomm plus
procomm plus这是查看串口数据的软件.
- 1、CRM2011编程实战——清空指定页签以下的全部选项,并对页签以下的指定控件进行操作
需求:当页面载入时,"呼叫编号"保持不变,"任务号"自己主动更新."接报时间"和"发生日期"自己主动设置为当天日期和时间 ...
- Windows 无法卸载IE9怎么办
1 如下图所示,使用自带的卸载工具无法卸载IE9 运行命令提示符,粘贴下面的命令 FORFILES /P %WINDIR%\servicing\Packages /M Microsoft-Window ...
- SQL_字符操作函数
原创作品.出自 "深蓝的blog" 博客.欢迎转载,转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...
- 安装下载MySQL
下载MySQL的地址:下面两个都行 http://dev.mysql.com/downloads/windows/ http://dev.mysql.com/downloads/installer/5 ...
- 解读Unity中的CG编写Shader系列1——初识CG
CG=C for Graphics 用于计算机图形编程的C语言超集 前提知识点: 1.CG代码必须用 CGPROGRAM ... ENDCG括起来 2.顶点着色器与片段着色器的主函数名称可任意,但须 ...
- ruby on rails模拟HTTP请求错误发生:end of file reached
在文章 Ruby On Rails中REST API使用演示样例--基于云平台+云服务打造自己的在线翻译工具 中,利用ruby的Net::HTTP发起http请求訪问IBM Bluemix上的sour ...
- jmeter后置处理器之正則表達式提取器
新浪围脖>@o蜗牛快跑o 使用这个组件时,注意使用带分组的正則表達式 使用正则分组方便提取干净数据.以免再次处理数据字符串 正則表達式在线工具推荐:点击打开链接 正則表達式语法參考:点击打 ...