CSS Flex 与手动 JavaScript 计算的性能对比答案

【问题标题】：Performance of CSS Flex vs. manual JavaScript computationCSS Flex 与手动 JavaScript 计算的性能对比
【发布时间】：2017-05-18 00:53:54
【问题描述】：

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

因此，以相对术语定义元素大小、填充、边距等很重要。为此，我确定了两种方法：要么尽可能使用 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 依靠手动计算来设置绝对像素大小实际上是否更好？

【问题讨论】：

在 iframe 中的 iframe 中的大声笑 iframe。那是你的问题。至少 CSS 计算不会像某些 JS 那样阻塞 DOM。
@WilomGfx 好吧，我已经解决了嵌套 iframe 的加载影响，因此此时这不再是问题。下一个问题是关于每个帧内容大小的计算。直观的方法是使用 CSS，而 Flex 是为此类事情而设计的，但很多 Flex 也会拖累加载。切换到 JavaScript 计算会有帮助吗？
这个问题没有一般的答案。这取决于浏览器、您的实现、计算和应用这些大小更改的时间和频率、渲染周期、访问 dom 节点（或其属性）等。归结为：向我展示一个实现和 这是正在运行的实际页面，我可以告诉你是否/如何做得更好。我能给你的最好（一般）提示是尽可能避免不必要的渲染周期。
我投票结束，因为这个问题要么太宽泛，要么主要基于意见。如果您想保持开放，请使其更加具体。

标签： javascript css performance web flexbox

【解决方案1】：

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

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

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

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

很抱歉，我不能给你一个“每次都使用这个答案”，但希望这能帮助你在存在限制的情况下做出正确的决定

【讨论】：