使用 v3 进行 Modernizr 特征检测

Question

请问以下两种检测方法是否存在重大difference/performance问题：

假设我们正在测试 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

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

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

$('#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 特征检测

Modernizr Feature Detection with v3

html

css

modernizr