Question

I wrote a jQuery script (below) and I used the (document).ready(function($)) function
does it slow down the website, and if it does than can you please show me a way to create such functions without slowing down the site?
Thank you very much!

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

Answer 1

Simply using ready will not have a significant performance impact. A bigger issue is which selectors you use. For instance, “div.productInfo:first” should be fine on modern browsers with querySelector. However, on older browsers it may have to loop over divs until it finds a match. You could avoid that if that div had an id. I’m not necessarily advocating that; it’s just a general consideration.

EDIT: Actually, I believe jQuery will not leverage querySelector(All), since it notes:

Because :first is a jQuery extension and not part of the CSS
specification, queries using :first cannot take advantage of the
performance boost provided by the native DOM querySelectorAll()
method. To achieve the best performance when using :first to select
elements, first select the elements using a pure CSS selector, then
use .filter(“:first”).”

So even for newer browsers, it would be better to use:

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

jQuery would still have to loop over the divs in older browsers.