简体繁体 English

jQuery / JavaScript - 有很多小.js文件的性能问题？

[英]jQuery/JavaScript - performance-issue when having a lot of small .js-Files?

原文 2008-11-25 10:30:50 5 4 javascript/ jquery/ performance/ include/ jscompress

i've got a site with a lot of referenced .js-Files; 我有一个有很多引用的.js文件的网站; those are rather small files, but I want to keep my methods separated by topic/functionality. 那些是相当小的文件，但我想让我的方法按主题/功能分开。

Is it better to keep all the methods in one .js-File or is it no problem to have many (~ 20 - 30) small files all including only some lines? 将所有方法保存在一个.js文件中是否更好？或者包含许多（~20 - 30）个小文件都只包含一些行是没有问题的？

4 个解决方案

By all means keep them separate for development, but you should consider bundling them together into one file for production. 通过一切手段将它们分开以进行开发，但是您应该考虑将它们捆绑在一起用于生产。

There is a nice discussion at sitepoint.com 在sitepoint.com上有一个很好的讨论

For each of these files, an HTTP request is sent to the server, and then the browser awaits a response before requesting the next file. 对于这些文件中的每一个，都会向服务器发送HTTP请求，然后浏览器在请求下一个文件之前等待响应。 Limits (or limitations) of the browser generally prevent parallel downloads. 浏览器的限制（或限制）通常会阻止并行下载。 This means that for each file, you wait for the request to reach the server, the server to process the request, and the reply (including the file content itself) to reach you. 这意味着对于每个文件，您等待请求到达服务器，服务器处理请求以及回复（包括文件内容本身）以便与您联系。 Put end to end, a few of these can make a big difference to page load times. 端到端放置，其中一些可以对页面加载时间产生很大影响。

Actually it's a bad idea to have so many referenced files. 实际上有这么多引用文件是个坏主意。 The basic idea for performance issues is to try to minimize HTTP Requests as much as possible (at least on your production server). 性能问题的基本思想是尝试尽可能地减少HTTP请求（至少在生产服务器上）。 Take a look at this http://developer.yahoo.com/performance/rules.html#num_http 看看这个http://developer.yahoo.com/performance/rules.html#num_http

Does anyone have a clever nant script which can do this for you? 有没有人有一个聪明的nant脚本，可以为你做到这一点？ I've written a custom nant task which uses the YUI compressor to minify my css and js, but it would be useful to add combining to it. 我编写了一个自定义的nant任务，它使用YUI压缩器来缩小我的css和js，但是添加组合会很有用。 How do you guys handle this? 你们是怎么处理这个的？

I don't know what framework (if any) you use on serverside, but Ruby on Rails have a script include function that depending on the settings (eg test or production) it can either create lots of script tags (typically test mode) or create one tag with all scripts concatenated into one (optionally compressed with some plugins) file. 我不知道你在服务器端使用什么框架（如果有的话），但Ruby on Rails有一个脚本包含功能，根据设置（例如测试或生产），它可以创建大量脚本标签（通常是测试模式）或创建一个标记，将所有脚本连接成一个（可选择使用某些插件压缩）文件。 I'm sure many other frameworks support something like this too. 我相信很多其他框架也支持这样的东西。

UPDATE: I just remembered: You can allso manually compress (by stripping whitespace and comments, shortening variable names etc.) and combine javascript files and CSS files with the Yahoo! 更新：我记得：你可以手动压缩（通过剥离空格和注释，缩短变量名等），并将javascript文件和CSS文件与Yahoo! UI Library: YUI Compressor . UI库：YUI Compressor 。 Just be sure your JavaScript is correct before you compress it, try JSLint . 在压缩之前确保你的JavaScript是正确的，试试JSLint 。