Is there a penalty for “hiding” objects from the screen with ridiculous amounts?

The practice that I usually use when manipulating content on websites is to absolutely position elements with a left (or sometimes top) value of about -2000 pixels to ensure that it does not appear on the screen.

Now I know what I can use display: noneto make my objects disappear, but some elements do not play well when they are not displayed, and sometimes I need to make a reference to some property, for example, its width, for example, it is impossible to access if the property is displayset value none. So often, I position the element so that it is hidden from the screen.

So my guess is:

Since the object does not appear on the screen, there should be no difference in website performance * when I use left: 2000px, not left: 200000000px.

Thus, I assume that if the following code is used, there will be no difference in performance between 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 this element were the only difference between the two given pages, would there be any difference (as if small) in performance?

* That is, load time, page size, responsiveness or any other performance indicator

===================================

Update

, , : Spark , , . 4 , 4 .

-, IE Firefox, Chrome. , Chrome , 135 . , , , , .

+5
2

Firebug ( Chrome/Safari), , - . x, y, z . , ; .

+6

, ?

CSS , : -2000px left: -2000000px, , , , " " CSS.

, , , , , . , .

, ...

left:-2000px = Input: 0.021KB, Output: 0.019KB
left:-2000000px = Input: 0.025KB, Output: 0.024KB
+3

All Articles