Question

我有一个基于浏览器的系统，除其他模块化组件外，还包含一个<iframe>容器，该容器与其他<iframe>嵌套 - 当前 - 最多三个级别。给定网页可以同时嵌入多个嵌套帧中。最终用户＆＃39;屏幕分辨率和嵌套帧＃39;尺寸可能会有所不同。

因此，以相对的术语定义元素大小，填充，边距等是很重要的。为此，我确定了两种方法：我尽可能使用CSS Flex，然后手动使用JavaScript进行计算，或者尽可能反向计算。以下是我将一个更复杂的页面嵌入到框架中的以计算为中心的方法的示例：

// Tile size-dependent CSS
const RATIO = 0.618;

// Amount of space to use in view
var viewHeight = window.innerHeight;
var viewWidth = window.innerWidth;
var viewVertSpace = viewHeight * 0.8;
var viewHoriSpace = viewWidth * 0.8;

// Position and sizing for each overall column
var colWidth = Math.round(viewHoriSpace * 0.5);
var colSpace = Math.round(viewVertSpace) - 2; // Deduct 2px bottom border

// Sizing of column 1 elements
var summaryHeight = colSpace * 0.5;
var mainRowHeight = summaryHeight * RATIO;
var mainRowSize = Math.round(mainRowHeight - 10); // Deduct 5px vertical padding per side
var subTextSize = Math.round((summaryHeight - mainRowHeight) * (1 - RATIO));
var diffIconSize = Math.round((mainRowSize - subTextSize) * RATIO);

// Sizing of column 2 elements
var horiSpace = colWidth * RATIO; // Leave some space on both sides
var chartWidth = horiSpace - (horiSpace * RATIO);
var innerBarWidth = chartWidth * (1 - RATIO);
var targetArrowWidth = subTextSize * 0.5;

系统的加载时间存在性能限制，第一次部署到测试服务器时失败。我一直在不断优化代码（其中一部分涉及实现延迟初始化和有序加载以防止过多的同时HTTP调用），这是我正在关注的一个领域。我已经读过在更复杂的应用程序中广泛使用CSS Flex会对性能产生重大影响但我不知道是否依靠通过JavaScript手动计算来设置绝对像素大小实际上更好？

Answer 1

虽然具体实施可能会有所不同，但以下是一些需要考虑的一般事项：

您将无法控制何时CSS导致元素调整大小，使用JavaScript，您可以做出一些决定，例如设置超时或建立最小值以触发更改。但是，任何此类解决方案都将阻止您希望在同一时间范围内运行的任何其他JavaScript。同样，您运行的任何其他JavaScript都将阻止此代码。使用CSS Flexbox将要求您检查哪些特定于浏览器的实现细节适用于您的用例（当然，在您的JavaScript中也是如此）。

根据我的经验，CSS flexbox比任何试图解决相同问题的JavaScript解决方案都要快，但我不能保证这是一个普遍的事实。

在实施解决方案时，您还应考虑代码维护。如果你的JavaScript充满了神奇的数字和奇怪的条件，那么维护CSS解决方案可能会更容易（假设你没有用魔术数字和奇怪的条件填充它，我发现使用Flexbox更容易避免）。

对不起，我不能给你一个“每次回答时使用这个”，但希望这可以帮助你在存在约束的情况下做出正确的决定

CSS Flex与手动JavaScript计算的性能

1 个答案: