Answers:
您应该将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文件合并为一个文件的做法。这减少了必要请求的数量。
压缩,这会增加客户端和服务器上每个请求的计算开销。但是,(解压缩)所花费的时间通常小于传输未压缩数据所花费的时间。压缩通常由服务器软件透明地处理。
这些技术也适用于其他资源,例如图像。
我正在设计一个单页网站
如果从字面上看只有一页,那么可以,从性能的角度来看,最好将所有内容都放在一个文件中...样式表,JavaScript甚至图像(内嵌数据URI的小图像)。这消除了检索相对较慢的外部资源所需的其他HTTP请求。
投放前应将生成的文件压缩,这将大大减少全文本响应的大小。
您仍然应该考虑在页面外部放置较大的图像,因为数据URI的大小和浏览器兼容性受到限制。(例如,由于base64编码的性质,IE8的限制为32KB,相当于实际文件大小约为23KB。)
我可以更改权限以拒绝用户请求代码,但是html页面仍可以调用代码吗?
不会。充其量可以混淆代码,以使临时观察者“隐藏”该代码,但它没有提供真正的保护。
好吧,这取决于代码量,以及您对成为程序员/软件工程师而不是程序员的重视程度。我和一群设计师一起工作,他们将简短的代码片段直接放入HTML中,尽管我心存诚意,但它确实有效。
虽然这不是我自己要做的事情,但是如果您确实想了解软件开发的最佳实践,我强烈建议您将外部*.js
文件中的所有内容都放入并通过<script>
标签加载。
关于第二点,没有,您不能拒绝用户或浏览器查看您的代码,有一种称为的东西obfuscation
会使您的代码难以阅读,但是性能会下降。
为我的JS代码创建外部文件还是将其放在html代码中更好?
最好为您的JS代码创建一个外部文件。最好将一个或两个文件提供给客户端。但是,它也最好有跨倍数文件的JS代码分裂的可维护性的问题。为此,您可以使用Gulp之类的预处理器,它将不同的JS文件组合为一个文件。
提供较少的文件更好,因为客户端将处理较少的HTTP请求。
将它放到页面上的加载速度更快吗?
是的,显然,它速度更快,因为您只对HTML发出一个请求,而您将JS代码作为外部请求进行了许多请求(至少2个)。这仅是因为您的JS代码在任何一方都没有被压缩,并且没有考虑到如果将所有代码都放在一个HTML页面中,那么维护代码的难度将有多大。
我可以更改权限以拒绝用户请求代码,但是html页面仍可以调用代码吗?
不,你不能。像CSS代码和HTML代码这样的JS代码是静态内容。这意味着,一旦它进入浏览器,客户端就可以完全下载它及其内容。每个单独的文件,图像,脚本都可以下载。 但是,您可以最小化/拼合您的代码,以使人们更难以使用它。这仅仅是丑化,这是的结果做出了业绩第一。
将html和javascript内容分离到单独的文件中的许多好处: