为什么内联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>

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

当然,这不仅仅限于功能,因为我们有很多addEventListener针对整个网站的s,它们在每个页面上被触发,不需要它们.

Answer 1

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

缓存静态资源可以减少页面加载的大小 - 从而增加页面加载速度 - 以便返回访问者.然而,这是以应该避免的额外HTTP请求为代价的.

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

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

所以,回应你的标题 - 内联javascript本身并不坏.无论是否值得HTTP请求来缓存资源,这都是一种平衡.

Answer 2

• 避免内联js不是基于性能的......但更多的是可维护性并将表示层(html)与控制器层(js)分开.

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

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

• 保持你的html干净,你知道在发生任何js错误而不是多个模板时的位置.

Answer 3

您应该阅读有关非干扰性JavaScript的 http://en.wikipedia.org/wiki/Unobtrusive_JavaScript。

还有其他一些解决方案，它们不为每个网页在您的资产目录中加载所有javascript文件，一个名为requirejs的应检出页面http://requirejs.org/。

而且，作为一般经验法则，在页面加载时，您不应该添加所有事件侦听器，不存在的dom对象呢？它将引发javascript错误，并且会比平时更破坏您的代码。