{"id":390,"date":"2017-07-28T17:41:10","date_gmt":"2017-07-28T14:41:10","guid":{"rendered":"https:\/\/iamakulov.com\/notes\/?p=390"},"modified":"2017-08-23T23:50:06","modified_gmt":"2017-08-23T20:50:06","slug":"resize-scroll","status":"publish","type":"post","link":"https:\/\/iamakulov.com\/notes\/resize-scroll\/","title":{"rendered":"How to optimize resizing or scrolling"},"content":{"rendered":"

If you listen for events like mousewheel<\/code>, resize<\/code> or scroll<\/code>, your page could get slow. These events are generated multiple times per second, and if the event handler takes too much time, the browser won\u2019t catch with redrawing the page.<\/p>\n

This is what to do if you have such problem.<\/p>\n

Throttle#<\/a><\/h1>\n
\n
CSS-Tricks\u2019 article on throttling<\/a><\/div>\n
\n

By default, the event handler is executed on each event. Sometimes, when the handler is taking a long time, it might be acceptable to delay its execution to once per 100-200 ms. This \u201cdelaying\u201d can be achieved with the _.throttle<\/code> utility method<\/a>.<\/p>\n<\/div>\n<\/div>\n

When is this useful?<\/em> E.g. if you recalculate the page layout each time the browser resizes. If recalculating layout takes a long time, you could perform it less often.<\/p>\n

Before and after:<\/em><\/p>\n

\/\/ Before\r\nwindow.addEventListener('resize', () => {\r\n  calculateLayout(); \/\/ Takes 20 ms\r\n});\r\n\r\n\/\/ After\r\nwindow.addEventListener('resize', _.throttle(() => {\r\n  calculateLayout(); \/\/ Still takes 20 ms, but now runs once in 100 ms\r\n}, 100));\r\n<\/code><\/pre>\n
passive: true#<\/a><\/h1>\n
\n
About passive: true<\/code> on GitHub<\/a><\/div>\n
\n
passive: true<\/code> a flag that\u2019s passed into addEventListener<\/code>. It tells the browser that the event handler will never call event.preventDefault()<\/code>. Using this knowledge, the browser can start doing the event action (e.g. scrolling) without waiting for the JS code to finish. This makes the page smoother.<\/p>\n<\/div>\n<\/div>\n
\n
Currently, only touchstart<\/code>, touchmove<\/code> and mousewheel<\/code><\/a> event handlers could be made passive.<\/div>\n
\n
When is this useful?<\/em> E.g. if you redraw the parallax background on each touch or scroll event. Most likely, it won\u2019t be a problem if the browser starts scrolling before the background finishes redrawing. If so, such event handler could be made passive.<\/p>\n<\/div>\n<\/div>\n
Before and after:<\/em><\/p>\n
\/\/ Before:\r\nwindow.addEventListener('touchstart', updateBackground)\r\n\r\n\/\/ After:\r\nwindow.addEventListener('touchstart', updateBackground, {\r\n  passive: true\r\n})\r\n<\/code><\/pre>\n
Use alternative APIs#<\/a><\/h1>\n
For some common tasks, there are alternative APIs that help to perform the task easier and with better performance:<\/p>\n