对用户输入事件的处理去抖动

   <p>用户输入事件处理函数是一个可能会导致web应用性能问题的因素，因为它们在运行时会阻塞帧的渲染，并且会导致额外且不必要的布局的发生。</p>    <h2>TL;DR</h2>    <ul>     <li>避免使用运行时间过长的输入事件处理函数，它们会阻塞页面的滚动</li>     <li>避免在输入事件处理函数中修改样式属性</li>     <li>对输入事件处理函数去抖动，存储事件对象的值，然后在requestAnimationFrame回调函数中修改样式属性</li>    </ul>    <h2>避免使用运行时间过长的输入事件处理函数</h2>    <p>在理想情况下，当用户在设备屏幕上触摸了页面上某个位置时，页面的渲染层合并线程将接收到这个触摸事件并作出响应，比如移动页面元素。这个响应过程是不需要浏览器主线程的参与的，也就是说，不会导致JavaScript、布局和绘制过程的发生。</p>    <p><img alt="Lightweight scrolling; compositor only." src="https://simg.open-open.com/show/3a2b8dcd856ddf3f3b1a08af671a6dd5.jpg"></p>    <p>但是，如果你对这个被触摸的元素绑定了输入事件处理函数，比如<code>touchstart</code>、<code>touchmove</code>或者<code>touchend</code>，那么渲染层合并线程必须等待这些被绑定的处理函数的执行完毕之后才能被执行。因为你可能在这些处理函数中调用了类似<code>preventDefault()</code>的函数，这将会阻止输入事件（touch/scroll等）的默认处理函数的运行。事实上，即便你没有在事件处理函数中调用<code>preventDefault()</code>，渲染层合并线程也依然会等待，也就是用户的滚动页面操作被阻塞了，表现出的行为就是滚动出现延迟或者卡顿（帧丢失）。</p>    <p><img alt="Heavy scrolling; compositor is blocked on JavaScript." src="https://simg.open-open.com/show/bc26f4e14f815f0092c2638a9ed2459c.jpg"></p>    <p>简而言之，你必须确保对用户输入事件绑定的任何处理函数都能够快速执行完毕，以便腾出时间来让渲染层合并线程来完成它的工作。</p>    <h2>避免在输入事件处理函数中修改样式属性</h2>    <p>输入事件处理函数，比如scroll/touch事件的处理，都会在<code>requestAnimationFrame</code>之前被调用执行。</p>    <p>因此，如果你在上述输入事件的处理函数中做了修改样式属性的操作，那么这些操作会被浏览器暂存起来。然后在调用<code>requestAnimationFrame</code>的时候，如果你在一开始做了读取样式属性的操作，那么根据“<a href="http://www.open-open.com/lib/view/open1463887456287.html">避免大规模、复杂的布局</a>”中所述，你将会触发浏览器的强制同步布局过程！</p>    <p><img alt="Heavy scrolling; compositor is blocked on JavaScript." src="https://simg.open-open.com/show/3db420f97f84f8a526909a42a03355e7.jpg"></p>    <h2>对滚动事件处理函数去抖动</h2>    <p>有一个方法能同时解决上面的两个问题：对样式修改操作去抖动，控制其仅在下一次<code>requestAnimationFrame</code>中发生：</p>    <pre>  <code>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);</code></pre>    <p>这么做还有一个额外的好处，就是能使你的事件处理函数变得轻量。这很关键，因为它能使包含复杂计算代码的页面也能快速响应scroll/touch事件！</p>    <p> </p>    <p>来源：https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers?hl=zh-cn</p>    <p> </p>