And*_*y F 5 html css performance
我在网站上操作内容时经常使用的做法是绝对定位左侧(或有时顶部)值约为-2000px的元素,以确保它不会在屏幕上看到.
现在,我知道我可以使用它display: none来使我的对象消失,但是一些元素在不显示时不会很好看,有时我需要引用一些属性,例如它的宽度,例如,当无法访问时该display属性设置为none.所以我经常将元素定位,使其隐藏在屏幕上.
那么,我的假设是这样的:
由于对象不在屏幕上呈现的应该是,当我使用的网站*的性能没有区别left: 2000px,而不是left: 200000000px.
所以我假设如果使用以下代码,两个页面的性能没有区别:
第一页:
<div style="height:100px; width:100px; left:-2000px"></div>
第二页:
<div style="height:100px; width:100px; left:-200000000px"></div>
我的假设是否正确？如果该元素是两个给定页面之间的唯一差异,那么性能会有差异(无论多小)吗？
*也就是说加载时间,页面大小,响应性或任何其他性能指标
=================================
我按照Michael的建议对页面进行了分析,发现了以下内容:Spark说正确的加载时间会受到文件大小的影响.文件大小有四个字节的差异,这相当于加载时间约4ms的差异.
其次,IE和Firefox正确解释了我难以置信的大左值,但不是Chrome.Chrome似乎无法识别大于1.35亿像素的值.但是,鉴于性能差异似乎很小,我无法推测为什么他们会决定将其限制在如此任意的数量.
您可以尝试使用Firebug(或Chrome/Safari开发人员工具)来分析页面加载时间,但如果存在任何差异,我会非常惊讶.浏览器关心元素的x,y,z坐标.屏幕上或屏幕外是否无关紧要; 它们仍然只是三个离散的数据点.