javascript - 为什么内联 JavaScript 不好？

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>

从性能的 Angular 来看，通过内联 Javascript 调用函数(这当然不是最佳实践)以避免调用大量函数是否有益，这页面中不需要？

当然，这不仅限于函数，因为我们有很多用于整个网站的 addEventListener，它们会在每个不需要的页面上触发。

Answer 1

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

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

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

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

因此，响应您的标题 – 内联 javascript 本身并不坏。缓存资源是否值得 HTTP 请求是一种平衡。