在脚本中使用代码会在性能上有什么不同吗?标记或从.js文件

Is there a difference in performance when having code in a <script> tag or from a .js file?

本文关键字：文件 js 什么脚本代码性能更新时间：2023-09-26

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

我知道这两个选项之间的性能差异几乎可以忽略不计(在良好的网络连接下可以降低到毫秒)，但我真的很想知道是否存在以及哪一个更快。

当我说"更快"时，我指的是页面下载速度，代码实际运行之前需要多长时间，如果在开始运行时对代码的速度有影响，或者是否有任何其他我不知道的延迟。

另外，我有我的代码包装在jquery

$(document).ready()

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

谢谢

所以，没有"正确"答案。

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

如果，另一方面，你不想依赖于用户的缓存，去包括整个脚本在<script></script>:这将节省你的HTTP请求，这是平均几百字节(我从来没有真正计算过，但这是一个平均请求的长度，给予或采取。

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

另一种让你的代码运行得"更快"的方法是优化它:如果你不太注意的话，你的代码可能会有一些低效的行为。您可以在代码中找到这样的行为，并对其进行更改。我真的不能告诉你要找什么，因为这里面有太多不同的方面。大多数浏览器都会在运行代码时尝试优化代码，但是编写已经优化过的代码并不是一件坏事。如果要运行一些基准测试，可以使用jsperf.com

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

使用$(document).ready()你的代码将运行直到整个页面下载完成，是的，如果你把所有的js代码放在一个单独的文件中，页面和js将被并行下载，页面将下载得更快。这是一个很好的做法，你的js代码在单独的文件，有利于缓存或有这些文件在一个专用的CDN。

是的，有一些做法可以提高页面加载速度。

1。把javascript放在一个单独的文件中会使浏览器缓存javascript文件，这样它就不会一次又一次地加载同一段代码。

2。你也可以把javascript在结束</body>标签之前，这样你就避免了空白屏幕，而浏览器试图解释你的javascript文件，因为在那个点的页面布局已经可见的用户。