Question

始终建议通过将所有代码放在JS文件中来避免内联Javascript代码，该文件包含在所有页面中。我想知道，如果这不会导致重页中的性能问题。

例如，假设我们有几十个像这样的函数

function function1(element){
var el=document.getElementsByClassName(element);
var size=el.length;
if(size==0) return;
for(i=0;i<size;i++){
// the process
}
}

在每个页面上，我们需要运行这些函数来了解HTML中是否有相应的元素。

window.onload = function(){
function1('a');
....
function26('z');
};

但是如果将所有函数保留在外部JS文件中，并通过内联JavaScript调用函数，我们只能调用当前页面中所需的函数：

<script type="text/javascript">
window.onload = function(){
function6('f');
};
</script>

从性能的角度来看，通过内联Javascript调用函数（当然不是最佳实践）来避免调用大量函数是不利的，这是不需要的在一个页面？

当然，这不仅仅限于功能，因为我们在整个网站上都有很多addEventListener个，这些都是针对每个页面触发的，不需要它们。

Answer 1

不建议内联静态资源（在您的情况下，内联javascript），因为您无法缓存它们。

缓存静态资源可以减少页面加载的大小 - 从而提高页面加载速度 - 以便返回访问者。但是，它需要额外的HTTP请求which should be avoided。

每当静态资源如此之小以至于与HTTP请求相比，额外的大小可以忽略不计，那么实际上建议将该资源保持内联。

将javascript库保存在外部（可缓存）文档中通常是个好主意，同时保留少量内联脚本。

所以，为了回应你的标题 - 内联javascript本身也不错。无论是否值得HTTP请求来缓存资源，这都是一种平衡。

Answer 2

避免内联js不是基于性能的......但更多的是可维护性并将表示层（html）与控制器层（js）分开。
随着项目规模的增加，在不同页面上使用内联j将使您和其他人难以维护。
此外，使用单独的js文件可以鼓励可重用性和模块化代码设计。
保持你的html干净，你知道在发生任何js错误而不是多个模板时的位置。

Answer 3

你应该读一下不引人注目的javascript， http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

还有其他解决方案可以不在每个网页的资源目录中加载所有javascript文件，其中一个名为requirejs，应该检出http://requirejs.org/。

此外，作为一般经验法则，您不应该在页面加载时添加所有事件侦听器，那么dom对象不存在呢？它会抛出javascript错误，并会比平时更多地破坏你的代码。

Answer 4

在页面上运行不必要的JavaScript可能会导致该页面加载缓慢。这取决于正在运行的JavaScript。

您可以通过计时来测试示例代码，并查看JavaScript重复运行getElementsByClassName所需的时间。

（我敢打赌它不需要很长时间，即使你有26个函数正在寻找具有不同类名的元素，但是有性能，总是先测量。）

如果执行时间有问题，您可以编写JavaScript以使其主要位于一个文件中，但是在您需要的页面上展示您从内联JavaScript运行的函数，而不是通过onload个事件运行它在您的JavaScript文件中。

值得记住加载页面时必须发生的一切：

浏览器从其缓存中提取页面，或发送HTTP请求以查看页面自缓存以来是否已更改，和/或发送页面本身的HTTP请求。
浏览器解析并呈现页面，暂停以获取和运行任何外部JavaScript，并在解析和呈现的同时获取样式表和图像。
浏览器运行任何JavaScript集，以便在文档就绪时运行。
浏览器会运行任何在页面加载时运行的JavaScript集。

虽然您当然可以编写运行缓慢的JavaScript，但是将JavaScript放在外部文件中并因此在用户的浏览器缓存中更好，而不是通过内联增加页面大小。通常，网络往往比JavaScript解析/执行慢得多。

但是，我再说一遍，因为这是最重要的一点，根据您的代码，这一切都会有所不同。如果你想保持你的表现良好，你的第一个也是最后一个行为必须是衡量它。

Answer 5

在放置js代码时需要记住variuos的情况。

内联：

如果您需要快速更改某些内容，则无需导航到外部文件，因此其在当地的效果更好
如果您在页面的某些元素中使用AJAX，那么可能会松开该部分的所有dom元素onclick等，这显然取决于您如何绑定它们。对于ex，你可以使用live或delegate，以防你使用jQuery来避免上述问题......但我发现如果js足够小，最好只是把它放在内联。

现在有其他理论为前

外化javascript是雅虎性能规则之一：

http://developer.yahoo.com/performance/rules.html#external

Answer 6

IMO取决于页面。有时，由于特定页面和脚本很小，因此放入外部文件没有任何意义。

Answer 7

根据Addy Osmani在The cost of JavaScript的“ #PerfMatters Conference 2019”演讲中，建议之一是避免使用大型内联脚本。

避免使用大型内联脚本（因为它们仍会在主线程）。一个好的经验法则是：如果脚本超过1 kB，避免内联它（也是因为当代码缓存启动时为1 kB 外部脚本）。

因此，如果您的内联脚本小于1 KB-很好，否则-避免使用它。

以下是来源：The cost of JavaScript in 2019

Answer 8

使js内联到所有页面使应用程序变得繁重，所以我们应该使用外部js，其中包括需要帮助我们将js代码用于每个功能的页面。

Answer 9

内联样式/脚本与HTML内容混淆，很难区分。在Web开发中拥有可维护代码的关键之一是编写代码，这些代码很容易被没有编写代码的人阅读。将脚本标记混合到您的html中可能会很难找到影响其余代码的函数。将Javascript放在.js文件和CSS文件中的样式使代码更清晰可读。

为什么内联JavaScript很糟糕？

9 个答案: