input处理函数是潜在的影响你app性能的问题,他们可以阻止帧的形成,并且可以造成多余的亦或不必要的layout的工作。

  • 避免长时间运行input handler:它们会阻塞scroll
  • 不要在input handler 中进行样式的改变
  • Debounce 你的处理函数; 存储事件值并且在下一次requestAnimationFrame回调中处理样式改变

避免长时间运行的input处理函数

在最迅速的运行情况的假设下,当一个用户和页面进行交互的时候,页面的合成器线程(a compositor thread)可以获取用户的输入且移动输入的内容。

页面合成器线程在进行相关操作的时候,要求主线程不在进行任何的工作(js,layout和style以及paint都在主线程中进行)

当你使用了输入处理函数,例如 touchstarttouchmove, 亦或 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处理函数的更多相关文章

  1. 使用 JavaScript 实现名为 flatten(input) 的函数,可以将传入的 input 对象(Object 或者 Array)进行扁平化处理并返回结果

    请使用 JavaScript 实现名为 flatten(input) 的函数,可以将传入的 input 对象(Object 或者 Array)进行扁平化处理并返回结果.具体效果如下: const in ...

  2. Python当中的len(),str(),input(),print()函数当中值得注意的点

    在python当中很多时候会用到这三个函数,这也是考试当中十分常见的考点,这里做一些记录: 1.len():用于测量变量当中的字符串/元组等的长度 举个例子: >>> stt=&qu ...

  3. tp5中的input助手函数

    详见手册:https://www.kancloud.cn/manual/thinkphp5/118044

  4. 让函数的input、output更"函数化"

    前言 我们都知道函数的基本形式为:output f(input),且先按这种形式进行input与output的分析,我们的input与output可以有更好的设计方式,而我们的output是选择使用r ...

  5. Python 内置函数raw_input()和input()用法和区别

    我们知道python接受输入的raw_input()和input() ,在python3 输入raw_input() 去掉乐,只要用input() 输入,input 可以接收一个Python表达式作为 ...

  6. 每天记一些php函数,jQuery函数和linux命令(三)

    简介:学习完了php和jQuery之后,对函数的记忆不到位,导致很多函数没记住,所以为了促进自己的记忆,每天花一点时间来写这个博客. 时间:2016-12-21   地点:太原    天气:雨夹雪 一 ...

  7. linux kernel input 子系统分析

    Linux 内核为了处理各种不同类型的的输入设备 , 比如说鼠标 , 键盘 , 操纵杆 , 触摸屏 , 设计并实现了一个对上层应用统一的试图的抽象层 , 即是Linux 输入子系统 . 输入子系统的层 ...

  8. PHP 正则表达式常用函数使用小结

    在PHP中有两套正则表达式函数库.一套是由PCRE(Perl Compatible Regular Expression)库提供的.PCRE库使用和Perl相同的语法规则实现了正则表达式的模式匹配,其 ...

  9. 13、SQL Server 自定义函数

    SQL Server 自定义函数 在SQL Server中不仅可以使用系统函数(如:聚合函数,字符串函数,时间日期函数等)还可以根据需要自定义函数. 自定义函数分为标量值函数和表值函数. 其中,标量值 ...

随机推荐

  1. ubuntu navicat for mysql破解

    ubuntu navicat for mysql破解 ubuntu navicat for mysql只能试用14天. 破解方法:rm -rf /home/cxg/.navicat64/

  2. vue生命周期的栗子

    vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html><html><head><me ...

  3. 电话号码 【trie树】

    电话号码 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描写叙述 给你一些电话号码,请推断它们是否是一致的,即是否有某个电话是还有一个电话的前缀. 比方: Emerg ...

  4. 查找——图文翔解SkipList(跳跃表)

    跳跃表 跳跃列表(也称跳表)是一种随机化数据结构,基于并联的链表,其效率可比拟于二叉查找树(对于大多数操作须要O(logn)平均时间). 基本上.跳跃列表是对有序的链表添加上附加的前进链接,添加是以随 ...

  5. HDU 5304(Eastest Magical Day Seep Group&#39;s Summer-环加外向树生成树计数)[Template:Kirchhoff矩阵]

    Eastest Magical Day Seep Group's Summer Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 655 ...

  6. Markdown基础以及个人经验

    前言 DFRobot论坛今日支持Markdown发帖了: [md] your content here [/md] 非常棒,再也不怕辛辛苦苦排个版,一夜回到解放前.这里介绍一下Markdown写博客发 ...

  7. favico是针对网页图标内容更改

    favico.js源码 (function () { var Favico = function (opt) { "use strict"; opt = opt ? opt : { ...

  8. (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 ...

  9. mysql字符太长警告

    用navicateclient,打开相应的数据库. 打开函数.找相应的val()函数,进行编辑,就能够!编辑范围为4000

  10. C语言预处理条件语句的 与或运算

    1.#ifdef 与或运算 #ifdef  (MIN)  && (MAX)  ----------------------------错误使用 #if  defined(MIN)  & ...