Javascript - 内联与外部脚本 - 有什么区别？

Javascript - inline vs external script - what's the difference?

提问by John Ohara

I have a few snippets of javascript scattered about my pages - many are contained in my own .js files, however some of the stuff that I've found online sits directly on the page.

我在我的页面上散布着一些 javascript 片段——很多都包含在我自己的 .js 文件中，但是我在网上找到的一些内容直接位于页面上。

I'm not too familiar with how javascript interacts with a page - is there a difference between adding the script inline or adding a reference to the external file?

我不太熟悉 javascript 如何与页面交互 - 添加内联脚本或添加对外部文件的引用有区别吗？

回答by devconcept

There is little difference in using one or the other way. The real difference comes from the advantages/disadvantages that each one has.

使用一种或另一种方式几乎没有区别。真正的区别来自每个人的优点/缺点。

Inline scripts

内联脚本

• Are loaded in the same page so is not necessary to trigger another request.
• Are executed immediately.
• The async and defer attributes have no effect
• Can be helpful when you are using a server-side dynamic rendering.

• 加载在同一页面中，因此不需要触发另一个请求。
• 被立即执行。
• async 和 defer 属性无效
• 当您使用服务器端动态渲染时会很有帮助。

External scripts

外部脚本

• Gives better separation of concerns and maintainability.
• The async and defer attributes have effect so if this attributes are present the script will change the default behavior. This is not possible with inline scripts.
• Once a external script is downloaded the browser store it in the cache so if another page reference it no additional download is required.
• Can be used to load client code on demand and reduce overall download time and size.

• 更好地分离关注点和可维护性。
• async 和 defer 属性有效，因此如果存在此属性，脚本将更改默认行为。这对于内联脚本是不可能的。
• 下载外部脚本后，浏览器会将其存储在缓存中，因此如果另一个页面引用它，则无需额外下载。
• 可用于按需加载客户端代码并减少整体下载时间和大小。

回答by LukeP_8

External script files

外部脚本文件

• Much easier to analyse so you can debug more efficiently and read it. This makes life much easier for us as programmers
• Download time is reduced as the external file is cached so it can be downloaded with the website
• Instead of writing the same script numerous times, an external file can be called and executed anywhere in the code

• 更容易分析，因此您可以更有效地调试和阅读它。这让我们程序员的生活变得更轻松
• 由于外部文件被缓存，下载时间减少，因此可以通过网站下载
• 无需多次编写相同的脚本，可以在代码的任何位置调用和执行外部文件

External files decrease page rendering speed as the browser has to stop parsing and download the external file. This adds a network round trip which will slow everything down. Also because external files are cached it makes it tough to delete them if the have been updated

外部文件会降低页面渲染速度，因为浏览器必须停止解析并下载外部文件。这增加了一个网络往返，这将减慢一切。此外，由于外部文件被缓存，如果已更新，则很难删除它们

Inline code

内联代码

• Inline code reduces the number of HTTP requests making improving the performance of the webpage. This because the code is loaded in the same page so a request is not needed
• Inline script is executed immediately

• 内联代码减少了 HTTP 请求的数量，从而提高了网页的性能。这是因为代码加载在同一页面中，因此不需要请求
• 内联脚本立即执行

Although inline code is much harder to read and analyse as it just looks like a lump of code chucked together. It is hard work having to find the problem when debugging, making life as a programmer tough

尽管内联代码更难阅读和分析，因为它看起来就像是一堆代码拼凑在一起。调试时发现问题很辛苦，程序员的生活很艰难

Hope this helps you understand a bit more :)

希望这可以帮助您了解更多:)

回答by Siguza

Looking at the <script>tag documentation, you can see that you can use the asyncand deferattributes only with external scripts, which might have an effect on scripts that do not use event listeners as entry points.
Other than that, inlining renders a browser unable to cache it on its own, so if you use the same script on different pages, the browser cache cannot kick in. So it might have an effect on performance and/or bandwidth usage.
And, of course, splitting code up into files is one way of organizing it.

查看<script>标记文档，您可以看到只能将async和defer属性用于外部脚本，这可能会对不使用事件侦听器作为入口点的脚本产生影响。
除此之外，内联使浏览器无法自行缓存它，因此如果您在不同的页面上使用相同的脚本，浏览器缓存将无法启动。因此它可能会对性能和/或带宽使用产生影响。
而且，当然，将代码拆分成文件是组织它的一种方式。

回答by Krishna

Generally there is no difference as indicated in the comments. But, if the snippet is embedded in the middle of the HTML in the page and it is not a function, it is executed immediately. Such script segments may have a difference in behavior when moved to a separate JS file when enough care is not taken.

一般来说，评论中指出没有区别。但是，如果代码段嵌入在页面中 HTML 的中间并且它不是函数，则它会立即执行。如果没有足够小心，这些脚本段在移动到单独的 JS 文件时可能会在行为上有所不同。