StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIs there a performance penalty by "hiding" objects off screen by ridiculous amounts?
text
Body
copied!<p>A practice I commonly use when manipulating content on websites is to absolutely position elements with a left (or sometimes top) value of around -2000px, so as to ensure it won't be seen on screen.</p> <p>Now, I know I could use <code>display: none</code> to make my objects disappear, but some elements don't play nice when not displayed, and sometimes I need to make a reference to some property like its width, for example, which can't be accessed when the <code>display</code> property is set to <code>none</code>. So often I will position the element so it is hidden ofscreen.</p> <p>My assumption, then, is this: </p> <p>Since the object is not rendered on the screen there should be no difference in the performance of the website* when I use <code>left: 2000px</code> as opposed to <code>left: 200000000px</code>.</p> <p>So I assume that if the following code is used, there would be no difference in the performance of the two pages:</p> <p>Page one:</p> <pre><code><div style="height:100px; width:100px; left:-2000px"></div> </code></pre> <p>Page two:</p> <pre><code><div style="height:100px; width:100px; left:-200000000px"></div> </code></pre> <p>Are my assumptions correct? If that element were the only difference between two given pages, would there be any difference (however small), in performance?</p> <p>*That is to say load time, page size, responsiveness, or any other measure of performance</p> <p>=================================</p> <h1>Update</h1> <p>I have profiled the pages as suggested by Michael and found the following: Spark was correct in saying that the load time would be affected by the file size. There was a difference of four bytes in the file size which corresponded to a difference of about 4ms in load time. </p> <p>Secondly, my incredibly large left value was interpreted correctly by IE and Firefox, but not by Chrome. Chrome doesn't seem to recognise values greater than around 135 million pixels. However, given the performance difference seems to be minimal, I can't speculate as to why they would have decided to limit it to such an arbitrary amount.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload