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

Question

什么是网站的JavaScript和CSS文件的最佳文件大小？

Answer 1

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

因此,让我们假设平均速度为1.5 Mbps.实际上,将其减半至750 Kbps.这大约是94 KBps.因此,如果您的CSS文件为50 KB且您的javascript文件为50 KB,则需要花一点多秒才能为访问者下载它们.您的网站是否具有高度互动性,用户希望能够快速地从一个网站点击到另一个网站？如果是这样,那么一旦第二次延迟可能会非常恼人.如果没有,那么它可能是完全合理的.

如果您发现文件太大,可能需要考虑查看一些"缩小"实用程序; 这些实用程序将使用您的代码,将变量名称("my_descriptive_variable")替换为较短的名称("a"),删除空格和注释等.有时,这些实用程序可以将代码减少到之前的10%.

但最终,"最佳"是完全主观的.尝试设计最小的脚本/ CSS文件,向它们添加一堆KB注释,并在低端连接上加载页面,直到您认为它太慢.这会让你很清楚你的上限应该是多少.

Answer 2

外部文件越小越好.

但也许比拥有更小的大小更重要的是拥有更少的单独资源,这意味着更少的HTTP请求.例如,单个1MB文件的加载速度通常比十个100KB文件快.当您将多个CSS(或JavaScript,图像等)文件合并为一个文件时,您会感觉更好.