javascript 我怎么知道我的 js/CSS 文件是否太大？

How do I know if my js/CSS files is too huge?

提问by logii

What is the optimal filesize of a JavaScript and CSS files of a websites?

网站的 JavaScript 和 CSS 文件的最佳文件大小是多少？

回答by King Skippus

Zero bytes. It sounds facetious, but there's no such thing as an "optimal" file size. The bigger it is, the longer it will take your page to render. How fast is the connection to your web site for your visitors? If it's a video-oriented site, for example, it's probably relatively fast since people with 64 kbps modems aren't going to be trying to stream anything that large. If it's a simple text site displaying information to satellite users in Zimbabwe, it might be quite slow.

零字节。这听起来很滑稽，但没有“最佳”文件大小之类的东西。它越大，您的页面渲染所需的时间就越长。访问者访问您网站的速度有多快？例如，如果它是面向视频的站点，它可能相对较快，因为使用 64 kbps 调制解调器的人不会尝试流式传输任何大型内容。如果它是一个简单的文本站点，向津巴布韦的卫星用户显示信息，它可能会很慢。

So let's imagine that the average speed is 1.5 Mbps. Realistically, halve that to 750 Kbps. That's about 94 KBps. So if your CSS file is 50 KB and your javascript file is 50 KB, it will take a little over one second to download them for your visitor. Is your site highly interactive, with users expected to click around quickly from one thing to another? If so, then that once second delay could be extremely irritating. If not, then it might be perfectly reasonable.

因此，让我们假设平均速度为 1.5 Mbps。实际上，将其减半至 750 Kbps。这大约是 94 KBps。因此，如果您的 CSS 文件为 50 KB，而您的 javascript 文件为 50 KB，则为您的访问者下载它们将需要一秒钟多一点的时间。您的网站是否具有高度交互性，希望用户从一件事快速点击到另一件事？如果是这样，那么一秒钟的延迟可能会非常令人恼火。如果没有，那么这可能是完全合理的。

If you find your file size getting too large, you might want to consider looking at some "minifying" utilities; these are utilities that will take your code, replace variable names ("my_descriptive_variable") with shorter names ("a"), remove whitespace and comments, etc. Sometimes these utilities can reduce your code to 10% of what it was before.

如果您发现文件过大，您可能需要考虑查看一些“缩小”实用程序；这些实用程序将获取您的代码、用较短的名称 (“a”) 替换变量名称 (“my_descriptive_variable”)、删除空格和注释等。有时这些实用程序可以将您的代码减少到原来的 10%。

Ultimately, though, "optimal" is completely subjective. Try designing minimal script/CSS files, add a bunch of KB of comments to them, and load your page on low-end connections until you consider it too slow. That will give you a pretty good idea of what your upper limit should be.

不过，归根结底，“最佳”完全是主观的。尝试设计最少的脚本/CSS 文件，向它们添加大量 KB 的注释，并在低端连接上加载您的页面，直到您认为它太慢为止。这将使您非常清楚您的上限应该是多少。

回答by maerics

The smaller your external files the better.

外部文件越小越好。

But perhaps more important than having a smaller size is having fewer separate resources, meaning fewer HTTP requests. For example, a single 1MB file often loads faster than ten 100KB files. You're better off when you combine multiple CSS (or JavaScript, image, etc.) files into a single one.

但也许比更小的尺寸更重要的是拥有更少的单独资源，这意味着更少的 HTTP 请求。例如，单个 1MB 文件的加载速度通常比十个 100KB 文件快。将多个 CSS（或 JavaScript、图像等）文件合并为一个文件时效果会更好。

回答by Ry-

The one thing you really want to take advantage of, though, is cacheing. So put all your shared utilities and styles into one file, minify that, and include it on every page. Most modern browsers will download it only once, and download it quickly (being minified). Then, minify the page-specific ones also and you're done.

但是，您真正想要利用的一件事是缓存。因此，将所有共享的实用程序和样式放在一个文件中，将其缩小，并将其包含在每一页中。大多数现代浏览器只会下载一次，并快速下载（被缩小）。然后，缩小特定于页面的页面，您就完成了。

回答by James Williams

Typically your Javascript file should be less than 25kb and your CSS file should be less than 10kb, the smaller the better, these numbers will vary depending on resource and items. Sometimes this is not possible but you can minimize whitespace (spaces, returns and removing comments). Ideally each line should be one style definition in your CSS and your Javascript should be beautified (redundant code removed and code that is used over and over to be put in functions) and minimized to be on one line if possible.

通常你的 Javascript 文件应该小于 25kb，你的 CSS 文件应该小于 10kb，越小越好，这些数字会因资源和项目而异。有时这是不可能的，但您可以最小化空格（空格、返回和删除注释）。理想情况下，每一行都应该是你的 CSS 中的一个样式定义，你的 Javascript 应该被美化（删除多余的代码并将反复使用的代码放在函数中）并尽可能最小化为一行。

Typically your CSS should be loaded in the head of the page and the JS right before the closing body tag. This is so the page can still load while waiting for the CSS or JS to load. Most browsers and servers will only load about 4 resources from one server at a time. If possible you can seperate your resources over multiple servers/subdomains to create asynchronous loading.

通常，您的 CSS 应该加载在页面的头部和 JS 中，就在结束 body 标记之前。这样页面在等待 CSS 或 JS 加载时仍然可以加载。大多数浏览器和服务器一次只能从一台服务器加载大约 4 个资源。如果可能，您可以将资源分散在多个服务器/子域上以创建异步加载。

The asynchronous loading applies to all aspects of a webpage; images, CSS, JS, and html. All my knowledge has been collected and learned from working on sites for over 10 years.

异步加载适用于网页的方方面面；图像、CSS、JS 和 html。我所有的知识都是从 10 多年的现场工作中收集和学习的。

回答by Sujit Agarwal

The total size of a page while it is being viewed by the user should be approx ~100kb. This makes it easier for the user view and Search Engines to crawl your website.

用户正在查看的页面总大小应约为 100kb。这使用户视图和搜索引擎更容易抓取您的网站。

The concept of "page size" is defined as the sum of the file sizes for all the elements that make up a page, including the defining HTML file as well as all embedded objects (e.g., image files with GIF and JPG pictures). It is possible to get away with page designs that have larger page sizes as long as the HTML file is small and is coded to reduce the browser's rendering time.

“页面大小”的概念被定义为构成页面的所有元素的文件大小的总和，包括定义的 HTML 文件以及所有嵌入的对象（例如，带有 GIF 和 JPG 图片的图像文件）。只要 HTML 文件很小并且经过编码以减少浏览器的呈现时间，就可以摆脱具有较大页面尺寸的页面设计。