jquery - CSS3 filter performance & CPU usage: Why do certain filters tax the CPU? -
consider demo david nuon:
http://zunostudios.com/demos/css32014-demos/filters.html
as david notices in post:
you'll notice more sliders right, less responsive page becomes.
and true. after altered image, saw how cpu began work lot.
what not answer myself why after css modifications page unresponsive. animations 2fps.
if job done why keeps working?
edit: of xengravity see maybe after filters right seems gpu following @ insane rate:
1.- takes original image.
2.- modifies (math calculations, blabla, etc).
but starting original image. maybe thats why seems slow....
edit: added demo snippet future posterity
var update_filter = function () { var styles = [ 'grayscale( ' + parseint($('#grayscale').val()) * .01 + ')', 'blur( ' + $('#blur').val() + 'px)', 'sepia( ' + $('#sepia').val() + '%)', 'brightness( ' + parseint($('#brightness').val()) * .01 + ')', 'contrast( ' + $('#contrast').val() * .1 + ')', 'hue-rotate( ' + $('#hue-rotate').val() * 3.6 + 'deg)', 'invert( ' + $('#invert').val() + '%)', 'saturate( ' + parseint($('#saturate').val()) * .1 + ')', 'opacity( ' + parseint($('#opacity').val()) * .01 + ')', 'drop-shadow( ' + (function (n) { return '0px ' + '0px ' + n + 'px ' + 'black)'; } )($('#drop-shadow').val()) , ]; var styles = '-webkit-filter:\n' + styles.map(function (e) { return '\t' + e;} ).join('\n') + ';'; $('#image').attr('style', styles); $('#code').val(styles); }; $('#reset').click( function () { $('#grayscale').val( $('#grayscale').data('default') ); $('#blur').val( $('#blur').data('default') ); $('#sepia').val( $('#sepia').data('default') ); $('#brightness').val( $('#brightness').data('default') ); $('#contrast').val( $('#contrast').data('default') ); $('#hue-rotate').val( $('#hue-rotate').data('default') ); $('#invert').val( $('#invert').data('default') ); $('#saturate').val( $('#saturate').data('default') ); $('#opacity').val( $('#opacity').data('default') ); $('#drop-shadow').val( $('#drop-shadow').data('default') ); update_filter(); }); $( 'input[type="range"]').change(update_filter ); update_filter();body, html { background: #fff; } .wrapper { width: 800px; height: 400px; background: #fff; border-radius: 5px; position: relative; margin: 60px auto 0 auto; } .controls { background: #ddd; width: 250px; position: absolute; right: 0; bottom: 0; top: 0; } .image { background: url(transparency.png); width: 550px; position: absolute; left: 0; bottom: 0; top: 0; } .controls { padding: 0 0 0 0; } .controls li { list-style: none; margin: 0; padding: 5px 15px; border-bottom: 1px solid #aaa; } .controls li span { font-size: 13px; } .controls li span::after { content: '()'; } .controls li input { color: #333; float: right; } #code { position: absolute; left:0; right: 0; bottom: -155px; border:0; font-family: monospace; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div class="wrapper"> <div class="image"> <img id="image" src="http://i.imgur.com/wdigz1t.png" alt=""> </div> <div class="controls"> <ul class="controls"><li> <span>blur</span> <input type="range" id="blur" min="0" max="100" value="0" data-default="0"> </li> <li> <span>grayscale</span> <input type="range" id="grayscale" min="0" max="100" value="0" data-default="0"> </li> <li> <span>drop-shadow</span> <input type="range" id="drop-shadow" min="0" max="100" value="0" data-default="0"> </li> <li> <span>sepia</span> <input type="range" id="sepia" min="0" max="100" value="0" data-default="0"> </li> <li> <span>brightness</span> <input type="range" id="brightness" min="0" max="100" value="100" data-default="100"> </li> <li> <span>contrast</span> <input type="range" id="contrast" min="0" max="100" value="10" data-default="10"> </li> <li> <span>hue-rotate</span> <input type="range" id="hue-rotate" min="0" max="100" value="0" data-default="0"> </li> <li> <span>invert</span> <input type="range" id="invert" min="0" max="100" value="0" data-default="0"> </li> <li> <span>saturate</span> <input type="range" id="saturate" min="0" max="100" value="10" data-default="10"> </li> <li> <span>opacity</span> <input type="range" id="opacity" min="0" max="100" value="100" data-default="100"> </li> <li><button id="reset">reset</button></li> </div> <textarea id="code" cols="20" rows="11"></textarea> </div>
you'll notice time performance hit hard when either use blur or drop-shadow. if play of other filters there little cpu usage or indication of performance hit.
the first thing understand not filters created equal.
most filters modify pixels on 1:1 level relatively straight forward calculation.
however when introduce "blur" or "shadow" may no longer 1:1 calculation.
say use radius parameter , set 5px. need @ 5x amount of pixels calculate blur should like.
when compound other filters on top of calculation required increases.
modern browsers able utilize gpu these calculations make process faster you'll notice devices weak gpu's suffering.
so answer question specifically. cpu isn't running after filter applied, it's still in process of calculating! when put in crazy values example allows (e.g. radius of 100px) can imagine how intensive calculation on cpu.
here quick guideline on performance css filters:
- grayscale / fast
- sepia / fast
- saturate / fast
- hue-rotate / fast
- invert / fast
- opacity / variable
- brightness / fast
- contrast / fast
- blur / slow
- drop-shadow / slow
- url() / variable