将JS代码放在html文件或外部文件中是否更好?


16

如果我正在设计一个网页网站,那么为我的JS代码创建外部文件还是将其放在html代码中更好?将它放到页面上的加载速度更快吗?我可以更改权限以拒绝用户请求代码,但是html页面仍可以调用代码吗?

Answers:


26

您应该将JS代码放在单独的文件中,因为这样可以更轻松地测试和开发。如何提供代码的问题是另一回事。

  • 分别提供HTML和JS的好处是客户端可以缓存JS。这要求您发送适当的头,以便客户端不会每次都发出新请求。如果要执行更新并因此要使客户端缓存无效,则缓存会出现问题。一种方法是在文件名中包含版本号,例如/static/mylibrary-1.12.2.js

    如果JS在单独的文件中,则不能限制对它的访问:很难(技术上:不可能)是因为您在HTML页面上引用了它,还是因为有人想要下载它,所以很难确定是否对JS文件发出了请求直。但是,您可以使用cookie并拒绝为不传输某些cookie的客户提供服务(但这很愚蠢)。

  • 在HTML内提供JS会增加每个页面的大小,但是如果客户端不太可能查看多个页面,则可以这样做。由于客户端没有发出针对JS的单独请求,因此该策略可以更快地加载页面-至少是第一次,但是在保持盈亏平衡点上缓存更好。您可以例如通过PHP包含JS。

    在这里,客户端不需要单独访问JS文件,可以根据需要将其隐藏。但是任何人仍然可以在HTML内查看JS代码。

其他减少加载时间的策略包括

  • JS 缩小可减少您提供的JS文件的大小。由于在部署代码时缩小只会发生一次,因此这是节省字节的非常有效的方法。OTOH,这会使您的代码对感兴趣的访问者更难理解。

    与压缩相关的是将所有JS文件合并为一个文件的做法。这减少了必要请求的数量。

  • 压缩,这会增加客户端和服务器上每个请求的计算开销。但是,(解压缩)所花费的时间通常小于传输未压缩数据所花费的时间。压缩通常由服务器软件透明地处理。

这些技术也适用于其他资源,例如图像。

  • 图像可以通过数据URL内联到HTML或CSS中。这仅适用于小型,简单的图像,因为base64编码会增大尺寸。这仍然可以比另一个请求更快。
  • 可以将多个小图像(图标,按钮)组合成一个图像,然后将其提取为精灵。
  • 服务器可以将图像缩小到网站上实际使用的大小,从而节省了带宽。比较缩略图。
  • 对于某些图形,基于文本的图像(例如SVG)可能要小得多。

“不确定如何进行测试和开发”,我不确定为此目的将JS放在自己的文件中是否总是有帮助。在一个项目中,我使用了非常小的HTML文件,实际上,它组织得更好,将它们包含在HTML中。就缓存而言,它可以提高多次访问的速度(也许),但是对于第一个页面加载,将javascript直接包含在HTML中总是会更快。
YungGun

5

我正在设计一个单页网站

如果从字面上看只有一页,那么可以,从性能的角度来看,最好将所有内容都放在一个文件中...样式表,JavaScript甚至图像(内嵌数据URI的小图像)。这消除了检索相对较慢的外部资源所需的其他HTTP请求。

投放前应将生成的文件压缩,这将大大减少全文本响应的大小。

您仍然应该考虑在页面外部放置较大的图像,因为数据URI的大小和浏览器兼容性受到限制。(例如,由于base64编码的性质,IE8的限制为32KB,相当于实际文件大小约为23KB。)

我可以更改权限以拒绝用户请求代码,但是html页面仍可以调用代码吗?

不会。充其量可以混淆代码,以使临时观察者“隐藏”该代码,但它没有提供真正的保护。


1
为什么要负票?对于开发站点和多页面站点,最好使用单独的/外部文件,但在这种情况下,OP专门询问“一个页面站点”以及它是否“加载速度更快”。在这种情况下,最小化HTTP请求应该是优先事项。您可以(并且应该)仍然使用多个文件进行开发,但这不是要问的问题。
MrWhite 2014年

通过将js,css和图像放在单独的文件中,您可以允许浏览器缓存文件。因此,如果页面内容更改,则仅需重新加载html。
Thierry J.

@ThierryJ。好的,您可以缓存文件,但是在第一页加载时(这对于获取新用户非常重要),由于所有缓存均无效,因此包含所有文件的速度仍然要快得多。此外,计算机仍必须加载缓存的文件,如果将文件包含在HTML中,则将完全跳过此步骤。几乎在每种情况下,首先将文件包含在HTML中可能会更快。无论如何,您将不得不重新加载HTML,而javascript部分不能超过100 kB,这可以忽略不计。
YungGun

4

客户端JS代码必须由浏览器查看(也就是说,如果页面需要直接使用JS)-这意味着它必须由浏览器下载。

如果浏览器无法下载JS,则无法在该页面上使用JS。

在这方面,内联JS或将其放在文件中并没有什么不同,尽管通常的做法是使用JS文件(将关注点分离)。

如果您有不想公开给浏览器的代码,则需要使用服务器端代码(例如,node.js,php,perl,asp.net,jsp-有很多选项)并与之交互从浏览器-在初始页面加载时或使用AJAX


2

好吧,这取决于代码量,以及您对成为程序员/软件工程师而不是程序员的重视程度。我和一群设计师一起工作,他们将简短的代码片段直接放入HTML中,尽管我心存诚意,但它确实有效。

虽然这不是我自己要做的事情,但是如果您确实想了解软件开发的最佳实践,我强烈建议您将外部*.js文件中的所有内容都放入并通过<script>标签加载。

关于第二点,没有,您不能拒绝用户或浏览器查看您的代码,有一种称为的东西obfuscation会使您的代码难以阅读,但是性能会下降。


1

为我的JS代码创建外部文件还是将其放在html代码中更好?

最好为您的JS代码创建一个外部文件。最好将一个或两个文件提供给客户端。但是,它最好有跨倍数文件的JS代码分裂的可维护性的问题。为此,您可以使用Gulp之类的预处理器,它将不同的JS文件组合为一个文件。

提供较少的文件更好,因为客户端将处理较少的HTTP请求。

将它放到页面上的加载速度更快吗?

是的,显然,它速度更快,因为您只对HTML发出一个请求,而您将JS代码作为外部请求进行了许多请求(至少2个)。这仅是因为您的JS代码在任何一方都没有被压缩,并且没有考虑到如果将所有代码都放在一个HTML页面中,那么维护代码的难度将有多大。

我可以更改权限以拒绝用户请求代码,但是html页面仍可以调用代码吗?

不,你不能。像CSS代码和HTML代码这样的JS代码是静态内容。这意味着,一旦它进入浏览器,客户端就可以完全下载它及其内容。每个单独的文件,图像,脚本都可以下载。 但是,您可以最小化/拼合您的代码,以使人们更难以使用它。这仅仅是丑化,这是的结果做出了业绩第一。


0

将html和javascript内容分离到单独的文件中的许多好处:

  • 提高单个课程文件的可读性
  • 由于javascript代码不再局限于html文件,因此其他html和javascript文件或库都可以使用您的javascript代码
  • 同样,放在单独文件中的javascript代码可以轻松使用其他文件和高级库进行复杂的计算(机器学习,3D图形,框架等库)
  • 可以在客户端缓存javascript,这样在刷新页面时仅需要重新加载html内容
  • 良好/现代的软件工程实践可以更轻松地应用于单独的javascript文件/模块/库(设计模式,有关打字稿/小字体的阅读等)
  • 通过缩小/丑化,可以很容易地将javascript代码从网页的访问者中混淆或“隐藏”起来
  • 可以通过gulp,webpack等将javascript文件捆绑在一起成为一个文件/模块

1
在先前的6个答案中,这似乎并没有提供任何实质性的要点和解释
gna
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.