cost of different approaches to drawing animated graphics

I am wondering what the different costs are of the different aproaches to drawing graphics.
What is the least / most expensive in terms of CPU time and how could it be meaured ?

For example:

// option (1) draw using fillpoly to the screen direct
// example: gps Route Viwer
g.fillPoly(....);

// option (2) have the image as a Object String in a function
// example widgps (most widgets)
var img = E.toArrayBuffer(atob("...."));
g.drawImage(img, x, y);

// option (3) draw image read out of flash
// example ??
g.drawImage(require("Storage").read("cloud.img"));

// option (4) write the image to an ArrayBuffer
// example magnav, arrow compass
var buf1 = Graphics.createArrayBuffer(160,160,1, {msb:true});

function d() {
  var img = require("heatshrink").decompress(atob("..."));
  buf1.drawImage(img, 80, 80, {scale:3,  rotate:radians(course)} );
  // other draws, then call a flip function
  flip1(40, 30);  // draws the image into the graphics array
}

My reason for asking is that I have done an app with graphics using option (4). The app is a vraiant of GPS Navigation which an animated arrow for the compass direction. I have noticed with my App and GPS Navigation that after a while the buttons become unresponsive and often have to be pressed to 2,3,4 times to get the necessary response. It is maybe not noticeable with Apps that dont require much interaction wth the butons.

Be great to have a sample App that did the same thing in differnce ways but you could compare the cost in terms of RAM, CPU, time etc. Maybe one day I will get round to write it.