Jump to content


removing 'unnecessary' bloat of jQuery

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


See the Pen RWxVYK by Liamii (@Liamii) on CodePen




i have jQuery loading in but i don't think i need it, its only used on one line. im happy to use the basic JS notation in its place.


var sizes = ["small", "medium", "large"];
for (var i = 0; i < 750; i++) {
  var sizeIndex = randomNumber(0, 2);
  var size = sizes[sizeIndex];
  var star = $('<div class="star ' + size + 'Star"/>').appendTo(sky); 

can anyone tell me what the replacement code would be? 




Link to comment
Share on other sites

ok, so i havent managed it BUT i have used only the core functions of zepto.js to reduce it from 84k to 15k 

  • Like 1
Link to comment
Share on other sites

I am not fluent in IQuery so, what is the bit that you want to replace?



var star = $('<div class="star ' + size + 'Star"/>').appendTo(sky);

What is it exactly that you are trying to achieve? Write the name of a class and create the element in one go? Or does this element already exists and you just want to rename?

  • Like 1
Link to comment
Share on other sites

It would look something like:

var star = document.createElement("div");
star.setAttribute("class", "star " + size + "Star");

(I'm assuming "sky" is a reference to a DOM element like a <div>)

  • Like 1
Link to comment
Share on other sites

You Might Not Need jQuery has a list of commonly used jQuery methods and the vanilla JavaScript equivalent.


One really useful method I found out about not too long ago is insertAdjacentHTML. It's the fastest way to add more than one element to the DOM, and the syntax is just like jQuery where you provide the HTML as a string. There are also 4 different ways to insert the HTML, like prepend and append, so it won't remove existing HTML like innerHTML does. The syntax is a little verbose, but we can wrap that up in a nice little function. This is almost identical to what you have.

var star = appendTo('<div class="star ' + size + 'Star"/>', sky); 

function appendTo(html, parent) {
  parent.insertAdjacentHTML("beforeend", html);
  return parent.lastElementChild;

See the Pen xwWOzZ?editors=001 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

thanks very much guys, both solutions are great. 

Link to comment
Share on other sites

This may be a dumb question, but when I first used jquery many moons ago for a toggle slide of a pushdown ad, after scriptaculo.us did not work at all in IE, (neither did mootools), it was only 20K.


I did not upgrade because subsequent versions were heavier, but then eventually there was some browser issue and I upgraded, and then it was 40k. In at least one of the Doubleclick support docs, I saw the suggestion that ad builders use zepto.js or jquery 1  to reduce file size.


Were they actually referring to that ancient jquery that was only 20K?

Link to comment
Share on other sites

I doubt they mean the version you are talking about. But that's strange if it's about file size because version 2 is smaller than the last 1.x version. Not sure why they said version 1. Maybe it has to do with supporting IE8, or perhaps there are deeper issues. I noticed that Microsoft still uses version 1 in their Visual Studio templates because of something that has do with validating data- attributes.

Link to comment
Share on other sites

Probably IE8. Ad serving software is concerned with lowest common denominator.



Followed a link to supported libraries on a support doc.






1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    


jQuery Mobile snippet: <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.