26

始终建议通过将所有代码放在一个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文件中，并通过 inline 调用函数JavaScript，我们可以只调用当前页面中需要的函数：

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

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

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

4

9 回答 9

39

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

缓存静态资源可以减少页面加载的大小 - 从而提高页面加载速度 - 以供回访者使用。然而，它以额外的 HTTP 请求为代价，应该避免。

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

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

因此，作为对您的标题的回应——内联 javascript 本身还不错。是否值得 HTTP 请求来缓存资源是一种平衡。

于 2013-09-25T10:50:39.563 回答
19

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

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

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

  • 保持您的 html 干净，并且您知道在发生任何 js 错误而不是多个模板时在哪里查看。

于 2013-09-25T10:51:00.797 回答
7

您应该阅读关于不显眼的 JavaScript， http ://en.wikipedia.org/wiki/Unobtrusive_JavaScript 。

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

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

于 2013-09-25T10:45:50.990 回答
3

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

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

（我敢打赌，即使你有 26 个函数在寻找具有不同类名的元素，但对于性能，总是首先测量。）

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

值得记住的是，加载页面时必须发生的所有事情：

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

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

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

于 2013-09-25T10:51:57.093 回答
1

在放置 js 代码时需要牢记各种情况。

对于内联：

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

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

现在还有其他理论

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

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

于 2013-09-25T10:52:32.087 回答
1

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

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

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

来源：2019 年 JavaScript 的成本

于 2020-06-11T09:32:02.693 回答
1

IMO 它取决于页面。有时对于特定页面和脚本很小，放入外部文件是没有意义的。

于 2020-05-26T05:35:01.690 回答
0

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

于 2013-09-25T19:31:23.183 回答
0

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

于 2015-11-18T17:17:28.043 回答