Simply put.
We are discussing javascript here. I am wondering about the potential performance drawbacks, memory issues, and so on when using high value integers as array indexes instead of low value ones. Some programming languages allocate enough memory to index all elements from 0 to a maximum value with dynamic "magical" arrays or similar mechanisms, so my question is:
var arrayA = [];
arrayA[12526] = "a";
var arrayB = [];
arrayB[1] = "b";
Do arrayA and arrayB have the same impact on the system or is it less taxing to use the structure of arrayB;
Optional read: (the reason behind this issue)
I am attempting to generate dynamic CSS strings in a way. Let's say that every few seconds, my code generates a DOM element (div) and a piece of CSS that moves the div around for a short period. After 5 seconds, the div is removed permanently along with its associated CSS styling.
My idea involves creating a unique ID timeout with var uniqueID = setTimeout and then naming the CSS selector with the value of uniqueID. This allows me to have multiple divs present simultaneously, each with a unique ID due to an attached timer. Then, I create a style string like
#uniqueID {top: 20px; left: 20px;}<style> element to include the new rule. However, over time, the CSS string grows significantly... reaching up to 2000 unique style ID selectors, most of which are not in use. So I wanted to address this issue by managing it more effectively. I created an object that updates the innerHTML of the <style> element whenever a new CSS rule is added, and removes the style string based on the timer mentioned earlier. Thus, only the CSS for currently visible divs is stored within the <style> element of the page as time progresses.
This is essentially the code:
var styleSystem = {
repository: [],
add: function (id, style) {
this.repository[id] = style;
this.updateStyle();
console.log("added");
},
remove: function (id) {
this.repository.splice(id, 1);
this.updateStyle();
console.log("removed");
},
updateStyle: function () {
var summedString = "";
this.repository.forEach(function (element) {
summedString += element;
});
document.getElementById("DynamicStyle").innerHTML = summedString;
}
};
PLEASE NOTE:
~There is no issue with the code, it works perfectly fine. My concern lies in the efficiency aspect due to the usage of high integer indexed array IDs for data storage.~
In terms of performance, would it be better to dynamically add and remove new <style> elements to the DOM tree each time rather than modifying the contents of a single element, potentially causing a CSS redraw (although there isn't much to redraw, with only 5-10 divs present at any given time)?
EDIT:
Upon further investigation, I noticed that the intended functionality is not fully achieved - some strings get removed while others remain in the CSS. Visually, everything seems to work fine, but certain strings persist within the CSS even when they should be removed. I am trying to find a solution without resorting to delete array[key] since it leads to de-optimization. Any suggestions?