[nz_btn text="Software Resiliency" link="http://casthighlight.wpengine.com/software-resiliency/" target="_self" animate="false" animation_type="ghost" color="black" size="small" shape="rounded" type="normal" hover_normal="fill" hover_ghost="fill" icon="icon-dashboard"][nz_btn text="Programming Best Practices" target="_self" animate="false" animation_type="ghost" color="black" size="small" shape="rounded" type="ghost" hover_normal="fill" hover_ghost="screen" link="http://casthighlight.wpengine.com/category/product/indicators-methodology/code-insights/software-resiliency/programming-best-practices/" icon="icon-code"]

Why you should care

As explained by W3C: “Accessing the DOM in browsers is an expensive thing to do. The DOM is a very complex API and rendering in browsers can take up a lot of time. You can see this when running complex web applications when your computer is already maxed out with other work — changes take longer or get shown half way through and so on”. Remediating this code pattern can take back up to 50% of the time consumed by a function. Since object members may contain other members, it’s not uncommon to see patterns such as window.location.href in JavaScript code. These nested members cause the JavaScript engine to go through the object member resolution process each time a dot is encountered, while storing properties in local variables will dramatically increase execution speed in some cases.

Business Impacts

 [nz_btn text="Production Risk" target="_self" animate="false" animation_type="ghost" color="pink" size="small" shape="rounded" type="normal" hover_normal="opacity" hover_ghost="fill" link="http://casthighlight.wpengine.com/category/product/indicators-methodology/risk/" icon="icon-office"]

CAST Recommendations

Generally speaking, if you’re going to read an object property more than one time in a function, it’s best to store that property value in a local variable. The local variable can then be used in place of the property to avoid the performance overhead of another property lookup. This is especially important when dealing with nested object members that have a more dramatic effect on execution speed. Bad pattern: function toggle(element){ if (YAHOO.util.Dom.hasClass( element, “selected”)){ YAHOO.util.Dom.removeClass( element, “selected”); return false; } else { YAHOO.util.Dom.addClass( element, “selected”); return true; } } Good pattern: function toggle(element) { var Dom = YAHOO.util.Dom; if (Dom.hasClass(element, “selected”)){ Dom.removeClass(element, “selected”); return false; } else { Dom.addClass(element, “selected”); return true; } }

References

https://www.w3.org/wiki/JavaScript_best_practices#Keep_DOM_access_to_a_minimum[nz_btn text="Style Guide" target="_self" animate="false" animation_type="ghost" color="turquoise" size="small" shape="rounded" type="ghost" hover_normal="fill" hover_ghost="screen" link="https://github.com/Kristories/awesome-guidelines" icon="icon-book"]

How we detect

This code insight counts the number of cases when an object member (e.g. Acme.util.Dom.hasClass) goes through more than two nesting levels (i.e. it has at least three dots to access the object member). Depending on the number of cases identified in the code, Highlight counts penalty points to the scanned file. [nz_btn text="See features" link="http://casthighlight.wpengine.com/outputs-analytics/" target="_self" icon="icon-stats" animate="false" animation_type="ghost" color="black" size="small" shape="rounded" type="normal" hover_normal="fill" hover_ghost="fill"][nz_btn text="How it works" link="http://casthighlight.wpengine.com/how-it-works/" target="_self" icon="icon-cog" animate="false" animation_type="ghost" color="black" size="small" shape="rounded" type="ghost" hover_normal="fill" hover_ghost="fill"]