Current time: 12-19-2017, 08:23 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
how to defer parsing javascript
11-15-2011, 04:47 AM
Post: #1
how to defer parsing javascript
Hi all,

working again on optimizing performance, I'm stuck with this one, can't get what defer parsing of js is all about.
when I ran page-speed on our site, I got this
Quote:94.2KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.
but I have no clue "how to defer parsing of javascript" please help me understand itHuh
(also I came across http://www.w3schools.com/tags/att_script_defer.asp which says "The defer attribute is only supported by Internet Explorer")
Thanks, your help is much appreciatedSmile

(a link to the site I refer to if it helps)
Visit this user's website Find all posts by this user
Quote this message in a reply
11-15-2011, 06:06 AM
Post: #2
RE: how to defer parsing javascript
Here is the documentation that Page Speed provides on the check: http://code.google.com/speed/page-speed/...rLoadingJS

It isn't literally referring to using the defer attribute, more the concept of asynchronously (and lazily) loading as much of the javascript as possible.

Looking at an actual test: http://www.webpagetest.org/result/111114_0X_266AT/ I think you could get a fair bit of benefit by using the non-ssl version of content for non-encrypted pages but the biggest overall win would probably come from converting a bunch of the images into a sprite.
Visit this user's website Find all posts by this user
Quote this message in a reply
11-15-2011, 06:44 AM
Post: #3
RE: how to defer parsing javascript
Thanks Pat for the quick response,
I actually read the Google advice but couldn't "get" how to get it done... now that you mentioned "lazy loading" I can go and search againSmile

any easy way how to serve different files based on if the page is secure or not? (we use the same template for the entire site, I think it's only for the one jquery file from google libraries api)

Regarding the image sprites; I keep on getting this recommendation when I run page-speed but I tried the spriteme bookmarklet many times and it couldn't find any savings, not sure why (maybe because our site is designed in tables)

Thanks
Visit this user's website Find all posts by this user
Quote this message in a reply
11-15-2011, 07:04 AM
Post: #4
RE: how to defer parsing javascript
Yeah, if most of the images are not already css background images then spriteme might not be able to find them.

The easiest way I know of to do protocol-neutral loading is to use absolute urls without the protocol: //ajax.googleapis.com/... (I think there is a problem if you use that for css on IE so just be careful).

Thanks,

-Pat
Visit this user's website Find all posts by this user
Quote this message in a reply
11-15-2011, 07:35 AM (This post was last modified: 11-15-2011 09:05 AM by Joel.)
Post: #5
RE: how to defer parsing javascript
WOW! I'm amazed with your quick and to the point answers! haven't seen such a great moderator yetSmile
Thanks Pat, I removed the protocol, how easy...
-
I believe I gotta redesign the site first in order to get the sprite thing done
I still don't understand how to load js asynchronously, would it be possible to show me an example using a js file we actually use? (if I may askDodgy)

ThanksSmile

added: we do have a lot of background images yet spriteme has no suggestions
Visit this user's website Find all posts by this user
Quote this message in a reply
11-15-2011, 10:20 PM
Post: #6
RE: how to defer parsing javascript
Stoyan wrote an article on asynchronously loading social media buttons.

It's got a nice bit of code of async loading part way down - http://www.phpied.com/social-button-bffs/ (just before 'All Buttons Markup')

Andy

Using WebPageTest - http://usingwpt.com/
Visit this user's website Find all posts by this user
Quote this message in a reply
11-22-2011, 07:27 AM
Post: #7
RE: how to defer parsing javascript
To defer javascript, I use the following code. It works for all browsers, is compatible with everything (as far as I'm aware). Just add the following code right before closing body tag.

Code:
<script defer="defer" type="text/javascript">
    window.onload=function(){
        var mycode;
        mycode=document.createElement("script");
        mycode.type="text/javascript";
        mycode.src="http://www.example.com/path/yourjavascriptfile.js";
        document.getElementsByTagName("head")[0].appendChild(mycode);
    }
</script>

</body>

Note that this is code by me. Google suggests the following syntax:

Code:
<script type="text/javascript">

// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

</script>

... as shown here:
http://code.google.com/speed/page-speed/...rLoadingJS


If everything is implemented correctly, then the result is nice. As shown here:
http://www.webpagetest.org/result/111121...1/details/

Note that javascript file is downloaded ONLY after "document complete" event! Win!

Hope this helps Smile
Find all posts by this user
Quote this message in a reply
11-22-2011, 10:25 AM (This post was last modified: 11-22-2011 10:30 AM by Joel.)
Post: #8
RE: how to defer parsing javascript
First thanks for your time (see you answered 2 of my questions!)

I tested with Google's suggestion, and the JS didn't work, maybe I did it wrong, that's why I asked for more specific help using our code as an example.
for example here is some code we use:
Code:
<script type='text/javascript' src='/images/css/jquery.autocomplete.js'></script>

<script type="text/javascript">
(function($) {
$().ready(function() {

    function formatItem(row) {
        return row[0] + " (" + row[1] + ")";
    }
    function formatResult(row) {
        return row[0].replace(/(<.+?>)/gi, '');
    }
    $('#suggest4').autocomplete('/index.php?action=autocomplete', {
        width: 300,
        matchContains: true,
        formatItem: formatItem
        }).result(function(event, row) {
               location.href = "/" + row[2] ;
        });

    $("#clear").click(function() {
        $(":input").unautocomplete();
    });
});
})(jQuery);
</script>

which part should go into here:
Code:
<script type="text/javascript">

// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

</script>

I didn't test with your code, because as per w3schools
Quote:The defer attribute is only supported by Internet Explorer.
http://www.w3schools.com/tags/att_script_defer.asp

Thanks so much for your time!
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)