为什么内联JavaScript不好？

始终建议避免内联Javascript代码，方法是将所有代码放在

JS

文件中，该文件包含在所有页面中。我想知道，这是否会在繁重的页面中导致性能问题

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

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

但如果将所有函数保存在外部

JS

文件中，并通过内联

JavaScript

调用函数，则我们只能调用当前页面中所需的函数：

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

window.onload=函数（）{
功能6（“f”）；
};

从性能角度来看，通过内联

Javascript调用函数（这当然不是最佳实践）来避免调用页面中不需要的大量函数，不是很有好处吗？

当然，这不仅仅局限于功能，因为我们为整个网站提供了大量的
addEventListener
s，它们在不需要它们的每个页面上都会被激发出来。
您应该阅读关于不引人注目的javascript，

还有其他一些解决方案可以避免为每个网页加载资产目录中的所有javascript文件，其中一个叫做requirejs，应该签出

此外，一般的经验法则是，当页面加载时，不应该添加所有事件侦听器，那么不存在的dom对象呢？它会抛出javascript错误，并且会比平时更容易破坏您的代码。
不建议内联静态资源（在您的情况下是内联javascript），因为您无法缓存它们

缓存静态资源可以减少页面加载的大小，从而提高页面加载速度。然而，它是以额外的HTTP请求为代价的

当静态资源非常小，以至于与HTTP请求相比，额外的大小可以忽略不计时，实际上建议将该资源保持在内联状态

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

因此，作为对标题的回应——内联javascript本身并不坏。这是一个平衡点，它是否值得一个HTTP请求来缓存资源。

避免内联js不是基于性能的，而是更多的关于可维护性和将表示层（html）与控制器层（js）分离

随着项目规模的增加，在不同页面上使用内联js将使您和其他人难以维护

此外，使用单独的js文件可以鼓励重用性和模块化代码设计

保持html的整洁，当出现任何js错误时，您知道在何处查找，而不是多个模板

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

您可以通过计时来测试示例代码，并查看JavaScript重复运行
getElementsByCassName
需要多长时间

（我敢打赌，这不会花很长时间，即使您有26个函数在寻找具有不同类名的元素，但就性能而言，总是首先度量。）

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

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

浏览器从缓存中获取页面，或发送HTTP请求以查看页面自缓存后是否已更改，和/或发送页面本身的HTTP请求
浏览器解析并呈现页面，暂停以获取并运行任何外部JavaScript，并在解析和呈现的同时获取样式表和图像
浏览器运行任何设置为在文档就绪时运行的JavaScript
浏览器运行任何设置为在页面加载时运行的JavaScript
虽然您当然可以编写运行缓慢的JavaScript，但总体而言，最好将JavaScript放在外部文件中，从而放在用户浏览器的缓存中，而不是通过内联方式增加页面大小。一般来说，网络往往比JavaScript解析/执行慢得多

但是，我再次强调这一点，因为这是最重要的一点，根据代码的不同，这一切都会有所不同。如果您想保持良好的性能，您的第一步和最后一步必须是对其进行测量。
在放置js代码时，需要记住各种情况

对于内联：

如果需要快速更改某些内容，则无需导航到外部文件，因此本地性更好

如果您在页面的某些元素中使用AJAX，那么可能会为该部分释放所有dom元素onclick等，这显然取决于您如何绑定它们。对于ex，您可以使用live或delegate，以防您使用jQuery来避免上述问题。。。但我发现，如果js足够小，最好是将其内联

现在有其他的理论为ex

外部化javascript是yahoo的性能规则之一：

将js内联到所有页面会使应用程序负担过重，因此我们应该使用外部js，其中包括需要帮助我们将js代码用于每个功能的页面。
内联样式/脚本与html内容混淆，很难区分。在web开发中拥有可维护代码的关键之一是编写代码，而这些代码很容易被并没有编写过的人阅读。将脚本标记混合到html中会使您很难找到影响其他代码的函数。放置Javascript
<script type="text/javascript">
window.onload = function(){
function6('f');
};
</script>