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

Answer 1

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.

Answer 2

此外，您可以将内容交付网络 （CDN）用于jQuery等库。Google提供了很多 。

Answer 3

除了上一个答案外，您还应该将所有javascript文件一起缩小，可以选择使用gzip压缩。