内联JavaScript是好是坏？

16

我目前已从WordPress切换到Yii框架，并且外部开发人员正在重建我的网站。

我注意到的一件事是，每次他以Yii方式调用AJAX / jQuery时，它都会在网页中内嵌~~嵌入式JavaScript~~。尽管似乎JavaScript代码位于页脚下方，但仍是内联的。

通常，似乎将JavaScript代码更频繁地放置在网页中。一直以来，我一直认为JavaScript脚本应尽可能地放置在JavaScript文件中。这是即将到来的“新”趋势吗？还是应该仍然将JavaScript代码保存在单独的文件中？

html javascript

— 史蒂文
source

您将JavaScript内联插入网页的确切含义是什么？

— Salman A

3

为了让其他人找到这个问题并考虑这样的事情<a onClick="function(){/* do stuff */} ">Click Here</a>，据我所知，这被认为是非常糟糕的，应该将其代码与HTML分开。请参阅：本文

— TecBrat 2014年

1

@ user1066946 t.co/j1RpJgwoku :-)

— Kos

1

@ user1066946我真的很喜欢使用Angular，我刚刚观察到“语义网”已经绕了一个圈（就在DOM旁边保留了一些粘合代码而言）

— Kos

1

“尽管看起来JavaScript代码位于页脚下方，但它仍是内联的。” -听起来好像您是在指嵌入式 JavaScript，而不是“内联” JavaScript（TecBrat指的是）。

— 怀特先生

13

内联JavaScript会增加页面的下载时间，这不好。通过调用.js文件，至少可以并行调用这些文件，从而减少了内容下载时间。是的，在某些情况下可以将JavaScript直接放入HTML代码中，但是通常最好将其卸载。

请记住，页面下载时间（即HTML）和并非所有资源调用都会影响会影响排名的指标（尽管使用PageRank或在SERP中都没有关系）。关键是，它会影响网站的SEO性能，但它确实体现出来了。

— 壁橱
source

7

协商到大概相同的主机的第二个连接以下载相同数量的数据是否比活动流中的速度更快？通常，如果您将文件的50Kbps发送给主机，则开始第二个会话可能会削减它，因此现在两者都为25Kbps。除非主机由于某种原因而限制每个连接。

— EkriirkE 2014年

虽然有一个外部文件的骗局。如果操作不正确，则会创建DOMblocking代码，即doc.ready触发器较慢，这会影响预期的速度。但是，如果做得好，那就是外部的方式

— Martijn 2014年

4

.js文件更适合缓存，没有意义的是，到同一主机的两个连接会神奇地使您的下载速度更大。

虽然我了解您的逻辑，但这并不是完全错误的想法，但是划分带宽的想法有点误导。HTML较小，花费的时间更少，任何后续调用实际上都可以等待。

— closetnoc

3

如果您在寻找时间，那么查看带宽是错误的。看一下分析器在加载时间：通常，连接时间比实际数据交换时间大10-100倍。这意味着片段化是一个实际的问题，对于非常小的js使用外部专用文件可能会更糟糕。内联在不执行真正的并行化的浏览器上更好

— -Lesto

29

在我的货币转换网站上，大多数会话都是单页浏览。这是因为用户可以直接在登录页面上进行货币计算（所有计算都通过JavaScript在客户端进行。）

当所有资源（css，js甚至是image）都插入页面时，我的页面下载并呈现的时间大约是一半。由于很少有用户查看多个页面，因此无法从页面视图之间缓存的某些资源中受益匪浅。

我的网站不是典型的。大多数站点每个会话都有多个页面，并且图像较大，这会使我的技术不太适用。这个问题没有正确的解决方案。这取决于站点。您需要根据用户的典型行为自己进行测量。

— 斯蒂芬·奥斯特米勒
source

12

在HTML文件中包含JavaScript不一定是坏事，但是您必须对其进行判断。

这是，如果你有多个页面中使用了大量的JavaScript的坏。在这种情况下，JavaScript应该位于一个外部，压缩且可缓存的文件中，并且如果您的网站流量非常大，则应使用CDN。

但是，如果您的JavaScript数量很少，则可能由于您需要提出一个额外的HTTP请求来检索它而否定了将其放入外部文件的工作。在这种情况下，将JavaScript保留在页面中会更有效。

然后，如果在多个页面上使用相同的JavaScript小片段，则将其放置在外部文件中以利用缓存将是有益的。

最终，您必须权衡JavaScript的大小和发出其他HTTP请求的开销。在大多数情况下，对于“平均”网站，仅将其放在外部文件中可能不会有很大的不同。

— 泡沫牛
source

4

我是Yii开发人员，我可以告诉您，Yii与这无关。无论是将Javascript代码放置到一个单独的文件中，然后使用方法在HTML（视图）页面中进行注册，还是将其直接用于视图（HTML）代码并使用方法进行注册，这完全在开发人员方面。CClientScript::registerScriptFileCClientScript::registerScript

根据您的回答，大多数（专业人士）Yii开发人员都强烈赞成第一种方法，即-在单独的文件中保留尽可能多的Java代码。因此，这当然不是编码的新趋势，而是不良的开发人员实践。至少，这就是在Yii社区中看到的方式。

编辑：实际上，我忘记了最重要的论点。Yii（以及大多数其他专业的PHP框架）是基于MVC设计模式（实际上是架构模式）构建的。并且前面可以使用相同的模式：HTML代码是模型（数据），CSS是视图（装饰器），而Javascript是控制器。它们全部放入单独的文件中，.js并且.css在最佳情况下将文件缩小，混淆和压缩。

当您构建Yii应用程序时，您可以破坏MVC模式并将所有内容保存在同一文件中。问题是-这样做值得吗？好处是什么（没有？），这将带您去何处？您可以在询问是否保持JS代码内联时使用相同的论点？

— 特雷德
source

好。开发人员似乎对所有东西都使用了第三方小部件。自动完成，ajax图像上传等。所有这些都添加了内联js。

— 史蒂文

不，我不同意。我在我的Yii应用程序中使用Twitter Bootstrap（可能是Yii的最大扩展和大量的小部件），以及许多其他Yii的扩展，但没有一个使用内联JS。您的开发人员必须非常幸运地找到仅使用内联Javascript的小部件和扩展。您必须在Yii方面具有丰富的经验才能开始编写自己的扩展（除了少数例外，写得不好），即使其他经验不足的Yii开发人员也可以使用内联代码作为选项，如果其他所有方法都失败了。

— trejder 2014年

在Yii中使用3rd party扩展名和小部件是个好主意（您无需再次发明轮子）。但是，在Yii应用程序或扩展中使用内联JS代码确实是一种不好的态度。因此，要么强迫您的开发人员编写更好的代码/使用更好的扩展程序和小部件，要么……获得更好的开发人员！：]

— trejder

好的，谢谢您的反馈。除了Stackoverflow，我在哪里可以找到一个好的Yii社区？

— 史蒂文2014年

在Yii论坛上。大多数页面均可免费访问。有些要求注册帐户并登录。Stack Overflow的大多数Yii开发人员在论坛上都有自己的帐户。经过近六年的发展，Yii框架赢得了一个庞大的开发人员社区，因此，如果仔细观察，您应该能够在本地社区甚至社区中找到很少的Yii开发人员。祝好运。

— trejder 2014年

3

实际上，这取决于您要开发的网页的目的：

我使用少量的内联JavaScript，但是如果外部JavaScript文件很大，则我更喜欢使用它。

无论哪种方式，当页面加载JavaScript时，都必须先执行它。最佳做法是使用外部JavaScript，以免延长页面内容。这也使调试更加容易。

— 阿比吉斯·巴图（Abhijith Bhattu）
source

2

答案实际上取决于正在执行的操作。

如果您注意到在网站上使用的内联JavaScript（例如，在网站所有页面的标题内显示的小部件），则将其移至“通用” JavaScript文件是合适的。

实际上，即使是在单个页面上使用，我也会将尽可能多的JavaScript移到一个常见的JavaScript文件中。我将服务器配置为发送强大的JavaScript文件缓存和压缩头。这会减小页面的大小，但不会大大增加JavaScript文件的大小。

另一方面，如果JavaScript只是一堆配置选项/初始化，例如：

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

出于某种原因，无法将代码移动到外部JavaScript文件中（例如，当图像参数来自数据库时），我将其内联。话虽如此，我会选择“不引人注目的”第三方插件（或将其转换为第三方插件）。

— 萨尔曼A
source

2

这些答案没有达到目标。看看内联缓存。

由于Yii是用PHP编码的，因此您会发现一种常见（或不常见）的PHP模式是，开发人员有时会根据服务器已知的某些状态，条件或值，编写PHP代码来在服务器上动态生成Javascript代码-然后将其全部发送给客户端，从而允许客户端执行该功能并跳过服务器已经完成的一些计算。

与其将.js文件中的一大堆通用Javascript函数发送给客户端，这些客户端在没有提供数据（可能位于服务器上并需要往返的数据）之前没有上下文，我们可以“烘焙”上下文/数据作为Javascript函数的一部分。节俭是因为这意味着您要一起发送功能/数据，并且只发送客户端当时可能需要的功能/数据，而不是在第一页加载时发送整个应用程序。这也意味着您不必在首次加载页面时就使整个应用程序易于下载和反向工程，因为您只需要注入每个客户端当时可能需要的一小部分功能。不确定SEO的预兆如何，但我确定可以相应地对其进行优化。

考虑最终用户使用某些WYSIWYG编辑器在某些CMS软件中编写页面的情况。当该用户无权访问服务器上的源.js文件时，该如何向页面添加新功能？他们切换到HTML选项卡并使用内联Javascript。

并不是所有的内联Javascript都是不好的。有时onclick也可以。作为一般建议，避免编写内联Javascript，否则您将逐渐养成良好的习惯。

参考文献：

— 佩里
source

0

通常，内联JS代码是不好的，就像其他人在我之前说的那样。

但我认为内联JS 更好的用例。

考虑插入一个JS驱动的图库的CMS。画廊可能在jQuery中完成。它由一个id属性标识，该属性不仅在页面上是唯一的，而且在整个网站上也是唯一的。在这种情况下（我认为），内联JS会更好，因为该JS代码仅在一页上使用，并且没有HTTP开销

— 云禅
source