一个免费的JavaScript加速器，适合所有人！

以下是《科技时报》第207期的重新发布。

W3C Selector API是DOM脚本世界中令人兴奋的发展。 到目前为止，使用DOM Level 2 API，获取对DOM中HTML元素的引用的唯一方法是使用document.getElementById或document.getElementsByTagName并手动过滤结果。 随着CSS的兴起，JavaScript程序员提出了一个显而易见的问题：“如果浏览器能够真正快速地选择与CSS选择器匹配的HTML元素，为什么不能呢？”。

Selector API定义了querySelector和querySelectorAll方法，这些方法采用CSS选择器字符串并分别返回第一个匹配元素或匹配元素的StaticNodeList 。 可以从document对象中调用这些方法，以便从整个文档中选择元素，或者从特定HTML元素中选择仅从该元素的后代中选择的元素。

为了说明使用Selector API将使您的生活变得多么轻松，请看以下HTML示例：

<ul id="menu">
  <li>
    <input type="checkbox" name="item1_done" id="item1_done"> 
    <label for="item1_done">bread</label>
  </li>
  <li class="important">
    <input type="checkbox" name="item2_done" id="item2_done"> 
    <label for="item2_done">milk</label>
  </li>
  <!-- imagine more items -->
</ul>

我们的任务是选中具有“ important ”类的列表项的所有复选框。 仅使用DOM Level 2方法，我们可以这样做：

var items = document.getElementById('menu').getElementsByTagName('li');
for(var i=0; i < items.length; i++) {
  if(items[i].className.match(/important/)) {
    if(items[i].firstChild.type == "checkbox") {
      items[i].firstChild.checked = true;
    }
  }
}

使用新的选择器API，我们可以将其简化为：

var items = document.querySelectorAll('#menu li.important input[type="checkbox"]');
for(var i=0; i < items.length; i++) {
  items[i].checked = true;
}

好多了！ 这些方法还支持选择器分组-用逗号分隔的多个选择器。 Selector API现在可以在Safari 3.1，Internet Explorer 8 beta和Firefox 3.1 alpha1中使用。 Opera还致力于增加对API的支持。

如果您是众多JavaScript库之一的忠实支持者，您可能会想到“但是，我已经可以做到这一点。” 使用JavaScript库的好处的一个很好的例子就是几乎所有CSS选择器的实现。 最近，由于库作者一直在分享他们的技术，我们已经看到CSS选择器实现中的巨大速度改进。 那么使用Selector API有什么好处？ 一言以蔽之：速度-本机实现速度很快！ 而且更好的是，所有的javascript库都有望受益。 jQuery和Prototype已经在开发使用Selector API的实现，而Dojo Toolkit ， DOMAssistant和base2已经使用了它。

这三个库是第一个受益的库，这是有原因的。 凯文（Kevin）在题为“您的JavaScript库标准是否合规？”的文章中提到了《 技术时报》第190期 ， Selector API使用标准CSS选择器，因此，如果浏览器不支持某个选择器，则将无法使用它。 已经利用Selector API的库是仅支持标准CSS选择器的库。 对于这些库，支持API（几乎）就像这样做一样容易：

if(document.querySelector) {
  return document.querySelector(selector);
} else {
  return oldSelectorFunction(selector);
}

支持自定义选择器的库将有更多工作要做。 风险是，如果您在项目中广泛使用了自定义CSS选择器，则所选库可能难以传递速度优势，因为该库将不得不使用其默认选择器而不是Selector API。 如果库以某种方式重新连接其自定义选择器，以便他们可以使用Selector API，则次要风险是代码膨胀增加。

希望Selector API会鼓励使用标准CSS选择器，而不是自定义选择器。 实际上，如果可以很好地使用新的浏览器版本，并且新的Selector API的性能优势足以吸引人，那么我们可以看到自定义选择器功能已移至仅在存在旧兼容性要求的情况下才需要使用的补充库。

我认为Dean Edwards的base2库具有最好的实现。 Base2完全实现了API，这意味着您可以使用标准的标准API方法来编写JavaScript —如果浏览器不支持，则Base2仅创建自定义的querySelector和querySelectorAll方法。 没有比这更清洁的了。 但是，Base2确实在其自定义选择器函数中实现了非标准的“ != ”属性选择器，这显然是由于同伴的压力，因此必须为此扣除点。

无论您使用JavaScript库还是自己滚动库，Selector API的新浏览器实现都可以使每个人立即提高速度。 我们都赢了，万岁！

图片来源： 瑜伽士

From: https://www.sitepoint.com/a-free-javascript-speed-boost-for-everyone/