jQuery（document）.ready（function（$）

Question

我写了一个jQuery脚本（下面），我使用了（document）.ready（function（$））函数 它是否会减慢网站的速度，如果它确实比你能做到的那样，请告诉我一种创建这些功能的方法，而不会减慢网站的速度？ 非常感谢你！

<script>
jQuery(document).ready(function($){ 
    $('#columns').wrapInner('<div id="columnsInner" />');
    $("div.productInfo:first").wrap("<div id='productDetails' />"); 
});
</script>

Answer 1

简单地使用ready不会对性能产生重大影响。更大的问题是您使用的选择器。 例如，“div.productInfo：first”应该适用于querySelector的现代浏览器。但是，在较旧的浏览器上，它可能必须循环遍历div，直到找到匹配项。如果那个div有id，你可以避免这种情况。我不一定主张那个;这只是一个普遍的考虑因素。

编辑：实际上，我相信jQuery不会利用querySelector（All），因为它注意到：

  

因为：首先是jQuery扩展而不是CSS的一部分   规范，查询使用：首先不能利用   本机DOM querySelectorAll（）提供的性能提升   方法。使用时达到最佳性能：首先选择   元素，首先使用纯CSS选择器选择元素   使用.filter（“：first”）。“

因此，即使对于较新的浏览器，最好使用：

$("div.productInfo").filter(":first")

jQuery仍然需要在旧版浏览器中循环使用div。