Just replaced all the Jquery functions with pure javascript in my website :)

what is reason?

@devk It was blocking my initial render as it need to load jquery from cdn first and render the page. So I just used js as the code that was blocking the render wasn't that big.

Good work! Fight the bloat :)

Isn't it refreshing? I've been jQuery free for months and I couldn't be happier.

Preachhhh

Just load it with a defer attribute and hook your initial $(function (){}) call inside a document.addEventListener("DOMContentLoaded", function () {});

jQuery can be hefty, but it's cross browser API normalization is a godsend for consumer websites.

why why why???

@kwilliams yup, knowing when you do need jQuery is the flip side.

@pixeltherapy Yeah I will be using JQuery here and there. But I am trying to make sure none of them is render blocking :)

What I do with scripts is that I have a script on the main page that waits until the site is ready, and only then it starts loading the scripts. You can even chain them so dependencies don't break. This works with both libraries and pure JS.

@620hun I think you are talking about requireJS. I might use it at some point in future. Good idea!

@tahnik No, this is my own script. I wrote it based on Google's recommendations.

Just add a defer attribute to the scripts and it asynchronously loads them and the executes them in the order they were called. No special library required and degrades gracefully (older browsers ignore the defer attribute and load blocking).

@kwilliams https://varvy.com/pagespeed/...

Using an onload handler is very old fashioned, as it doesn't start downloading the JS files until after the document is ready.
Using the defer attribute means it starts downloading all the JS when referenced without blocking the page, then automatically executes each one in the order it was requested by the page.
So you can put your JS files before the body, they will download in the background while your page renders, then be executed in order at the end.

If your client Internet is so slow you can't request the page itself and the JS files then you have a very specific use case.
Generally defer will allow your website to load quickly with progressive enhancement without too much fucking about.

@kwilliams This is how I do it:

function deferLoad(src, dep) {
var element = document.createElement('script');
element.src = src;
document.body.appendChild(element);
element.addEventListener('load', function () {
if (dep) dep();
});
}

Usage: deferLoad("script.js",function(){doWhenScriptLoaded()});

@620hun And this is fired in an onLoad event listener.

How about we write the render blocking code straight in vanilla JS and everything else in Jquery. In this way you don't need to think about the script loading part as that's not blocking anything.

Isn't that just easier?

@tahnik The thing is your browser will not know what is essential for the page. It'll load everything that you reference. You can deferLoad jQuery using my script, I've done it before. I just prefer not to use jQuery at all.

What my script does: no external scripts on the page right until the point where the page is ready. This is when my script loads what you tell her to load. In practice my page will have a loading page that's there until the callback of the last script in the chain removes it. So whenever the user sees the actual main it'll be completely ready.

@tahnik I would host jQuery locally and focus on a fast delivery from the server. Use critical CSS for the initial render and there's no need to defer or use script-loaders. RequireJS and others make sense for web apps but are overkill for a website imho.

I'm looking forward to making this a moot point with HTTP/2. Maybe that's what I'll do on Server Saturday 🙂

@tahnik or use promises! Not looked at the issue in a while but this is what I mean:

https://npmjs.com/package/...

@pixeltherapy I use cdn for jquery as that is the fastest you can deliver a script. HTML/2 looks promising so might use that in future. I've used promise for other things but for loading script it's just overkill.

Whats the website?

@tahnik I beg to differ on the point of CDN being the fastest you can deliver jQuery.

In an ideal world of fast internet for everyone, you're right. However, many people have sub-par connectivity and with a high latency connection (>500ms) the additional DNS lookup to CDN is often more expensive than just delivering jQuery along with your other assets.