javascript - different small js files per page VS. 1x site-wide js file? - Stack Overflow

admin管理员组

文章数量:1334174

Different pages of my site have different js needs (plugins mainly), some need a lightbox, some dont, some need a carousel, some dont etc.

With regards to pageloading speed should i

option 1 - reference each js file when it is needed:

so one page might have:

<script type="text/javascript" src="js/carousel/scrollable.js"></script>    
<script type="text/javascript" src="js/jquery.easydrag.js"></script>
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script>

and another have:

<script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"></script>   
<script type="text/javascript" src="st_wd_assets/js/typewatch.js"></script>

option 2 - bine and press into one site_wide.js file:

so each page would reference:

<script type="text/javascript" src="js/site_wide.js"></script>

there would be unused selectors/event listeners though, how bad is this? I would include any plugin notes/accreditations at the top of the site_wide.js file

Different pages of my site have different js needs (plugins mainly), some need a lightbox, some dont, some need a carousel, some dont etc.

With regards to pageloading speed should i

option 1 - reference each js file when it is needed:

so one page might have:

<script type="text/javascript" src="js/carousel/scrollable.js"></script>    
<script type="text/javascript" src="js/jquery.easydrag.js"></script>
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script>

and another have:

<script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"></script>   
<script type="text/javascript" src="st_wd_assets/js/typewatch.js"></script>

option 2 - bine and press into one site_wide.js file:

so each page would reference:

<script type="text/javascript" src="js/site_wide.js"></script>

there would be unused selectors/event listeners though, how bad is this? I would include any plugin notes/accreditations at the top of the site_wide.js file

• javascript
• jquery

Share Improve this question Follow asked May 2, 2010 at 10:55 HaroldoHaroldo 37.4k4747 gold badges131131 silver badges169169 bronze badges 1

• stackoverflow./questions/2707499/… stackoverflow./questions/1495338/… – Marcel Korpel Commented May 2, 2010 at 11:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

It's usually best to bine these and serve one file, which you set the cache headers so that the client holds onto it, not requesting it each page. Remember that if a jQuery selector doesn't find anything, it doesn't do anything so that's not a major deal as long as you're using a good portion of your script each page, it's just fine that it has selectors without matches.

Make sure it's being cached by the client though, of all your work is for naught. Also make sure it's served minified and gzipped. And last, look at hosting your main libraries from a CDN.

Combine them into one large and minified external file, and include that in every page. After the first page load, the browser will cache it, so the user will only download it once.

本文标签： javascriptdifferent small js files per page VS 1x sitewide js fileStack Overflow