$("#foo")
is slow, use the DOM: document.getElementById("foo")
.
$("#foo .bar")
is slow, get rid of that by navigating the DOM. I can't say exactly how without seeing the markup, but look at the FIXME
comments below.
$("#foo").css()
is slow, use the DOM: foo.style.height = "24px"
.
Get the reference to the elements once, not every time the function is called.
Other notes:
Don't do that weird thing with the braces on your if
statements.
Use the var
keyword as little as possible by combining variable declarations.
This appeases linters and reduces minified file size.
It also pretty much forces you to declare all your variables at the top of the function, which is generally considered to be a good practice.
Avoid the use of _
in variable names; prefer camelCase
instead. Also try to use meaningful variable names.
Except for variables or properties representing constants. In these cases the UPPER_CASED words are joined by underscores.
An exception may be made for variables or properties meant to be considered "private". In these cases the camelCased words are prefixed or suffixed with an underscore.
var internalHolder = document.getElementById("internal-holder"),
asideHolder = document.getElementById("aside-holder"),
mainContent = document.getElementById("main-content"),
mainInner = document.getElementById("main-inner"),
mainInnerScroll = document.getElementById("main-inner-scroll"),
asideHolderScroll = document.getElementById("aside-holder-scroll"),
mainInnerScrollViewport = mainInnerScroll.children[0], // FIXME
asideHolderScrollViewport = asideHolderScroll.children[0]; // FIXME
function resizeSidebar() {
var tmpHeight = internalHolder.children.length ? 250 : 181,
height = window.innerHeight,
innerHeight = height - tmpHeight;
asideHolder.style.height = height - 225 + "px";
mainContent.style.height = innerHeight + "px";
mainInner.style.height = innerHeight - 115 + "px";
mainInnerScrollViewport.style.height = innerHeight - 110 + "px";
asideHolderScrollViewport.style.height = height - 225 + "px";
$(mainInnerScroll).tinyscrollbar();
if (hideAsideScrollBar != "true") {
$(asideHolderScroll).tinyscrollbar();
}
}
I can almost guarantee this will be at least 10 times faster if you fix the FIXME
s.
BUT.
What you are doing feels really wrong. Using javascript to get and set a bunch of heights should be avoidable. Again I can't say exactly what to do without seeing the markup, but you should be able to achieve most (if not all) of the $('#foo').css
stuff through plain old HTML/CSS. Try giving things 100% height, try inline-block and vertical-align, hell, try tables, but javascript css styling should, IMO, be kept to an absolute minimum.