Geek asks and answers

Including javascript files on my page

I have many (almost 15) javascript files that I use on my web page. What is the best way to include all of these files?

Just below or is there some other technique that should be used that can load javascript faster?

+3
source share
5 answers

You can use the parallel / non-blocking javascript loader.

Below are some great libraries that can do this for you.

http://headjs.com/

http://requirejs.org/

http://labjs.com/

+1
source

You can combine and minimize them. YUI Compressor can do this.

+2

Google Closure Compiler - api js. https://developers.google.com/closure/compiler/docs/api-ref

script api.

+1

, , . , ( ) .htaccess HTML5 Boilerplate .

Modernizr , , , , require.js

+1

script, .

<body>, . , , , .

, , , , . DOM, - , .

, , , ( == , == )

, , , script . , script , . , , - , .

script ( ajax/eval), <script>.

2 <script>:

  • html
  • JavaScript.

, , ,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.widgets.min.js"></script>

script , . , , ...

document.write

dom.

document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>');

, , script , , , , .

document.createElement

createElement dom, , . , jQuery <script>, . ready_go , jQuery.

(function() {
    if (!window.jQuery) {
        var jq = document.createElement('script');
        jq.type = 'text/javascript';
        jq.async = true;
        jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jq, s);

        jq.onreadystatechange = jq.onload = ready_go;
    } else ready_go();
})();

jQuery.getScript

jQuery, - , getScript URL- script script.

function ready_go() {
    $.getScript('http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.min.js', function () {
         // script is done loading we can include the next
         $.getScript('http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.widgets.min.js', function () {
             // script is done loading we can include the next or start using our stuff
         });
    });
}

?

CDN . , , , , .

CDN ;

  • , CDN POP, , URL-, .
  • CDN, jQuery google CDN , , , .

, ( )

, @Mario @Xharze, 18 .

CDN, , .

, , .

Having one script will simplify your inbox and because the browser will cache the script, additional downloads will not be needed again, especially useful in the application used for long periods of time and access to many pages.

The only advantage is that separate scripts are stored for users who exit the landing page and why we want to optimize for them, they are not going to stay because of this.

NJoy!

0
source

More articles:


All Articles