Bootstrap
Why not "defer" bootstrap javascript in <head>? #36462
Replies: 7 comments 9 replies
-
|
Great question! I imagine we can make this change, but I'm curious if there's anything I'm overlooking. Thoughts @XhmikosR? |
Beta Was this translation helpful? Give feedback.
-
|
It depends on how you want to do it. Here is an explanation that I find well done (in French but use google trad) with tests and choose yourself. |
Beta Was this translation helpful? Give feedback.
-
|
have been using cdn bootstrap js and cdn popper js, both with defer for some years - works fine |
Beta Was this translation helpful? Give feedback.
-
|
it works well for me too, but what about layout shifts due to a deferred load of bootstrap js and css? |
Beta Was this translation helpful? Give feedback.
-
Deferred CSS? what do you mean? |
Beta Was this translation helpful? Give feedback.
-
|
Because we want our Html and CSS to load first and javascript at the last |
Beta Was this translation helpful? Give feedback.
-
|
Any progress on this? |
Beta Was this translation helpful? Give feedback.
-
|
yes there is a answer, it's not just defer, it's also async, it's up to you, not bootstrap.. And the starter template is just a start. |
Beta Was this translation helpful? Give feedback.
-
how? async will load the script before dom is created fully (means domcontentloaded). defer seems to be working but the devs did not add any comment for defer. |
Beta Was this translation helpful? Give feedback.
-
|
Most developers use the sass version not cdn. |
Beta Was this translation helpful? Give feedback.
-
w t f? Are you bot? what sass CSS file has to do with JavaScript flie? |
Beta Was this translation helpful? Give feedback.
-
|
Because when you use sass you download the full package. And nice speech by the way, such a little kid. |
Beta Was this translation helpful? Give feedback.
-
|
Play nicely people. |
Beta Was this translation helpful? Give feedback.
-
With "async" and "defer" options for controlling when javascript is loaded, why does Boostrap documentation still recommend placing the bootstrap <script> tag before the closing body tag (https://getbootstrap.com/docs/5.2/getting-started/introduction/)? It seems like antiquated advice. The "defer" attribute tells the browser to execute the javascript after the document is loaded and parsed (they wait if needed), right before DOMContentLoaded. According to (https://caniuse.com/script-defer), 97% of all browsers support "defer".
As stated in this thread (https://stackoverflow.com/questions/56105230/bootstrap-4-scripts-best-location-and-scripts-tags), "Head is for external resources. To have all dependencies out of the way at the start of the document is best practice. The
<head>was made for exactly that. As the DOM is not loaded at that moment in page loading, this will fail all references to the DOM made there. There used to be a (dark) time, before defer, where it was common to get the advice to place the script-includes after</body>but before</html>."This:
Instead of this:
Beta Was this translation helpful? Give feedback.
All reactions