killovv

Если не нужны лишние библиотеки, вот моя упрощённая версия

let db={
	o:h=>new Promise(r=>{let i=indexedDB.open('you_db');i.onsuccess=()=>r(i.result);i.onupgradeneeded=()=>i.result.createObjectStore('db',{keyPath:'key'})}).then(h),
	t:o=>o.transaction('db','readwrite').objectStore('db'),
	g:(k,h)=>db.o(o=>new Promise(r=>{let t=db.t(o).get(k);t.onsuccess=()=>r(t.result&&t.result.val)}).then(h)),
	s:(k,v)=>db.o(o=>db.t(o).put({key:k,val:v}))
};

использовать так:
db.s('sync', сохранить данные )
db.g('sync', данные => функция )

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

рисуются почти одинокого при отрисовке по одному квадрату за раз:
что - fillRect()
что - ctx.beginPath() ctx.moveTo() ctx.lineTo() ctx.stroke()

просадки начинаются когда рисуешь группами:
так - n*раз rect() и в конце вызвать fill()
или - n*раз ctx.moveTo() + ctx.lineTo() и в конце вызвать ctx.stroke()