Marmelab/gremlins.js. High Performance Animations. We’re going to cut straight to the chase.
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. Take a look at this side-by-side slow motion video of the same animation: One is done with transforms, the other isn’t. You can see what a difference it makes, so let’s take look at why that is. From DOM to Pixels in DevTools When you use the Chrome DevTools timeline you should see a pattern similar to this: The process that the browser goes through is pretty simple: calculate the styles that apply to the elements (Recalculate Style), generate the geometry and position for each element (Layout), fill out the pixels for each element into layers (Paint Setup and Paint) and draw the layers out to screen (Composite Layers).
Animating Layout Properties Here are the most popular CSS properties that, when changed, trigger layout: Source: Optimizing your JavaScript game for Firefox OS. When developing on a quad core processor with 16 gigabytes of RAM you can easily forget to consider how it will perform on a mobile device.
This article will detail some best practices and things to consider for moving a game to Firefox OS or any similar hardware target. Making the best of 256 Mb RAM/800 Mhz CPU There are many areas of focus to keep in mind while developing a game. When your goal is to draw 60 times a second, garbage collection and inefficient drawing calls start to get in your way. Let’s start with the basics… Don’t over-optimize This might sound counter-intuitive in an article about game optimization but optimization is the last step; performed on complete, working code. Optimize Drawing Drawing on HTML5 2D canvas is the biggest bottleneck in most JavaScript games, as all other updates are usually just algebra without touching the DOM. Use whole-pixel rendering Sub-pixel rendering occurs when you render objects on a canvas without whole values.
Math.floor vs Math.round vs parseInt vs Bitwise. Bitwise Gems and other optimizations. One of my favorite posts in the last few years was Bitwise Gems in AS3 by Polygonal Labs, an article inspired by Bitwise Operations in C on Gamedev.
This article is a summery of what I’ve learned, applied to Javascript, plus a few other tricks. What’s the wisdom in using bitwise? Bitwise operations can be moderately faster than conventional methods. When processing a lot of data, even a 5% increase in speed can become noticeable. Performance of jQuery selector with context. YSlow for Chrome. The DOM isn’t slow, you are. Edited post-HN: Wow, big response!
WARNING: May contain traces of opinion, and naughty words like ‘shit’ and ‘internet explorer’. Use jQuery for what it is meant for, not everything.If you do stupid shit with the DOM, it will perform poorly.If your web-app is slow, it’s because of your code, not the DOM. Whenever the native versus web argument arises, the biggest issue people usually have with web is performance. They quote figures like ‘60fps‘ and ‘scroll speed’, and, back when browsers were just getting good, i would say “OK, there’s work to be done, but they will get there”, which was met with anything from “Yeah maybe” to “No it will never happen!”. Really? But really, this point is redundant anyway, because when you get down to it, even C is an abstraction on assembly, and if you are an Android developer, you’re coding against Dalvik… which is just as much of an abstraction as JavaScript is anyway!
Accelerated Rendering in Chrome: The Layer Model. Introduction For most web developers the fundamental model of a web page is the DOM.
Rendering is the often obscure process of turning this representation of a page into a picture on the screen. Modern browsers have changed the way rendering works in recent years to take advantage of graphics cards: this is often vaguely referred to as “hardware acceleration”. When talking about a normal web page (i.e. not Canvas2D or WebGL), what does that term really mean? This article explains the basic model that underpins hardware accelerated rendering of web content in Chrome. Big, Fatty Caveats. The Browsers Performance in Dependence of HTML Coding. Everyday dealing with creating and animating web sites I began to notice a very unpleasant peculiarity — one at the same JavaScript code works with the different speed on different sites.
The cause of such strange behavior was found very promptly: speed of a script execution depended directly on the way the site was HTML coded. Searching of solutions of the arised problems was quite exciting but unfortunately I couldn't share the results of my investigations because of the local character of all the solutions. For example a certain site was working slowly but it was enough to change one construction to another for it to work twice quicker. Getting such an explanation the only thing a reader can do is to be happy for me as there is very little practical benefit from the offered solutions. This fact became the first reason of my researching of the up-to-date browsers general problem places.
The second reason is buzz around a new versions of browsers. Let's look at an example.