I have this one single line of code I wanted to improve. My main concern is the execution and rendering speed of it. Even though I am happy with its speed, could it be improved?

document.getElementById('my-webpart').style.height = 
(document.documentElement.clientHeight - 80) + 'px';

The reason I didn't ad any variable is to make it robust but I'm not sure if it even matters.


2 Answers 2


It depends on how many times this is executed. If you execute this multiple times inside a resize function, setting a global variable that stores your element will speed up your code since it does not have to look up the variable every time. So if you are using window.resize, this would be a tad bit faster:

var myWebPart = document.getElementById('my-webpart');
var docElement = document.documentElement
window.addEventListener('resize', function(){
    myWebPart.style.height = (docElement.clientHeight - 80) + 'px';
}, false);

However, the difference we are talking about is negligible. I always tend to look at this as document.getElementById() being a function and functions need execution time, so if you already have the answer (the element) and you are going to use it multiple times, then it might be best to store the answer in a variable. If, however, you only use it once, it's best to not store it in a variable as you are increasing the memory usage for something that does not need to be stored, as well as executing a tiny bit of code to allow for this memory to be used. Every bit slows down, but we are really talking minimal changes here.


I'm adding my two pence concerning the height issue you are mentioning. It is easier to do with CSS, but I would avoid using box-sizing, instead using something like the below as it works as expected across browsers while having a fallback for older browsers:

/* Define a height for older browsers */
height: 80%; 
/* Use calc to get the simulated border-box-sizing height / ignored by old browsers */
height: calc(100% - 80px); 
/* Define a padding for older browsers */
padding-bottom: 20%; 
/* Use calc to get the simulated border-box-sizing padding / ignored by old browsers */
padding-bottom: calc(80px);

I know box-sizing is popular for this, but I think calc solved our problem to begin with, and it makes box behaviour more predictable as they will always work in the same fashion.

  • \$\begingroup\$ very nice, thanks but sorry i am not able to +vote, you are right I am planning to resize it several time, haven't got there yet, but it helps, going to test it now \$\endgroup\$ Commented Jun 22, 2015 at 9:29
  • \$\begingroup\$ Ha thats fine :) I thought you could on your own question, but either way glad to help :) \$\endgroup\$ Commented Jun 22, 2015 at 9:30
  • \$\begingroup\$ i think your code is missing where it should be resizing it before window resize event triggers, I updated my code in question to be more within context, thanks :) \$\endgroup\$ Commented Jun 22, 2015 at 10:08
  • 1
    \$\begingroup\$ @user2262511 Note you should be able to mark his answer as accepted. However, it might be beneficial to wait at least a day before doing so. \$\endgroup\$
    – Mast
    Commented Jun 22, 2015 at 10:10
  • \$\begingroup\$ Please note the lowercase resize, also, this was an example more than anything else. I think the actual event is onresize, but it would be better not to overwrite that function and add an eventlistener for this, but that was not the concern of the question. I'll amend the answer though. If you want to know more about a good way to use that event, check MDN: developer.mozilla.org/en-US/docs/Web/Events/resize (because of computational expense it might be better to combine it with requestAnimationFrame) \$\endgroup\$ Commented Jun 22, 2015 at 10:11

At the moment of a resize, you trigger this A LOT! to you it's just 1 movement, but the browser triggers the function per pixel (worst case). You might be looking for dethrottle/debounce:

window.onresize = function(event){debounce(function (event) {
        document.getElementById('my-webpart').style.height = (document.documentElement.clientHeight - 80) + 'px';
}, 50)};

This triggers your code every 50ms. You can increate this number for better performance, decrease it for smoother animation.

You can do this with css, which is a lot easier. The trick is to change the box sizing:

#example {
  height: 200px;
  width: 500px;
  background: pink;
  border: 3px solid red;
#my-webpart {
  box-sizing: border-box;
  height: 100%;
  padding-bottom: 80px;

  background: green; /* FOR DEMO */
  width: 50%; /* FOR DEMO */
  color: #FFF; /* FOR DEMO */
<div id="example">
  <div id="my-webpart">
    Hi there! Use your console to check my actual height, which in this example is 120px;

  • \$\begingroup\$ Since he defined it as a sharepoint site you can assume older browsers in the network will access it. I avoid using box-sizing for this reason, but you can emulate it with calc and an appropriate fallback: height: 80%; padding-bottom: 20%; height: calc(100% - 80px); padding-bottom: calc(80px);, this will display semi-correctly on older browsers while falling 'forward' perfectly fine on newer ones. Best of both worlds. \$\endgroup\$ Commented Jun 22, 2015 at 11:58
  • \$\begingroup\$ But IE8 won't do the calc. It'll fix a bit more, but still not everything. \$\endgroup\$
    – Martijn
    Commented Jun 22, 2015 at 12:19
  • \$\begingroup\$ Scratch this, IE8 has bloody border-box support. Don't know why I have bene telling myself it hasn't for a long time now. Maybe because I don't like how unpredictable the behaviour is when using it, but thats just me. \$\endgroup\$ Commented Jun 22, 2015 at 12:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.