I spent a few hours over the last few days reworking some of my javascript files so they could all be loaded toward the end of my source code (or, if they must be placed earlier, they would wait for jQuery to be defined, which is loaded in the footer but is required by most of my scripts). I then moved all scripts that could be moved to end of the source code.
So a rough example of the change..
Original:
<html>
<head>
<title>This is still an awesome web page</title>
<script type="text/javascript" src="/path/to/script.js"></script>
<script type="text/javascript" src="//www.example.com/path/to/another/script.js"></script>
<script type="text/javascript" src="/path/to/jQuery/or/some/other/important/library.js"></script>
</head>
<body>
<p>lots of great content</p>
<script type="text/javascript" src="/this/script/must/be/located/in/the/body.js"></script>
<p>more great content</p>
</body>
</html>
Updated:
<html>
<head>
<title>This is an awesome web page</title>
</head>
<body>
<p>lots of great content and maybe lots of images too</p>
<script type="text/javascript" src="/this/script/must/be/located/in/the/body.js"></script>
<p>more great content</p>
<script type="text/javascript" src="/path/to/script.js"></script>
<script type="text/javascript" src="//www.example.com/path/to/another/script.js"></script>
<script type="text/javascript" src="/path/to/jQuery/or/some/other/important/library.js"></script>
</body>
</html>
So I made that change and looked at Chrome's Network traffic when I reloaded some pages. I was surprised to discover that Chrome still loads my javascripts before loading images and such.
I did some reading and it seems like this is due to Chrome's preloader (https://plus.google.com/+IlyaGrigorik/posts/8AwRUE7wqAE) scanning ahead and loading important files sooner.
If Chrome (and other modern browsers I assume) are going to do this, then is there any reason to continue placing javascripts toward the end of the source code?
You'll want to place your scripts at the end of your HTML if;
1 - Your scripts need access to DOM/CSSOM nodes, therefore they have to be parsed prior to your JS.
2 - You want to display the page while the JS is still downloading and executing against the page.
Related
I have a problem with loading JavaScript in Google Chrome.
I've created the separate js file with a simple alert message and then linked it before the end of the body tag.
Google Chrome shows the alert box first then when I click 'ok' the content is loaded.
In other browsers it works fine, I mean the alert box shows at the same time as the content of the web page.
In short, Google Chrome loads the javascript first even when I put the script tag before the end of the body tag.
alert("Hello World!");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Write Your First Program</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="text-vertical-center">
<h1>Write Your First Program</h1>
<h3>JavaScript Essentials</h3>
<br>
</div>
</header>
<script src="js/scripts.js"></script>
</body>
</html>
Do you have any idea how to fix this problem?
Thanks a lot
Your problem is that your script have the tag async, which let it execute whitout taking care of the web page loading state. Remove the async tag, or replace it with defer, which execute the script after the page loading.
In order to prevent any problem with script and html/css loading times conflict, you should encapsulate your Javascript's scripts with window.onload = function() { //code here }. This will guarantee that your whole page is loaded before executing your code.
That is a problem with Chrome. The developers of chrome for some reason have still not corrected that. If you have alert or a prompt pop-up, which is the first thing that user has to interact with in your website, chrome will not load HTML until after the pop-up has been closed.
Try including jquery cdn just above your script tag in body.
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous">
</script>
This will work fine!!
I also had this problem and realized that my Google chrome was just loading the cached version of page(the one before putting my script tag near bottom).
Closing the window and reopening the page worked fine.
async and defer boolean attributes are only helpful when the script is inserted in the head portion of the page. They are useless if you put the script in the body footer like we saw above.
(Refer following article: https://flaviocopes.com/javascript-async-defer/).
I am also facing similar issue and using window.onload = funcRef; with cleared cache also does not work on my google chrome. I have tried all of this with disabling all my browser extensions but in vain.
I was finally able to, not solve, but agree upon a way around - which was - to include a
jQuery CDN
before my javascript script in the body. Hope this helps.
I am having a trouble with figuring out what "this spsefic outcome" in Google PageSpeed Test actually mean.
I am testing this website: www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com
Can anyone advice me please? I have managed to fix all of the other errors - but I am completely stuck at this one, I understand that CSS has to be in the head of the page, is this telling not to place it in the head but at the end of the page?!
Your browser freezes page rendering while loading JavaScript
Quick answer: you just have to put your JavaScript src below your content.
Why? Because when your browser begins loading JavaScript, it freezes the rest until it's done with that.
Loading the content of your page first allows it to be displayed, and then JavaScript has all the time it needs to load.
So do like this:
<html>
<head>
</head>
<body>
My great body content!
<script type="text/javascript" src="my/js/files.js">
<script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
</body>
</html>
Instead of this (which is unfortunately still really common):
<html>
<head>
<script type="text/javascript" src="my/js/files.js">
<script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
</head>
<body>
My great body content!
</body>
</html>
Alternately, just add the async at the end of your script tag.
<script src='' async></script>
This question already has answers here:
Where should I put <script> tags in HTML markup?
(21 answers)
Closed 9 years ago.
An IBM website talking about rapid web development here mentioned a useful skeleton HTML. In the template, the script inclusion is inside body rather than head. Is it a good practice? Isn't it better to put any library inside head instead?
<html>
<head>
<title>Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<!-- The main HTML will go here -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
VS
<html>
<head>
<title>Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- The main HTML will go here -->
</body>
</html>
It is now standard for script tags to be included just before the closing of the body tag so that the script loading does not block the rest of the page loading.
<script src="myScript.js"></script>
</body>
With this, the user will not have to wait as long to see something on the page, then the javascript functionality is added.
However, there are more and more sites and "web apps" that are javascript/ajax heavy and may require the scripts to be loaded before anything is shown on the page anyway. That is less common, but that is a case where the script could be included in either location, since the visual result would be the same if javascript is responsible for creating/loading the content.
To verify: here is Google's recommendation: https://developers.google.com/apps-script/guides/html/best-practices#load_javascript_last
Also consider loading libraries from a CDN, so that you can take advantage of browser caching.
Yes / No
Yes it is good practice as the page will load faster if the code is in the ending...
It waits for the whole page to load and then loads the scripts.
Here's how:
There was this site i visited, which quickly responded to my browser's request. but when i got the response, it was some white page with some boxes and some text. and it was taking ages for the page to load. After some time some images appeared in the boxes and the text got styled.
Why?
When the page loaded the script was placed in the head. So, the script was loading and the images and the styles were in the queue. So i had to witness an ugly page while the script loads.
Alternative:
If the script was placed in the ending of the page, just before the </body> tag, the styles and images would have loaded faster so i wouldn't have to see an ugly site, then the page would load.
References:
http://developer.yahoo.com/performance/rules.html#js_bottom
http://stevesouders.com/docs/googleio-20080529.ppt
Does Google Analytics have performance overhead?
http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/
Okay, before I get buried in sea of red tape for asking a frequently asked question, please hear me out. I am using Phonegap to develop a mobile web app and jQuery for swiping between different pages. By different pages, I mean different HTML files and not divs within one html file. For illustrative purposes, let us take two html files out of the lot I have in the app.
index.html
test.html
Assume that the control is in test.html and I do the following
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script>
$(function(){
$("#home").bind('swipeleft',function(event, ui){
$.mobile.changePage("../index.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div data-role="content">
<p>Slide finger left</p>
</div>
</div>
</body>
</html>
I read the discussion here and tried adding "&callback=?" to the end of index.html. That removed the error "Origin null is not allowed by Access-Control-Allow-Origin", but it propped up a new one "Resource not found". The following errors were obtained in Webkit based browsers (Mobile Safari, Chrome). I ran the file in Firefox and got a plain "Error Loading Page" alert on the screen.
Please help me out with this situation. A million thanks in advance!
The following script request seems to have problems in any browser except Firefox.
<!DOCTYPE html>
<html>
<head>
<title>Browser Delay</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.4");
</script>
</head>
<body>
<div id="logicbuy_ad">
<!-- Problem is here!!!!! -->
<script type="text/javascript" src="http://www.symbiosting.com/LogicBuy/content-syndicate-laptopmag.php"></script>
</div>
</body>
</html>
When the script loads, even in an iframe, IE and Chrome seem to hangs until the script finishes.
Is there a way to load this script so that it will not stop/hang the browser?
It appears that the problem only happens when the script is loaded from a local page. (ie. C:\Users{username}{Code Base}\index.html )
Once I hosted the file on IIS, the problem went away.
I'm still very curious as to why the script would hang when displaying the local file as opposed to the hosted version