veprogames / veprogames.github.io Goto Github PK

Using the dev tools benchmarker, I have noticed 4% of execution time that could be avoided. functions.js formatNumber is expensive and seems to be executed regularly by vue. This is because content-matter.js:39 is a function that calls formatNumber and is bind.ed in upgrade.js:32. From my reading of Vue's docs, quoted below, Vue regularly polls methods binded to HTML, however, it caches computed properties based off reactive dependencies - ie it only re-executes the function when upgrades.betterObjects.level or the currentNotation changes.

However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as betterObjects.level has not changed, multiple access to the getEffectDisplay computed property will immediately return the previously computed result without having to run the function again.

This also means the following computed property will never update, because currentNotation is not a reactive dependency:
Why do we need caching? Imagine we have an expensive computed property A, which requires looping through a huge Array and doing a lot of computations. Then we may have other computed properties that in turn depend on A. Without caching, we would be executing A’s getter many more times than necessary! In cases where you do not want caching, use a method instead.

The solution may be that the level will never increase past a number which can just be represented by a number without needing notation, or by transferring the method to a computed property with reactive dependencies. A different angle is making formatNumber more efficient, which may be able to be done using "Intl.NumberFormat.prototype.format()" as recommended by the MDN.