Javascript 文件大小会影响浏览器的解析时间吗?两个 5kb 的 JS 文件会比单个 10kb 的文件解析得更快,反之亦然吗?
Does Javascript file size impact parsing time on browser? Will two 5kb JS files be parsed faster than a single 10kb or vice-versa?
我对 JS 解析或性能了解不多。
但我想知道当浏览器解析大文件与总大小相同的小文件时是否存在性能差异。
什么解析速度更快:
10kb vs. (2 x 5kb)
重要吗?还是可以忽略不计?如果我们比较一下:
1mb vs. (1000 x 1kb)
注1:这是关于浏览器解析JS的
Note2: 我假设它们都是相同的 JS 代码。我的意思是,无论是在单个文件中,还是拆分成多个较小的文件,解析后的代码应该是相同的。
就速度而言,单个 JS 文件总是优于多个 JS 文件,因为浏览器会发出更少的网络请求。另外,为了获取每个 JS 文件,浏览器会首先打开一个 HTTP 请求连接,进行握手,然后进行数据(JS 文件)传输。
因此,多个 JS 文件使内容加载速度变慢。
但这又取决于 JS 文件包含哪些代码。有关更多详细信息,请查看 One big javascript file or multiple smaller files?
(此处为 V8 开发人员。)
对于解析速度,脚本的整体数量很重要,而不是文件的组织。
也就是说,可能会有次要影响,与原始解析速度相比,它对整体感知页面加载性能的影响更大。正如 Ashok 的回答所指出的那样,下载是图片的一部分,从历史上看,许多小资源处于劣势,正如您指出的那样,应该通过 HTTP2 解决。另一方面,与单个较大的块相比,一些 资源可能会由于并发连接而获得加速。
另一个值得考虑的影响是缓存。如果您的代码的一部分很少更改(例如第三方库,您每隔几个月才更新一次)而另一部分更改很多(例如您自己的代码,您每隔一天部署一次新版本),那么沿着这条线拆分脚本文件是有意义的,这样浏览器就可以缓存不改变的部分。这至少可以避免下载未更改的部分;某些浏览器甚至可能能够缓存 parsing/compiling 代码的结果,这将节省更多工作。
适用的经验法则是:
(1) 做对您的情况有意义的事情(即最方便的事情);或者至少从它开始,看看它是否运作良好。过早的优化(即:让事情变得更复杂以期提高速度,而没有验证这是否真的有必要或有帮助)通常不是一个好主意。
(2) 自己衡量 任何备选方案,测试尽可能接近您的真实情况。例如,对您的实际源应用真实的拆分(可能是少量块?或者如果拆分是您之前所做的,则将它们合并为一个)并测试它,而不是生成数千个包含虚拟内容的文件。如果您无法衡量差异,那么就没有任何差异重要!如果您 可以 衡量差异,那么您就有了答案:-)
我对 JS 解析或性能了解不多。
但我想知道当浏览器解析大文件与总大小相同的小文件时是否存在性能差异。
什么解析速度更快:
10kb vs. (2 x 5kb)
重要吗?还是可以忽略不计?如果我们比较一下:
1mb vs. (1000 x 1kb)
注1:这是关于浏览器解析JS的
Note2: 我假设它们都是相同的 JS 代码。我的意思是,无论是在单个文件中,还是拆分成多个较小的文件,解析后的代码应该是相同的。
就速度而言,单个 JS 文件总是优于多个 JS 文件,因为浏览器会发出更少的网络请求。另外,为了获取每个 JS 文件,浏览器会首先打开一个 HTTP 请求连接,进行握手,然后进行数据(JS 文件)传输。
因此,多个 JS 文件使内容加载速度变慢。
但这又取决于 JS 文件包含哪些代码。有关更多详细信息,请查看 One big javascript file or multiple smaller files?
(此处为 V8 开发人员。)
对于解析速度,脚本的整体数量很重要,而不是文件的组织。
也就是说,可能会有次要影响,与原始解析速度相比,它对整体感知页面加载性能的影响更大。正如 Ashok 的回答所指出的那样,下载是图片的一部分,从历史上看,许多小资源处于劣势,正如您指出的那样,应该通过 HTTP2 解决。另一方面,与单个较大的块相比,一些 资源可能会由于并发连接而获得加速。
另一个值得考虑的影响是缓存。如果您的代码的一部分很少更改(例如第三方库,您每隔几个月才更新一次)而另一部分更改很多(例如您自己的代码,您每隔一天部署一次新版本),那么沿着这条线拆分脚本文件是有意义的,这样浏览器就可以缓存不改变的部分。这至少可以避免下载未更改的部分;某些浏览器甚至可能能够缓存 parsing/compiling 代码的结果,这将节省更多工作。
适用的经验法则是:
(1) 做对您的情况有意义的事情(即最方便的事情);或者至少从它开始,看看它是否运作良好。过早的优化(即:让事情变得更复杂以期提高速度,而没有验证这是否真的有必要或有帮助)通常不是一个好主意。
(2) 自己衡量 任何备选方案,测试尽可能接近您的真实情况。例如,对您的实际源应用真实的拆分(可能是少量块?或者如果拆分是您之前所做的,则将它们合并为一个)并测试它,而不是生成数千个包含虚拟内容的文件。如果您无法衡量差异,那么就没有任何差异重要!如果您 可以 衡量差异,那么您就有了答案:-)