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.
Now, I know I could use display: none 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 display property is set to none. So often I will position the element so it is hidden ofscreen.
My assumption, then, is this:
Since the object is not rendered on the screen there should be no difference in the performance of the website* when I use left: 2000px as opposed to left: 200000000px.
So I assume that if the following code is used, there would be no difference in the performance of the two pages:
Page one:
<div style="height:100px; width:100px; left:-2000px"></div>
Page two:
<div style="height:100px; width:100px; left:-200000000px"></div>
Are my assumptions correct? If that element were the only difference between two given pages, would there be any difference (however small), in performance?
*That is to say load time, page size, responsiveness, or any other measure of performance
=================================
Update
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.
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.
You can attempt to profile the page load time with Firebug (or Chrome/Safari Developer tools), but I would be extremely surprised if there was any difference at all. The browser cares about the x,y,z coords of an element. It doesn’t matter if those are on or off the screen; they are still just three discrete data points.