Question

我想问一下使用以下两种方法检测是否存在任何显着差异/性能问题：

假设我们正在测试3d变换。

使用Modernizr 3提供的新功能：

Modernizr.on('csstransforms3d', function(result) {
  if (result) {
    element.className = 'myFirstClass';
  }
  else {
    element.className = 'mySecondClass';
  }
});

用标准方式：

if (Modernizr.csstransforms3d) {
  element.className = 'myFirstClass';
} else {
  element.className = 'mySecondClass'
}

Answer 1

它们并不具有可比性，因为根据具体情况，一个人总是比另一个人更适合。性能不是真正的问题。

标准方法是，检查Boolean中的Dictionary值是一种非常快速的操作。如果您有一个功能可以响应某些用户交互而执行，这将是获取功能信息的最佳方式。例如：

$('#showVideo').on('click', function() {
    if (Modernizr.video) {
        // load HTML5 video
    }
    else {
        // load Flash video
    }
});

同样，收听JS事件非常有效。 Modernizr中基于事件的新模型允许您对Modernizr测试的完成做出反应。如果您的站点需要在功能检测数据可用时尽快进行更改，那么这非常有用。例如：

Modernizr.on('draganddrop', function(result) {
    if (!result) {
        alert('This site requires Drag and Drop. Please update your browser.')
    }
});

以前您必须在<body>上查看DOM更新并检查类以获取此信息。

Answer 2

Modernizr.on函数仅（或主要）用于异步检测和延迟操作。有关详细信息，请参阅@stucox的full explanation and example。

csstransforms3d不是异步的，可立即使用。没有理由使用on 事件回调方法。 setTimeout()调用函数效率相当低，这对性能没有好处。

仅在异步检测时使用on表示延迟events。

使用v3进行Modernizr特征检测

2 个答案: