Question

多个内联脚本：

<script type="text/javascript">/* some codeblock 1 */</script>
<script type="text/javascript">/* some codeblock 2 */</script>
<script type="text/javascript">/* some codeblock 3 */</script>

单连体内联脚本：

<script type="text/javascript">
    /* some codeblock 1 */
    /* some codeblock 2 */
    /* some codeblock 3 */
</script>

是多个内联脚本更慢？

Answer 1

如果您正在谈论在实际HTML中编写代码，而不是加载外部JS，那么答案是它确实无关紧要。

...如果浏览器尝试以60fps处理视觉刺激请求，则根据需要进行更改... ......那么几微秒的差异不会产生很大的影响。

在非常古老的浏览器上，如果你试图编写很多代码（每个标签可能有数千行，或者每个标签有数万行），那么拥有倍数可能会产生明显的差异......但在这种情况下，只有一个元素仍然是愚蠢的。

Answer 2

看不出任何可以衡量的方式。

现代浏览器的解析器非常快 - 它们基本上是排序引擎。这个块进入HTML引擎，这个块到CSS引擎，这个块到JavaScript引擎 - 这些引擎可能需要一些时间才能完成它们，但是将块放到正确的位置根本不是性能问题。

即使是一个小页面下载的性能也会比收集代码块并将它们发送到引擎的性能要大得多。

此外，JavaScript（以及许多其他插入语言）通过预处理器运行，该预处理器在加载和运行时将它们转换为机器代码。现在可能有一个更时髦的名字（可能有“云”），但它曾被称为“即时编译”（JIT）。

这一切都非常纠结，但基本上在页面加载时它只是将它找到的所有脚本发送到这个JIT引擎。这个人收集代码，对其进行优化并将其存储在内存中，并将需要立即运行的任何内容传递给执行引擎。随着事情的发展和增加，它试图尽可能地简化事情。

因此，对于延迟的代码（例如稍后调用的函数），块的数量根本不重要。 JIT编译器将创建内存优化代码，无论如何都会忽略块结构。对于在遇到时立即运行的内联代码，它并不重要，因为使用脚本引擎的解析器速度太快，以至于你无法在任何合理的情况下看到差异。

那说你可能能够构建一个可能显示差异的测试用例。但我怀疑在你看到可测量的差异之前，你需要进入成千上万（或数万）的范围。此时，其他变量（如文件大小（每个新脚本块增加大约40个字节到文件大小）和渲染时间 - 将会对您产生巨大影响，因此您实际上可能永远无法看到差异。

底线：编写干净，文档化的逻辑代码，忘记下面的编译器。这样可以节省您实际的时间和金钱，而不是为您提供分数，不可观察的性能提升。

Answer 3

我猜单连体内联脚本稍快一点

多个内联脚本是否比一个联合内联脚本慢？

3 个答案: