CODEWITHSUNDEEP
javascriptjquery
Mohan Ram
Mohan Ram

Reputation: 8463

How to use jquery and javascript efficiently?

I am using jquery and its related plugins in my site.

Since i use more js. for visiting each page in my site. all the js loads so site loading time increases.

How to use js libraries efficiently without loading js for each page visit.

UPDATE:

I am using 

        <!-- JQUERY-->
        <script src="{$TEMPLATE_FACK}/js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript" language="javascript">
        $.noConflict();
        </script>
        <script src="{$TEMPLATE_FACK}/js/global.js" type="text/javascript"></script>

        <!-- JQUERY.VALIDATE SCRIPT -->
        <script src="{$TEMPLATE_FACK}/js/jquery.validate.js" type="text/javascript"></script>

        <!--JS VALIDATION SCRIPTS -->
        <script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/lib/prototype.js"></script>
        <script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/src/scriptaculous.js"></script>
        <script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jsvalidate.js"></script>

        <!--jQuery URL Script-->
        <script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jquery.url.js"></script>


        <!-- TINYMCE SCRIPTS -->
        <script type="text/javascript" src="{$TEMPLATE_FACK}/tinymce/jquery.tinymce.js"></script>
        <script src="{$TEMPLATE_FACK}/tinymce/tiny_mce_src.js" type="text/javascript"></script>
        <script src="{$TEMPLATE_FACK}/js/quicktags.js" type="text/javascript"></script>

        <!-- WORD COUNT -->
        <script src="{$TEMPLATE_FACK}/js/jquery.wordcount.js" type="text/javascript"></script>

        <!-- Thick box scripts -->
        <script src="{$TEMPLATE_FACK}/js/thickbox.js" type="text/javascript"></script>


<!--JS FOR GRAPH (Highcharts Refer: http://highcharts.com/ref/#plotOptions-pie-point-events)-->
        <script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/highcharts.js"></script>

        <!-- 1a) Optional: add a theme file -->
        <!--
            <script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/themes/gray.js"></script>
        -->

        <!-- 1b) Optional: the exporting module -->
        <!--<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/modules/exporting.js"></script>-->


        <!--JS FOR Tag adding in Faq add1.html - added by Mogan Dec 02, 2010-->
        <script src="{$TEMPLATE_FACK}/js/create_html.js" type="text/javascript"></script>

    <!--FANCY BOX -->
    <script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.fancybox-1.3.2.js"></script>

This much of js i am using in header section. once i am visiting each page all these loads again and again

Upvotes: 0

Views: 236

Answers (3)

jensgram
jensgram

Reputation: 31508

Also, you can use a Content delivery network (CDN) for libraries like jQuery etc. Google provides a bunch.

Upvotes: 2

Aston
Aston

Reputation: 3712

Additionally to the previous answer you should minify all javascript file together, optionally you can use gzip compression.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630409

The user doesn't have to load it each time, just be sure to set your cache headers correctly so the user caches the JavaScript files that are reused. For libraries specifically (since this is tagged jQuery), look at using a CDN - which will also have the cache headers I mention, as well as parallelizing the download since it's not on your own domain.

Upvotes: 2

Related Questions