Jump to content
j.silver

Proper Location to Call a JS File

Recommended Posts

In a js tutorial of w3schools it is mentioned that calling a js file is done either in the head or body; if in the body, it is preferable to be at the bottom to avoid slowing down page loading should the js loading is slow. Since the browser reads the page from top to bottom, it will hit the head first. Does that mean calling a js file at the bottom of the body is better than calling it in the head?

Share this post


Link to post
Share on other sites

Its usual to put all JavaScript (as well as css in one css file) code in one js file, not including jquery i might add, this can lead to heavy large js file, with mobile devices it will hender loading of page if placed in head, so the placing of js links at bottom before closing body tag has become the norm, this way your html will be rendered much more quickly.You can also use script to gather all specific files into one file, minify which removes unnecessary space, comments etc, and store as cache file.The same for css files, it is said you should load the minimum css (background, font colours, layout styling etc) for page to show fully rendered, all other css is loaded by using JavaScript to place links to these remaining css styling in the <head>...</head>, this js code again is placed at the bottom of page before body tag.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

You can also use script to gather all specific files into one file, minify which removes unnecessary space, comments etc, and store as cache file.

Do you mean using the likes of PHP's include/require etc.?

 

The same for css files, it is said you should load the minimum css (background, font colours, layout styling etc) for page to show fully rendered, all other css is loaded by using JavaScript to place links to these remaining css styling in the <head>...</head>, this js code again is placed at the bottom of page before body tag.

 

Can you please elaborate further.

Share this post


Link to post
Share on other sites

No the css or js links go to php file, this link has ref to all js or css, the php file combines, strips, minfy these files into one lighter file, which can be stored as cache file.Not all css in css file is required to get a page to render completely, css may contain css for pop-ups, hover effects for css, jquery classes for effects for slide down/up fade in/out etc, as these aren't required until page is fully loaded and hover or click event takes place you can load important required css to show page in completely finished state first, then load rest using JavaScript to create link to css file containing the rest of css.

Share this post


Link to post
Share on other sites

Many thanks, dsonesuk. This is very valuable info. and should be essential especially to speed up loading in mobile devices. If you may kindly share a sample could, it would be a nice demonstration, or state what should I write to google sample codes of what you have explained.

Share this post


Link to post
Share on other sites

Sorry for my bad English. I had very similar question like author of this topic, maybe I don't understand everything correct.

 

For some time I though that position of script tag have matter only if its inline of HTML file. If you put long script before body, and your web browser must spend more time on interpretation this lines of code before HTML than it will show up later. But if you put js in external file it work different way and no matter where you put it it should be called only when DOM call was made. So different way from link tag that is threat like code was exactly there, like CSS that is read and must be read before HTML when interpreter of browser check the code to show off.

 

My question is maybe stupid, but like to be sure. Because lots of people and pages sometimes copy one answer all the time over the web, and sometimes it result is some "web myths" that nobody veryfying. Can someone confirm this with they work experience on large projects where you really see the difference?

Share this post


Link to post
Share on other sites

Your external JavaScript is read and loaded into browser cache as the page is read from top to bottom, so reading and loading into cache when src to js is placed in <head>...</head> will hinder rendering of the remaining html within the page until finished.

Share this post


Link to post
Share on other sites

What about a linked CSS file, should it be treated like a linked js and placed at the bottom of the body tag, or it should always be in the header, or makes no difference? My guessing is that it should always be in the header to make each and every bit of html load with proper CSS styling applied to it. There should be no lag between loading html and styling it. Am I correct?

Share this post


Link to post
Share on other sites

We have already been through this? load minimal css in head to show completed page layout, the rest of css will be loaded using JavaScript from bottom of page before </body> to place link in <head>...</head> for other remaining css.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

To the topic about position of external javascript file. Issue about my question was that I forgot about small detail. If we have external javascript and tag in head, we can use attribute defer="true" so it will be loaded at end. So we are not forced to put script tag to end of file. At least I understand this such way from w3school lesson about performance as alternative.

Share this post


Link to post
Share on other sites

The <script> tag has a defer attribute and an async attribute. They both do the same thing.

 

The disadvantage with using that attribute is that you have no way to know in what order the scripts will be loaded. If your script relies on jQuery and you're using defer on the jQuery script, it might not be loaded by the time your script starts running.

<!-- You can't be sure that jQuery will be available for your script in this example --><script src="jquery.min.js" defer></script><script src="main.js" defer></script>

Share this post


Link to post
Share on other sites

The <script> tag has a defer attribute and an async attribute. They both do the same thing.

Well not really, what would be point having both that do the same thing?Async loads javascript at same time html is rendered, and executes when loading of js file ends which will pause rendering while it does so.Defer loads javascript files at same time html is rendered, and but executes when rendering of html is completed.EDIT: Also defer executes scripts in same order they are listed, its the async which will have problem exercuting in correct order. Edited by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...