什么时候应该使用内联与外部Javascript？-IGI

时间：2020-03-06 14:46:43 　来源:igfitidea点击:

我想知道什么时候应该包括外部脚本或者将它们与html代码内联，以提高性能和简化维护。

一般做法是什么？

真实场景我有几个需要客户端表单验证的html页面。为此，我使用了所有这些页面中都包含的jQuery插件。但是问题是，我是否：

谢谢。

解决方案

在最初发布此答案(2008年)时，规则很简单：所有脚本都应在外部。兼顾维护和性能。

(为什么要执行性能？因为如果代码是分开的，则浏览器可以更轻松地缓存它。)

JavaScript不属于HTML代码，并且如果包含特殊字符(例如<，>)，甚至会产生问题。

如今，Web可伸缩性已经发生了变化。由于发出多个HTTP请求的延迟，减少请求的数量已成为一个有效的考虑因素。这使答案变得更加复杂：在大多数情况下，仍然建议使用JavaScript外部。但是对于某些情况，尤其是非常小的代码段，将它们内联到网站HTML中是有意义的。

在方案中，听起来好像将外部内容写到页面之间共享的一个文件中对我们来说是件好事。我同意上述所有内容。

在早期原型制作期间，为了快速迭代而使代码保持内联，但请确保在生产时将其全部置于外部。

我什至敢于说，如果我们不能将所有Javascript放在外部，那么设计就很糟糕，应该重构数据和脚本

可维护性绝对是将它们保持在外部的原因，但是，如果配置是单行的(或者通常比使这些文件成为外部所需要的HTTP开销短)，则在性能方面将它们保持为内联更好。永远记住，每个HTTP请求都会在执行时间和流量方面产生一些开销。

当然，当代码比几行长并且实际上并不是特定于单个页面时，所有这些都变得无关紧要。当我们希望能够重用该代码时，请将其设置为外部。如果不这样做，请查看其大小，然后再决定。

javascript的外部化是yahoo的性能规则之一：
http://developer.yahoo.com/performance/rules.html#external

虽然始终应始终将脚本外部化的严格原则是一个不错的选择，但在某些情况下，我们可能希望内联某些脚本和样式。但是，我们应该只内联一些我们知道的内容，这些内容才能提高性能(因为我们已经对此进行了测量)。

我将看一看所需的代码，并将其分为所需的多个独立文件。每个js文件只会包含一个"逻辑集"的函数等。例如。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。一个文件，用于所有与登录相关的功能。

然后，在每个html页面上的网站开发过程中，我们只需包含所需的页面。
当我们上线站点时，可以通过将页面需要的每个js文件合并为一个文件来进行优化。

三个注意事项：

我认为特定于一页的短脚本案例是(仅)内联脚本的合理案例

使用Firebug调试外部脚本也更容易。我喜欢对JavaScript进行单元测试，并获得所有外部帮助。我讨厌看到PHP代码和HTML中的JavaScript对我来说看起来像是一团糟。

关于将JavaScript保持在外部的观点：

ASP.NET 3.5SP1最近引入了创建复合脚本资源的功能(将一堆js文件合并为一个)。这样做的另一个好处是，当打开Web服务器压缩时，下载一个稍大的文件将具有比许多小文件更好的压缩率(也减少了HTTP开销，往返等)。我想这可以节省初始页面加载，然后如上所述启动浏览器缓存。

除了ASP.NET，此截屏视频更详细地说明了好处：
http://www.asp.net/learn/3.5-SP1/video-296.aspx

外部脚本的另一个隐藏优点是，我们可以通过jslint之类的语法检查器轻松地运行它们。这样可以避免我们遇到许多令人困扰的，难以发现的IE6错误。