How to use jquery and javascript efficiently?

Question

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

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

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.

edited May 23 '17 at 12:11

Community

1
1

answered Dec 28 '10 at 11:49

Nick Craver

623,446
136
1,297
1,155

for me each time js loads. i had checked it with fire bug. For every page all of my js loads – Mohan Ram Dec 28 '10 at 11:52
@Mohan - Then one of two things is going on...your cache headers *aren't* set correctly, as I mention above....*or* on the **Net** panel in Firebug, the dropdown from the tab itself, there's a **Disable Browser Cache** option which you have checked. – Nick Craver Dec 28 '10 at 11:54

score 2 · Answer 2 · answered Dec 28 '10 at 11:52

2

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

answered Dec 28 '10 at 11:52

jensgram

31,109
6
81
98

score 0 · Answer 3 · answered Dec 28 '10 at 11:52

0

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

answered Dec 28 '10 at 11:52

Aston

3,654
1
21
18

How to use jquery and javascript efficiently?

3 Answers3