是否可以通过JavaScript来访问％-width元素的当前缩放因子，而不会导致回流？

我试图修复一个缓慢的UI有些慢，执行JavaScript和我已经收窄的主要原因下来用于看到width: 100%元素的实际像素大小的响应式布局一个jQuery .width()电话，在需要经常响应用户操作而发生的过程。是否可以通过JavaScript来访问％-width元素的当前缩放因子，而不会导致回流？

我已经添加了基于时间戳的测量和他们表明，就占了33％左右的滞后时间，这使得UI之间的差异感觉锐利和UI感觉迟钝。删除这一条线，该UI感觉快 - 但是，它把东西放错了地方......

看来well established that .width() is relatively slow in jQuery > 1.8主要是出于两个原因：

It forces reflow while calculating the element size。从引述When does reflow happen in a DOM environment?的文章：

您检索必须计算的测量值，如在DOM兼容的浏览器访问offsetWidth，clientHeight，或任何计算CSS值（通过的getComputedStyle（）[当回流发生]或在IE currentStyle）

...其实，像IE和Firefox是延迟DOM为了避免矛盾的变化（如隐藏和显示在同一个函数调用），people sometimes add unnecessary state getters in order to force reflow to occur改变，直到最后一刻浏览器。
还需要检查元素的边框盒的状态。 From their blog：

的jQuery 1.8现在需要的，只要您使用.WIDTH（），以便它可以决定是否需要减去填充和边框宽度检查箱集束性。这可能会很贵 - 在Chrome上高达100倍！

我的代码的调用width()的目的是看看，并且由多少，一个负责任的设计已经缩小。它需要看一个小部件的包装元素，它具有width: 100%;（但可能在一列或其他容器，根据什么网站/网页进行托管），并需要看到它实际上是出在什么％是包装的最大宽度。

基于不同坐标系的其他代码给出了标签的位置（以像素为单位），那么我需要使用缩放系数（本质上为= $wrapper.width()/maxWidth;）来缩小位置，例如if页面被在窄窗口/装置观看和包装件是其最大大小的50％，标签顶部和左侧偏移的是其缺省值的50％。

有没有什么办法可以访问这个数据：％-width元素被缩小了多少而没有引起回流，其他的东西让.width()调用变慢？

事情我已经尝试过或排除：

.outerWidth()是完全一样慢.width()
.get(0).clientWidth（在纯JavaScript /非jQuery的选项）也几乎完全一样为.width()慢（大概因此回流是罪魁）
我注意到，在大多数浏览器上，如果我在其他维度（例如.get(0).clientWidth后面跟着.outerHeight()）之后执行上述任何操作，则会在第一个之后调用很快（快20倍）。据推测，由于回流刚刚完成，并且元素属性刚刚被访问，所以它们被以某种方式缓存。但是该效果不适用于重复调用该函数，只能在一个函数调用中使用。
.css("width")显然是没有用的，因为它刚刚给我100%在所有情况下
我认为得到窗口的宽度，但事情取决于页的列布局承载这个元素变得复杂。例如，如果我的包装是两列布局，并且窗口比折叠两列的断点宽一点，那么窗口将比包装元素的最大尺寸更宽，但包装元素不会处于其最大宽度的100％。

[更新]我以为我会想出一个办法绕过我需要解决的问题，而不必访问元素的缩放我的标签位置是：因为我已经曾在像素maxWidth变量，以像素为单位的偏移量，我有足够的数据来计算百分比我的标签抵消leftOffset_px/maxWidth_px和topOffset_px/maxHeight_px，然后+ '%'和应用是作为EA ch标签的CSS top和left偏移量。这是可笑地更快 - 现在少于1毫秒，我的基于时间戳的功能如此之快无法测量它！

不幸的是，我还有另一个功能，检查具有固定宽度的标签不会溢出响应容器，为此，我需要考虑当前像素宽度容器或其比例因子。

来源

2016-09-08 user568458

我正确阅读这个。**阅读**通过任何返回所需值的方法的宽度导致回流？ ... 读？ –

这就是我理解我读过的东西：引用[在什么时候在DOM环境中发生回流？]（http://stackoverflow.com/questions/510213/when-does-reflow-happen-in-a-dom “当您检索必须计算的度量值时，例如访问offsetWidth，clientHeight或任何计算出的CSS值（通过DOM兼容的浏览器中的getComputedStyle（）或IE中的currentStyle）” – user568458

抱歉我忍不住，但这很有趣学习 –

不确定改进会有多大，但您可以尝试添加一个绝对定位的元素（不包含子元素）到您的窗口小部件的根目录，其唯一目的是读取其宽度。我觉得绝对定位的元素仅为回流焊其子：

.root { 
    position: relative; 
} 
.ruler { 
    position: absolute; 
    width: 100%; 
}

<div class="root> 
    ... 
    <div class="ruler"></div> 
</div>

var updatedWidth = $('.ruler').width()

（虽然我的意见，说你应该尝试用CSS解决同意）

来源

2016-09-12 04:20:02

是否可以通过JavaScript来访问％-width元素的当前缩放因子，而不会导致回流？

回答

相关问题