Rails help getting javascript loading faster from bottom - javascript

I am have that problem, that I got some javascript that shows a flexibg image. It only works if it on the bottom of the page. just before
The problem is that the javascript gets loaded as the last. And I can see the flexi bg image just streching wish is not nice.
My code:
<%= javascript_include_tag 'flexibg.js' %>
</body>
What can I do so that the flexi bg javascript get loaded as the first or faster?
EDIT:
I have moved the javascript at the top of my body tag and it still works. But it is slow as hell.

Ok, to understand your problem you need a basic understanding of how a page loads. The short (not 100% accurate, but good enough) explanation is that the browser goes line by line, starting with the top line of the page. As it hits each script tag, it loads it (and does NOT move on to the rest of the lines until it is done, which is why it is considered best practice to put your script tags at the bottom).
As soon as the browser has (in its opinion) enough to be worth rendering, it starts rendering what it has. Very likely this is what is causing your problem: the browser is initially loading the image, with the wrong dimensions, and only when the JS gets loaded/run do the correct dimensions get set.
To solve this problem, what you have to do is hide the entire page initially, and then show it once the page has been loaded. Basically you want to do something to the effect of:
<script src="yourFile.js"/> <!-- This could go at the end -->
<body id="theBody" style="display:none"> <!-- rest of document --></body>
<script>document.getElementById("theBody").style.display = "";</script>
This way, the browser will hit the BODY tag, and subsequent content, but it won't render any of it because of the display:none style. Then, when the browser gets down to the end, it will hit the script tag that removes the display:none style, showing the page.
That's just a quick example, and some details might be off (I don't think script tags are allowed after the body tag, for instance), but hopefully you get the idea. If not, comment and I'll try to explain further.

Related

Script call at end of HTML causing page to render differently in Chrome

I ran into an issue today while working on a new form and it had me stuck and confused as to what was going on for almost an hour. Eventually the last thing I tried was replacing a useless script call I had at the very bottom of my HTML code.
This is what I had before:
</form>
</body>
</html>
And this is what I added:
</form>
<script src="script_printpage.js"></script>
</body>
</html>
Inside the script file is only this:
function printPage() {
window.print();
}
So now that you know what I had and what I changed, let me explain what was going on.
I had a simple page (that I can't access from home, so I can't post it) that had a container around, some basic formatting, you name it. It wasn't really fancy or anything and I keep a tight ship on all my spacing and elements. All my other forms I have done also have this script at the bottom so that meant I never saw this issue until now.
If I add any input element like an input type text, when I refresh the page with the script line not present, the text control will actually "grow" for a split second until it reaches normal size and normal appearance. I print-screened it at work and saw what it looked like the very moment it loaded and it was like there was no padding or anything and there was only a thick black border.
This behavior would repeat pretty much every single time I refreshed the page. I could sit there and constantly refresh and it would always do it. It's hard to explain but basically the input control starts smaller and "grows" up to the normal expected size in a fraction of a second if the script line at the bottom is missing.
If I re-add this script line at the bottom, it never happens. The page loads and the text control is already at normal size and no amount of refreshing changes its appearance.
What could be causing elements to resize on page load like this? And why on Earth does a script that's doing nothing affect this? I wish I could give you all the code I have but I can't access it from home.
I tried this code through Edge and it never happened with or without the script call and in my testing it doesn't happen in Firefox either. The computer I work on was on the latest version of Chrome, so I know it happens now on the current version, whatever it is.
Any help with this would be great. For now I can keep this useless script at the bottom just so I am not driven insane.

How to stop page load in html static page

Is there in HTML (javascript) or other static html tech
can:
Stop page loading (if browser does not download yet)
Stop page rendering (from where the code placed)
Stop javascript executed (from where the code placed)
Simply put, is there a code like
<script>window.StopWhateverBelow()</script>
To let browser totally ignore whatever below the code.
UPDATE
I understand the browser may already download the whole thing. What I want is, from the code, page should stopped, for example: if I put the code just after <body> visitor should see blank page, if I put the code in middle of the page, page should be just half like you pressed ESC
ANSWER
As bukko suggested, comments done the trick. But not full, just half
If you put <!-- in html page, the rest will be ignored. And in Javascript
document.write('<!--');
Done the trick.
For about make sense:
Here is how this code make sense: when you page load some offpage script, the script is dynamic. When the script code found something wrong (or match some condition), you have one more option to stop the page from rendering, loading, download...
You could do window.stop(); for most browsers besides Internet Explorer. For IE, I had to use document.execCommand('Stop');
If you already have html comments on your page, #bukko's solution doesn't fully work. Stuff after the html comment will get rendered normally.
Something else to try is:
document.write('<script type="text/undefined">')
The rest of the document gets interpreted as part of the script tag, and because the script isn't text/javascript, it gets ignored.
Worked for me, thought I'd share it.
Edit
I've seen the script trick not work in Chrome.
This does work, but I have not done extensive browser testing:
document.write('<style type="text/undefined">')
window.stop(); //works in all browsers but IE
if ($.browser.msie) {document.execCommand("Stop");}; //works in IE,
document.execCommand works in IE, however it does stop some of FF, NS and some other browsers' functions. Like displaying GIF's animation for example. Using "if browser is IE" makes these two codes work perfectly in all browsers.
Well, there is:
<!--
terminated by
-->
for HTML, but scripts will ignore this.
What you are asking makes no logical sense. Simply for two reasons:
Data is ALREADY sent to the user (HTML / JS) so even tho if you COULD hide content, the data would sitll be there for a user to see (if they view source for instance).
Why would you stop 'execution' of a page? It loads simple html structure and reults in a visual display, you should focus on the server site (php for instance) to hide or not send the content in the first place.
If you want to visually hide elements tho, you could use CSS styles (hide divs or the like) with simply adding style="display:none;" to a div like so:
<div style="display:none;">
This text will be downloaded by the user, but hidden from view due to CSS inline style
</div>
If you want to add commenting (thats just for your reference), then use comment formatting:
<!-- this is a comment and will not show up to a user -->
Reference for comments: http://htmlhelp.com/reference/wilbur/misc/comment.html
put window.Stop() wherever you want to stop the page from getting renderred
You could also hide the body like that:
var style = document.createElement("style");
style.innerHTML="body { display:none !important; }";
document.getElementsByTagName("HEAD")[0].appendChild(style);
HTML is static content so the server reads whatever you have written in the file unless you comment it out. For a dynamic file like what you are asking for you need to use php which can do this type of thing.
Just not much related to the question, but I thought it may be useful for some persons. If you want to jump to other page during page loading use window.location = "somepage.html"; or you can redirect users to the previous page: window.history.go(-1); Useful in JavaScript conditional statements
If you are using ASP or PHP, HTTP protocol automatically stops but HTTPS protocol don't stop automatically.
To stop it use:
In ASP:
dim r= accept.secure.protocol
r.onload=window.callback('c')
//to firefox,opera,safari
new clientObject(r).access()
// to chrome,ie
forEachElement(a==null);
PHP code:
$a.window ;
All this scripts sends the browserstring "elementcast" by post method
The stop methods can break things that have already started to load.
If you want to load everything above a certain point and skip everything below a certain point:
<p>Everything works above this point.</p>
<pre style="display: none !important;">
<p>As long as the PRE tag remains open,
nothing works below this point</p>
<script>document.write('Nope');

If Javascript code block is not at end of HTML file, but is using jQuery's $(document).ready(function() {...}), will it slow down the page display?

It is said that Javascript code should be all placed at the end of HTML file, so that the page content is shown first, for the user to see something (so that the user is satisfied to see something instead of waiting another 12 seconds, for example).
But to better encapsulation of the HTML and match Javascript code, such as an "Image Carousel", then usually the HTML and Javascript is placed in one single file, so there are Javascript code blocks all intermixed with HTML code throughout the final HTML file.
But what if all these Javascript code blocks use jQuery's $(document).ready(function() { ... }) to perform the task, then won't the page display be very fast as well? I think not as fast as when the Javascript is actually placed at the end of the HTML file, but close enough, because it merely adds a function to the ready event queue.
I think the point is to place the js at the bottom of the page (usually just inside the closing </body> tag) so that the content of the page is displayed while the js is downloading.
If you have your jQuery code spread out throughout the HTML in separate .ready() calls, then no matter what, it won't run until the <body> has fully loaded. So the question would be how much javascript do you have in the HTML?
If there's quite a bit, then it will slow down the display of any content that comes after each script. If it is a relatively small amount of code, then it won't likely make much noticeable difference.
If it is really important to you to have the page's content displayed as soon as possible, then place all scripts after the content.
I personally wouldn't mix javascript with HTML just for the sake of association. You could have unexpected results if you start removing/appending content that happens to include a script. I'd rather use appropriately named classes and IDs, as well as lots of code comments.
Also keep in mind that those .ready() calls won't work until jQuery has loaded, which would mean that it would need to be at the top of the page, or at least before your first call.
So again it gets back to the question of which is more important to you. If you want the content visible as quickly as possible, place all js at the bottom. If you want your method of intermixing js and HTML, you'll have some delay in displaying the page.

Forcing external javascript files (from Digg, Reddit) to load last

I'm working on a WordPress site that has two external javascript files load about half-way down the page. The files are badges from Reddit and Digg, and often add about 4-8 seconds to the total loading time of page — while also preventing the bottom 50% of the page from loading too.
The Digg and Reddit javascripts render an <iframe> (which I assume needs to load completely before the rest of my web page is loaded), and thus adds a big amount of extra load time.
I tried moving the <script> tags to the bottom of the page, right before </body>, but the badges render just below the footer instead of where they need to be.
How can I force these two external javascript files to load last, but still render where they need to?
You could create a div ["divA"] where you want your Digg/Reddit iframes to go [So this is basically just a placeholder]. When the page is done loading, append a "script" element to head so the Digg/Reddit scripts can load. When they're done loading, you can move them from body to divA.
document.body.removeChild(iframe);
document.body.getElementById("divA").appendChild(iframe);
Where you render the script tags shouldn't necessarily imply where the UI those scripts generate appears-- that it does seems a goofy or questionably designed. Do the scripts have known functions in them that let you hand them a container div or something in which to render their UI?
You're correct, of course, in loading them last, before </body>. That's the right strategy.
The quick answer is - no simple way. If you user defer="true" on the script tags, and they use document.write, it will still write out the content where it was when it loaded and not where the script tag was inserted.
Some of the answers in this question might help you: How can I stop an IFrame reloading when I change it's position in the DOM?
Some of the other answers in this thread suggest removing the iframe and then reinserting it. However, that will lead you straight to the problem in the above-linked question -- it will cause the content of the iframe to load twice.
The general approach will be to put a placeholder where you want them and then move them into that placeholder when they are ready.

Optimal location for javascript includes

I've read that it is better to place your <script> tags at the end of the document. The argument for doing this appears to be that the browser will stall rendering the page below a script tag until it has loaded and and executed the script. If your script tag is at the top of the page, rendering is stalled for a while, which is bad.
However, I am not sure if this is really true any more.
Looking around, I normally see the following locations...
In the <head> of the page or Just inside the <body> tag
Stackoverflow is an example of a site that puts the script tags in the head, and since they are normally rather obsessed with performance, I am starting to wonder if position in the page is important at all.
Last thing in the body element
The other common place to put javascript appears to be right at the very end of the <body> element. I am assuming this means that the page can render while the javascript downloads and gets on with doing its thing.
But which is better?
Does anyone have any thoughts or advice on this? I am looking to try and get our pages to perform and appear to the user as quickly as possible.
Does it matter? What are the advantages of being at the top of the page? Bottom of the page?
It really depends.
There is no catch all answer for this because it depends on what your javascripts are acting on.
Putting scripts at the end of the page is sometimes needed if your acting on a DOM element that needs to be loaded for the script to run. Say you want to focus on a control and your script is:
var mytext = document.getElementById("mytext2");
mytext.focus();
Well in this case you would want it to execute at the end of the page, after mytext2 control has already been loaded by the browser. This is less important for script blocks that only contain functions that are called by events.
If you have a big .js file that contains libraries of functions you may also want to put that at the end of the page so the browser will load the page faster before loading the large .js file.
Google analytics suggests putting their tracker at the end, to make sure the page has been delivered before you count the hits, but in some cases it suggests putting the script into the header too, it works both ways.
So, rule of thumb for me is, HEAD scripts for everything except things that execute in-line and act on DOM objects, or large scripts that you want to load after the page.
Rick Strahl just wrote a great blog on placement of Javascript in .net too:
The only validating way is to include it on the top (in the <head> section), but in the bottom will be faster to load - the rest of the page will load faster if you have script near the bottom, giving the user better response and making the experience better.
The problem is that most web browser stop rendering the HTML of the page until they've fetched and parsed all JavaScript code so far. So if you have a slow-loaded .js file included in the <head>, no HTML will be rendered and images will not even start to download before the .js have been downloaded and parsed, therefore frontend engineers propagate for putting the scripts as far down in the code as possible.
I usually just set a far-future Expires header for my .js files so they are cached in the browser for a long time and then include them in the <head> section. This gives good performance and doesn't look ugly :-)
But if you are serving external .js libraries (that are on other servers than your own), you will probably want them in the bottom because you can't change the Expires-header for other servers and you canät know that the other server always will be responsive.
yeah. Put Scripts at the Bottom
I think the size of the js file is much more important than the location of javascript. I always set highter number of the con-current connection to make sure they download in parallel.
I believe it's better to place script tags just before the closing body tag. Because:
Elements are blocked from rendering if they are below the script.
In IE6, IE7 resources in the page are blocked from downloading if they are below the script.
From this article. Also Yahoo's performance rule 6 is Move Scripts to the Bottom
Google Analytics always used to say to put the script tag at the bottom of the page. I believe the rationale was that if the Google servers ever went down, the page would fail to load if it were in the head (only for IE probably).

Categories

Resources