04.11.2012, 21:43
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
отрисовка большого кол-ва картинок на 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]();// вызов "подписчиков"
};
или через кэш браузера будет быстрей?
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
04.11.2012, 21:49
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
Сообщение от cyber
|
или через кэш браузера будет быстрей?
|
что мешает протестить на время исполнения в разных браузерах самому?
|
|
04.11.2012, 21:54
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
то что не совсем понимаю как, если нужно протестить выполнение какого то действие то можно циклов прогнать 2 варианта
var d = new Date();
for(...)fnc();
var res = new Date() - d;
а тут проблема в том что нужно ждать загрузки картинок и прост прогнать не получиться, а в голову нечего приходит
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
04.11.2012, 22:15
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
для канвы
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;
и просто подстановка картинки будут брать картинку из кеша если она там есть
|
|
04.11.2012, 22:27
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
я чет тупонул, только что вспомнил что в хроме можно посмотреть скорость загрузки файлов и все остального.
для хрома:
-При первой загрузке разница огромная.
-При второй в несколько раз меньше .
- При третей и дальнейших грузиться с кеша , т.е время загрузки == 0
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
04.11.2012, 22:41
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
сор, за тему, но часто бывает что до меня доходит когда я ее уже создал=(
а насчет кэша , по тому что вижу лучше с ним так как первая загрузка самая главная и разница очень большая и это только для 5 картинок.
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
04.11.2012, 22:50
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
Сообщение от cyber
|
- При третей и дальнейших грузиться с кеша , т.е время загрузки == 0
|
хром оптимизирует скрипты-отсюда и разница.после первой из кеша , если он включен
|
|
04.11.2012, 23:04
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
dmitriymar, вот тестовые страницы с кэшем
http://cyberua.16mb.com/paint/cache.html
без него:
http://cyberua.16mb.com/paint/withoutCahe.html
если не тяжело можете в хроме запустить и сказать какая быстрей, а то как то странно хром себя ведет ?!
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
Последний раз редактировалось cyber, 04.11.2012 в 23:11.
|
|
04.11.2012, 23:10
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
Сообщение от dmitriymar
|
хром оптимизирует скрипты-отсюда и разница
|
ответ был ранее)
|
|
04.11.2012, 23:29
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
Сообщение от dmitriymar
|
ответ был ранее)
|
да я понял это, но причем оптимизация к тому что каждый раз разный результат, то быстрей к кэшем то без (кэш брузера очищаю перед каждой загрузкой страници)
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
|
|