Great in-depth article by Paul Bakaus on the perception of vision, frame and refresh rate, motion blur, and TV displays. Worth a read as it gives on one a great insight in concepts such as 60fps and jank The Illusion of Motion → Related: The Runtime Performance Checklist
Tag Archives: performance
CSS `will-change` Property
#header { will-change: opacity; } Modern CSS renderers perform a number of complex optimizations in order to render webpages quickly and efficiently. Unfortunately, employing these optimizations often has a non-trivial start-up cost, which can have a negative impact on the responsiveness of a page. The will-change property defined in the CSS Will Change Module allows …
Velocity.js – Accelerated JavaScript animation
Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow. Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, sequences, and scrolling. Velocity is the best of jQuery, jQuery UI, and …
Continue reading “Velocity.js – Accelerated JavaScript animation”
Parallax Done Right
Parallax has become, for better or worse, an increasingly popular web trend. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. A good refresher on how to do high performance animations Parallax Done Right → Related: High Performance Animations → 2D transform’s translate() vs …
60fps scrolling using pointer-events: none
Rendering Performance Case Studies
jquery.unevent.js
A jQuery/Zepto plugin I’ve been using a lot lately to debounce (= attach with delay) event handlers. To be applied on scroll events for example, as you don’t want one long single scroll to pull down the performance of your webpage by constantly triggering the attached handling function. $(window).on(‘scroll’, function(e) { // update stuff *after* …
PHP is meant to die
PHP is meant to die. It doesn’t mean that it will disappear into nothingness, it just means that your PHP code can’t run forever; The core PHP feature follows the most simple programming workflow: get input data, process it, display the output, and die. … If you want to keep [PHP] processes running forever they …
High Performance Animations
Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. True story. A recent animation-heavy prototype I once made was, at first, quickly thrown together by animating top/left, scrollTop …
Gone In 60fps – Making A Site Jank-Free
To highlight how widespread rendering is a performance bottleneck, we’re going to walk through a detailed case study of Pinterest.com. Learn about common paint issues in modern sites and equally as importantly — how to diagnose them. We’ll also look at changes Pinterest made to get up to a 40% improvement in rendering times. A …