[vc_row][vc_column][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”][vc_empty_space height=”12px”][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text pl=”0″ pr=”0″ pt=”0″ pb=”0″]

Why you should care

[/vc_column_text][vc_column_text pl=”0″ pr=”0″ pt=”0″ pb=”0″]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.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text pl=”0″ pr=”0″ pt=”0″ pb=”0″]

Business Impacts

 [/vc_column_text][vc_empty_space height=”32px”][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”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”12px”][vc_empty_space height=”32px”][vc_single_image image=”5362″ img_link_large=”” img_link_target=”_self” img_size=”full” alignment=”none”][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text pl=”0″ pr=”0″ pt=”0″ pb=”0″]

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;
}
}[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text pl=”0″ pr=”0″ pt=”0″ pb=”0″ color=”#dd3333″]

References

https://www.w3.org/wiki/JavaScript_best_practices#Keep_DOM_access_to_a_minimum[/vc_column_text][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”][/vc_column_inner][/vc_row_inner][vc_separator color=”grey” align=”align_center” style=”” border_width=”” el_width=””][vc_column_text pl=”0″ pr=”0″ pt=”0″ pb=”0″]

How we detect

[/vc_column_text][vc_column_text pl=”0″ pr=”0″ pt=”0″ pb=”0″]

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.

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/1″][vc_single_image image=”5362″ img_link_large=”” img_link_target=”_self” img_size=”full” alignment=”none”][vc_column_text pl=”0″ pr=”0″ pt=”0″ pb=”0″]

[/vc_column_text][vc_empty_space height=”16px”][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]