SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Reducing the amount of JS - Heavy JS

    Hi

    I run a football website that whows league tables. Each league table has a bit of JS

    I was wondering if I could clean (and speed) this up?

    I'm sure I don't need all the JS and could put one link in the header, I just don't know how!

    Example below:

    Code:
             <h3>Premier Division</h3>
    		  
    <div id="lrep123581294" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=495093396">click here for Premier</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '123581294'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>		  
    
           <h3>Division 1</h3>
    		  
    <div id="lrep929926638" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=104191348">click here for Division One</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '929926638'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
    		  
    		<h3>Division 2</h3>		  
    
    <div id="lrep173961819" style="width: 350px;">Data loading....<a href="http://full-time.thefa.com/Index.do?divisionseason=609487635">click here for Division Two</a><br/><br/><a href="http://www.thefa.com/FULL-TIME">FULL-TIME Home</a></div>
    <script language="javascript" type="text/javascript">
    var lrcode = '173961819'
    </script>
    <script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    If you look at the contents of the scripts you are including they look like this:

    Code JavaScript:
    var randno = Math.random();
    var el = document.createElement("script");
    el.src = "http://full-time.thefa.com/js/cs1.do?cs="+lrcode+"&random="+randno;
    el.type="text/javascript";
    document.getElementsByTagName("head")[0].appendChild(el);

    So basically, they are using a previously declared variable together with a randomly generated number to create a script tag and append it to the head of your document.

    There's no reason that you couldn't make this more generic, like so:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Football!</title>
        <script>
          function createScript(id){
            var randno = Math.random();
            var el = document.createElement("script");
            el.src = "http://full-time.thefa.com/js/cs1.do?cs=" + id +"&random="+randno;
            el.type="text/javascript";
            document.getElementsByTagName("head")[0].appendChild(el);
          }
        
          createScript("123581294");
          createScript("929926638");
          createScript("173961819");
        </script>
      </head>
    
      <body>
        <p>Hello!</p>
      </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent feedbacka s per usual Pullo. Thank you very much

    Would this speed up my loading times at all?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    Quote Originally Posted by kimbo_king View Post
    Would this speed up my loading times at all?
    Probably, but only very slightly.
    For me, the main advantage of this approach would be that I didn't have to have script tags scattered throughout my HTML.

    So, are you interested in speeding up your loading times?
    There are numerous ways to do this.
    If so, just let me know and I'll summarize a few of them.

    Also, please give me a few details about your site (e.g. do you use a CMS, where is the site hosted, what kind of access do you have to the server etc.)

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The best way to avoid <script> scatter is to move them all to just before the </body> tag.

    That also reduces the amount of code needed by some scripts as you no longer need code to test of the DOM has loaded and only one or two possible scripts will ever need to test for onload.

    The only time moving all the scripts to just before the </body> tag increases the amount of code needed is where the scripts contain antiquated document.write calls that need to be parsed into something better.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys

    Speed isn't something I'm particularly concerned about but It can never harm!

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Fair enough.
    Then at your leisure, I would recommend having a look at YSlow.
    http://developer.yahoo.com/yslow/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •