CODEWITHSUNDEEP
javascripttwitterfacebook-likegoogle-plus-onegetelementsbytagname
Derek Perkins
Derek Perkins

Reputation: 667

Speed Up Facebook / Twitter / G+ Buttons By Defining Classes to Look In

It's taking forever for my social sharing links to load on my page (it's in my sandbox still, so I can't provide access). Looking through all three of the main players, they're all using getElementsByTagName and are searching through all the elements of the page.

Since I'm already assigning classes to all social instances, couldn't I just tweak the function to only look through elements with the right classes?

Maybe this isn't going to see massive speed improvements, but I'd like to squeeze out every millisecond of performance I can.

Facebook async JavaScript:

<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=356176301083466";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
</script>

Twitter async JavaScript:

<script>
    !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0];
        if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }(document,"script","twitter-wjs");
</script>

Google+ async JavaScript:

<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); 
        po.type = 'text/javascript'; 
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(po, s);
    })();
</script>`

Upvotes: 3

Views: 1450

Answers (2)

Brad
Brad

Reputation: 36

Just ran across pretty much the same thing. CSS-Tricks has a snippet for it:

(function(doc, script) {
var js, 
  fjs = doc.getElementsByTagName(script)[0],
  frag = doc.createDocumentFragment(),
  add = function(url, id) {
      if (doc.getElementById(id)) {return;}
      js = doc.createElement(script);
      js.src = url;
      id && (js.id = id);
      frag.appendChild( js );
  };
// Google+ button
add('http://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));

Upvotes: 2

C3roe
C3roe

Reputation: 96383

First of all, I doubt it’s the DOM traversing that really slows things down (DOM traversing is usually quick in modern browsers) – usually it’s rather the HTTP requests to the iframe sources that make it seem “slow” to the user.

But if you wanna give it a try, here’s what you can do for Facebook (if the others offer something similar, you’d have to look in their docs):

  • initialize the JS SDK without xfbml=1, then it won’t look throught your document for XFBML tags to render automatically.

  • use FB.XFBML.parse afterwards. Unfortunately, this method accepts only a reference to a single DOM element as a parameter – so you can’t pass it something like a “selector” or something. But you could use jQuery or something to get the relevant elements in your page, and then call that method on each of them in a loop.

But, as I said in the beginning – i doubt it’ll speed things up noticeably.

Upvotes: 0

Related Questions