#requestanimationframe

[10basetom]

Let's take requestAnimationFrame to the next level and use it for debouncing resize events. We'll also dig into how to debug performance and smooth out your code.

From my experience I don't see any benefits from using requestAnimationFrame for dragging -- it will just make your code more complicated. One of the benefits of requestAnimationFrame is this:

"...only call rAF when you have visual updates to do."

requestAnimationFrame doesn't make much sense for mousemove in the context of dragging because at every mousemove event you will be be doing a re-render anyway, so there is no optimization potential by using requestAnimationFrame.

[10basetom]

Keep in mind that console.log() is very heavy, at least in Chrome. A loop containing console.log() vs. without can have a noticeable impact on performance.

[buddhasson]

In this article, Addy Osmani and Paul Lewis discuss how to improve the paint performance of your websites and Web apps.

[dragoni]

Going to give FastDom a spin

Layout Thrashing is when JavaScript violently writes, then reads, from the DOM, multiple times causing document reflows.

FastDom is a small library I wrote to provide a common interface for batching of DOM read/write work. It massively speeds up DOM work using similarrequestAnimationFrame techniques described above.

Implications of using FastDom

By using FastDom you are making all DOM tasks asynchronous, that means you can't always make assumptions as to what state the DOM will be in. Work that was previously sync, may not have completed now it is async.

To work around this I like to use an event system to be more explicit about when work has finished, and responding only when I know DOM work I'm dependent on is complete.

Also we are increasing the amount of code we have to write to effectively get the same amount of work done. Personally I think this is a small price to pay for a dramatic increase in performance.

h/t Hacker News

[kazu69]

[kazu69]