页面内的Javascript有什么缺点吗?

时间:2011-03-23 23:58:54

标签: javascript html web-applications node.js

在我的构建中(对于复杂的webapp),我已将所有javascript聚合为1个文件,我将其作为script.js加载

我想我可能会更进一步,只需将所有js打印成html。我有什么理由不这样做吗?我的想法是......为什么不直接保存请求?

我所知道的唯一缺点是: 据我所知,由于js非常庞大,初始页面加载可能会变慢。

我并不十分担心,因为没有javascript,页面都是空的。

还可以缓存script.js。如果我想在html中缓存脚本,我将不得不使用清漆等。

我不应该这样做的原因是什么?感谢。

编辑:我忘了提到这是一个1页的javascript应用程序,所以每个页面都有相同的javascript(和html)。

6 个答案:

答案 0 :(得分:7)

我使用一个缩小的外部js文件。作为一个单独的文件,它可以很好地缓存,但需要额外的HTTP请求。

如果你把你的java脚本内联,那么就不会简单地缓存它,如果你重复使用内联方法,你将在每个页面上重复代码。

答案 1 :(得分:2)

给予安迪信用 - 如果我可能如此放肆,这就是他们的意思。

将文件设置为外部是更好的形式,因为它简化了缓存。允许它轻松缩小以便更轻松地运输,并使JavaScript更容易维护。

答案 2 :(得分:2)

有很多理由将javascript代码与HTML分开(如果不仅仅是出于“最佳做法”目的),但在这种情况下有一个非常重要的重要原因。

缓存。当它在另一个文件(例如“script.js”)中时,该文件将在第一次页面加载后被缓存,因此在缓存过期之前不会从服务器读取。如果你把它放到HTML中,javascript将每次重新加载。 Varnish只是服务器端上的HTTP加速器。它完全修改客户端的缓存,因此仍将发送所有数据。 Varnish不会重新解析服务器上的数据(服务器脚本(PHP / ASP /等),客户端脚本(javascript))。这是了解这个问题的最重要的一点。所有代码将不断重新发送给客户端,这将极大地阻碍加载时间。

此外,在以下情况下将它们分成不同的文件真的很重要: A)一个文件将比其他文件更频繁地更改(再次缓存原因) B)如果您打算在某些页面上使用某些功能(而不是在每个页面上都使用)。没有必要让javascript解释它从未在该页面上使用的函数头(仅由于延迟执行而实际上是函数头)。 C)组织目的更容易。

最后,浏览器实际上会同时加载多个页面。如果您有一个“index.html”页面和一个“script.js”页面,它们将同时加载,因此可以更快地开始执行。如果将“script.js”拆分为三个文件(例如“script1.js”,“script2.js”和“script3.js”),浏览器将同时加载这些页面,从而开始执行更快而不仅仅是一个script.js文件。大多数浏览器的默认并发页面加载值为“3”,这意味着它只会同时加载3个页面,因此将一些内容拆分成大量文件而不是仅仅一两个页面是没有意义的。

我希望我已经明确说明为什么要将你的javascript与HTML分开(特别是如果你在javascript中制作一个大型的webapp)。

答案 3 :(得分:1)

对于单页网站而言,这可能会很好用,但如果您需要在多个网页或具有多个网址端点的应用中共享该代码,则效果不会很好。

答案 4 :(得分:0)

在加载正文之前运行所需的所有脚本都应放在<head>部分中。此外,需要在正文加载后运行的脚本也应放在<head>部分中,但放在document.onload包装内。拥有此包装器将确保您可以访问页面上的元素,因为它将在>渲染正文后运行

如果您需要运行需要在正文加载时执行的脚本,您可以在正文中放置内联<script>标记,因为它们将执行 页面正在渲染。这在您需要调整某些元素的宽度/高度但不希望 跳转 的情况下非常有用,如果将其置于{{{ 1}}包装器。

不要忘记合并和压缩document.onload部分中的所有脚本,因为这样可以确保更快的页面加载,并且它也会被浏览器缓存。

答案 5 :(得分:0)

您的JavaScript文件是否需要客户端缓存?如果是这样,我会倾向于单独的文件。