Question

根据经验，哪些编写跨浏览器的Javascript函数的方法会表现得更好？

方法1

function MyFunction() 
{
    if (document.browserSpecificProperty)
       doSomethingWith(document.browserSpecificProperty);
    else
       doSomethingWith(document.someOtherProperty);
}

方法2

var MyFunction;
if(document.browserSpecificProperty) {
    MyFunction = function() {
       doSomethingWith(document.browserSpecificProperty);
    };
} else {
    MyFunction = function() {
       doSomethingWith(document.someOtherProperty);
    };
}

编辑：赞成迄今为止所有优秀答案。我已经将函数修复为更正确的语法。

到目前为止，关于答案的几点意见 - 虽然在大多数情况下这是一个相当无意义的性能增强，但有一些原因可能仍然需要花费一些时间来分析代码：

必须继续慢电脑，移动设备，旧浏览器等。
好奇心
使用相同的绩效的一般原则增强其他场景评估IF语句需要一些时间。

Answer 1

除非你这样做万亿次，否则无关紧要。使用对您和/或您的组织更具可读性和可维护性的那个。通过编写干净简单的代码，您可以获得的工作效率提高，而不仅仅是缩短JS执行时间的十分之一秒。

你应该只是开始思考关于什么表现更好的当且仅当你编写代码并且速度慢得令人无法接受时。然后你应该开始追踪瓶颈，这永远不会是这样的。在这里，你永远不会从一个切换到另一个，从而获得可衡量的性能提升。

Answer 2

不幸的是，上面的代码实际上并不是跨浏览器友好的，因为它依赖于其他浏览器中没有的mozilla怪癖 - 即function 语句被视为{{1}分支内的表达式在其他不基于mozilla构建的浏览器上，上面的代码将始终使用第二个函数定义。我做了一个简单的测试用例来演示这个here。

基本上ECMAScript规范说函数语句的处理方式与var声明类似，例如。它们都被提升到当前执行范围的顶部（例如，＆lt; script＆gt;标记的开头，函数的开始或eval块的开始）。

Answer 3

为了澄清olliej的回答，你的第二种方法在技术上是语法错误。你可以用这种方式重写它：

var MyFunction;
if(document.browserSpecificProperty) {
    MyFunction = function() {
       doSomethingWith(document.browserSpecificProperty);
    };
} else {
    MyFunction = function() {
       doSomethingWith(document.someOtherProperty);
    };
}

这至少是正确的语法，但请注意，MyFunction只能在发生这种情况的范围内使用。（省略var MyFunction;，最好使用window.MyFunction = function() ...表示全局。）

Answer 4

从技术上讲，我会说第二个会表现得更好，因为if语句只执行一次，而不是每次运行该函数。

然而，差异对于无意义而言可以忽略不计。与简单地调用函数的性能损失相比，诸如此类的单个if语句的性能损失将是微不足道的。即使被称为百万次，它也会产生微小的差异。

第一个更容易理解，因为它没有基于条件两次定义相同函数的尴尬，两个版本的行为都不同。这似乎是后来混淆的一个因素。

我不会是第一个说出来的人，除非你对这种优化事情感到疯狂，否则你将获得更多的代码可读性。

Answer 5

我通常更喜欢第二个版本，因为条件只需要评估一次，而不是每次调用，但有时它不可行，因为它会妨碍可读性。

顺便说一下，您可能希望使用?:运算符，例如（取自生产代码）：

var addEvent =
    document.addEventListener ? function(type, listener) {
        document.addEventListener(type, listener, false);
    } :
    document.attachEvent ? function(type, listener) {
        document.attachEvent('on' + type, listener);
    } :
    throwError;

Answer 6

对于您的简化示例，我会做以下假设您的浏览器属性检查只需要执行一次：

var MyFunction = (function() {

      var rightProperty = document.browserSpecificProperty || document.someOtherProperty;

      return function doSomethingWith() {
            // use the rightProperty variable in your function
      }
})();

Answer 7

表现应该几乎相等！

关于使用像JQuery这样的Frameworks摆脱浏览器兼容性问题！

如果表现是您的主要目标，请查看SlickSpeed！这是一个对不同JavaScript框架进行基准测试的页面！

哪些跨浏览器的Javascript函数表现更好？

7 个答案: