Question

我正在做涉及大量DOM操作的工作。我编写了一个函数来使用“热键”更有效地更改对象上的常见样式。它只是解释了这一点：

styles = parseStyles({p:"absolute",l:"100px",t:"20px",bg:"#CC0000"});

这样：

styles = {position:"absolute",left:"100px",top:"20px",background:"#CC0000"};

这主要是为了让我免于阅读这么多，并且因为我想看看我是否可以这样做:)（以及文件大小）。我发现这些热键更容易看;我正在为不同的自定义DOM对象设置和重置样式数十次。

但是，如果我的网页在一次会话中使用了5000次，一次大约10-25次执行，那么这样的瓶颈会对性能和运行时造成重大负担？

function parseStyles(toParse){
    var stylesKey = 
        {h:"height",p:"position",l:"left",t:"top",r:"right",b:"bottom",bg:"background"}, 
        parsedStyles = {};
    for (entry in toParse){
        if (entry in stylesKey){
            parsedStyles[stylesKey[entry]] = toParse[entry];
        } else {
            parsedStyles[entry] = toParse[entry];
        }
    }
    return parsedStyles;
}

Answer 1

我发现很少再需要设置非计算样式。如果您提前知道样式，请在CSS中为其定义一个类，并从必要的对象中定义addClass或removeClass。您的代码更易于维护，所有特定于样式的信息都在您的CSS文件中，而不是您的Javascript文件中。差不多，我唯一一次直接在对象上设置格式化样式信息就是当我使用具有绝对定位的计算位置时，即便如此，如果我的脑子足够坚硬，定位问题通常可以通过简单的CSS来解决/ HTML

您在问题中引用的示例看起来像静态样式，这些样式都可以通过CSS规则完成，只需对对象执行addClass即可。除了更清洁之外，执行它也应该快得多。

看起来你正在做的是使用运行时解析来节省开发时间类型。如果您没有注意到性能差异，那就没问题。只有您可以确定，因为只有您可以在需要运行的环境中测试您的应用程序（旧浏览器，旧CPU，压力使用）。我们无法为您回答这个问题。对于在开发时已知的事情进行运行时转换肯定会更快。这种速度差异是否相关取决于您尚未披露的许多细节和应用程序要求（甚至可能没有经过深思熟虑），并且只能通过配置测试来解决。

如果是我，而且我有任何想法，也许我会这么说，这可能会影响性能，我发现做一些额外的打字（或搜索和替换）并没有更多的工作测试潜在的性能问题。

Answer 2

记住你的解析功能。

一个简单的事实是，在某个有限的时间范围内，您将处理的实际样式或完整样式字符串的数量可能非常小，并且还可能具有合理数量的重复。 / p>

因此，当您去解析样式表达式时，您可以执行一些简单的操作，例如将表达式存储在地图中，并检查您之前是否已经看过它。如果有，请返回之前获得的结果。

如果涉及重用，这将为您节省相当多的时间，并且如果不重复，可能不会花费您太多时间。

编写自己的解析器是否值得它造成额外的运行时间？

2 个答案: