在<script>标记或.js文件中使用代码时，性能是否存在差异？</script>

Question

我有几百行javascript代码只能在一个页面上使用。但是，我不确定是否应将代码放入外部.js文件或将其保存在标记中。我相信脚本标签必须在页面的其余部分加载之前加载，但.js文件必须与html并排加载，并且从长远来看可能会变慢。

据我所知，这两个选项之间的性能差异几乎可以忽略不计（网络连接良好时可达毫秒），但我真的很想知道是否存在，哪一个会更快。

当我说“更快”时，我说的是页面下载速度，代码实际运行所需的时间，代码开始运行时是否会对代码速度产生影响，或者是否有任何影响我不知道的其他延误。

另外，我的代码包含在jquery

中

$(document).ready()

我认为这会对代码在这种情况下何时开始运行产生影响。

由于

Answer 1

所以，没有“正确”的答案。

如果您想尝试leverage用户的浏览器来缓存您的javascript文件，您可以为您的代码创建一个.js文件。

另一方面，如果您不想依赖用户的缓存，请将整个脚本包含在<script></script>中：这将为您节省一个HTTP请求，这是平均一些数百个字节（我从未真正算过它们，但这是平均请求的长度，给予或接受。

还有一些其他方法可以改善“加载”时间，例如压缩javascript代码（即删除用于缩进的空格，使用短变量名等）。可以找到一些好的服务online。

使代码运行“更快”的另一种方法是优化它：如果你没有那么多关注，你的代码很可能会有一些低效的行为。您可以通过代码查找此类行为并进行更改。我无法真正告诉你要寻找什么，因为这里有太多不同的方面。大多数浏览器在运行时尝试优化代码，但编写已经优化的代码并不是一件坏事。如果您想运行一些基准测试，可以使用jsperf.com

Answer 2

如果跨多个页面使用JS文件，最好将其放在单独的文件中以进行缓存。如果它仅在单个文件中使用，则脚本标记会稍快一些，因为它会保存HTTP请求。

Answer 3

使用$（document）.ready（），您的代码将一直运行，直到整个页面下载完成，如果您将所有js代码放在一个单独的文件中，页面和js将会更快下载页面并行下载。将js代码放在单独的文件中以支持缓存或将这些文件放在专用的CDN中是一种很好的做法。

Answer 4

是的，您可以实施一些实践来提高页面加载速度。

1。将javascript放入separete文件会使浏览器缓存javascript文件，因此不会反复加载同一段代码。

2. 您还可以将javascript放在结束</body>标记之前，这样您就可以避免在浏览器尝试解释您的javascript文件时出现空白屏幕，因为此时页面布局已经对用户可见。