отрисовка большого кол-ва картинок на canvas
 

вот не много запутался как лучше сделать,
на канве отрисовуется довольно много раз одна и таже картинка и что бы не загружать ее каждый раз заново написал такой код

var imgCache = loaded[type.bg];

              if (!imgCache) {

                      var img = new Image();
                      img.src = type.bg;
                      
                      
                      img.onload = function () {
                          drawImg.call(this, x, y, width, height);
                      };
                     
                       loaded[type.bg] = {
                          obj: img,
                          loaded: false
                      };

                      img = null;
                  }

                  else {
                    
                  if (imgCache.loaded)
                      ctx.drawImage(imgCache.obj, x, y, width, height);


                  else {

                      if (!imgCache.sub) imgCache.sub = [];

                      imgCache.sub.push(function () {//"подписка" на загрузку картинки
                          ctx.drawImage(imgCache.obj, x, y, width, height);
                      });
                  }
                      

                  
              }

              function drawImg(x,y,width, height) {

                  loaded[type.bg].loaded = true;// картинка загружена
                 
                  ctx.drawImage(this, x, y, width, height);

                  var sub = loaded[type.bg].sub;

                  for (var i = 0; i < sub.length; i++) sub[i]();// вызов "подписчиков"
              };

или через кэш браузера будет быстрей?

что мешает протестить на время исполнения в разных браузерах самому?

то что не совсем понимаю как, если нужно протестить выполнение какого то действие то можно циклов прогнать 2 варианта

var d = new Date();
for(...)fnc();
var res = new Date() - d;

а тут проблема в том что нужно ждать загрузки картинок и прост прогнать не получиться, а в голову нечего приходит

для канвы
var img = new Image();
img.src = type.bg;
var d = new Date();

....
img.onload = function () {
for(var i=1000;i-- ; ) {
drawImg.call(this, x, y, width, height);
// запускаем перерисовку . у канвы можно offsetHeight запросить

}

};
для вставки через тег имидж -обычные в цикле
изменение src onload , перерисовка

скрипт и отрисовка идут в одном потоке -так что замерять можно
var img = new Image();
img.src = type.bg;
и просто подстановка картинки будут брать картинку из кеша если она там есть

я чет тупонул, только что вспомнил что в хроме можно посмотреть скорость загрузки файлов и все остального.
для хрома:
-При первой загрузке разница огромная.
-При второй в несколько раз меньше .
- При третей и дальнейших грузиться с кеша , т.е время загрузки == 0

сор, за тему, но часто бывает что до меня доходит когда я ее уже создал=(
а насчет кэша , по тому что вижу лучше с ним так как первая загрузка самая главная и разница очень большая и это только для 5 картинок.

хром оптимизирует скрипты-отсюда и разница.после первой из кеша , если он включен

dmitriymar, вот тестовые страницы с кэшем
http://cyberua.16mb.com/paint/cache.html
без него:
http://cyberua.16mb.com/paint/withoutCahe.html
если не тяжело можете в хроме запустить и сказать какая быстрей, а то как то странно хром себя ведет ?!

ответ был ранее)

да я понял это, но причем оптимизация к тому что каждый раз разный результат, то быстрей к кэшем то без (кэш брузера очищаю перед каждой загрузкой страници)

cyber,
Сперва надо указывать img.onload, затем img.src. Ибо если картинка в кэше браузера, то событие может не отработать.

Хотя иногда и так не отрабатывает. Можно после присвоения img.src дополнительно проверять на img.width и img.height или img.complete. Есть топик на тему предзагрузки на Stack Overflow и простецкий прелоадер на гитхабе.

Дзен-трансгуманист,
да все равно таже хрень то один быстрей то другой =(

в мозиле явное преимущество варианта c cache.

cyber,
Та дождись уже пока все загрузятся - тогда рисуй. Юзеры-то кэш нарочно сбрасывать не будут. При первой загрузке всё что угодно ждать приходится, как ни крути.

Дзен-трансгуманист, т.е вариант с кэшем лучше?

cyber,
С каким кэшем, не понял, браузера, или в скрипте?
В скрипте храни картинки либо в Image, либо рисуй Image на буферный Canvas, и храни там. Откуда рисовать быстрее, с буферной канвы или с Image - не знаю, не мерял, и, думаю, это зависит от браузера. Но присваивать заново один и тот же src точно не нужно: один раз загрузил - и рисуй потом хоть до второго пришествия.
В некоторых случаях без буферной канвы попросту не обойтись.

Дзен-трансгуманист,
я про кэш скрипта

var imgCache = loaded[type.bg];

              if (!imgCache) {

                      var img = new Image();
                      img.src = type.bg;
                      
                      
                      img.onload = function () {
                          drawImg.call(this, x, y, width, height);
                      };
                     
                       loaded[type.bg] = {
                          obj: img,
                          loaded: false
                      };

                      img = null;
                  }

                  else {
                    
                  if (imgCache.loaded)
                      ctx.drawImage(imgCache.obj, x, y, width, height);


                  else {

                      if (!imgCache.sub) imgCache.sub = [];

                      imgCache.sub.push(function () {
                          ctx.drawImage(imgCache.obj, x, y, width, height);
                      });
                  }
                      

                  
              }

              function drawImg(x,y,width, height) {

                  loaded[type.bg].loaded = true;
                  console.log(this);
                  ctx.drawImage(this, x, y, width, height);

                  var sub = loaded[type.bg].sub;

                  for (var i = 0; i < sub.length; i++) sub[i]();
              };

работает так:
-если картинки нет в кэше то создать и добавить ее туда свойство ,loaded = false;

- если картинка не загружена , но есть в кэше то в свойство sub (подписка) добавляется функция которая вызовется после загрузки

- если картинка есть в кэше и загружена просто от рисовать

cyber,
Я думаю, лучше сначала дождаться, пока загрузится всё что нужно, потом уже начинать рисовать. Это как когда загружаешь сохранение какой-нибудь обычной игры, там еще прогресс-бар как правило есть. Игра не начинается, пока не загрузятся ВСЕ нужные для данной точки игры ресурсы. Иначе бы ты наблюдал, как тысячи серых полигонов постепенно обретают конечную текстуризацию, в то время как по тебе уже палит десяток гангстеров, которых даже не различить. Странно было бы, не так ли? :)

Дзен-трансгуманист,
суть понял , сделал так

if (!imgCache) {

                      var img = new Image();
                     
                      
                      imgCache = loaded[type.bg] = {
                          obj: img,
                          sub:[]
                      };

                      imgCache.sub.push(function () {

                          ctx.drawImage(imgCache.obj, x, y, width, height);
                      });


                      img.onload = function () {

                          for (var i = 0; i < imgCache.sub.length; i++) imgCache.sub[i]();
                      };
                      
                      img.src = type.bg;
                      img = null;
                  }

                  else {
                    
                      imgCache.sub.push(function () {
                          ctx.drawImage(imgCache.obj, x, y, width, height);
                      });
                  
                   }

спасибо за подсказку.