将javascript和css内联放在一个缩小的html文件中以提高性能

Put javascript and css inline in a single minified html file to improve performance?

本文关键字：html 缩小 一个 文件 高性能 css javascript      更新时间：2023-09-26

一个典型的网站由一个索引.html文件和一堆javascript和css文件组成。为了提高网站的性能，可以：

  • 缩小javascript和css文件，以减小文件大小。
  • 将 javascript 文件连接成一个文件，与 css 文件类似，以减少对服务器的请求数量。对于像jquery这样的常用（和共享）库，将它们保留在外部是有意义的，允许浏览器缓存库并在不同的Web应用程序中重用它。

我想知道将连接的javascript和css文件内联到单个html文件上是否有意义，这将进一步减少请求数量。这会提高您网站的性能吗？还是它会反向工作，使浏览器无法缓存任何内容？

将

CSS 和 JS 文件连接到一个文件中将减少请求数量并使其加载速度更快。但正如评论的那样，除非您有一个单页网站并且该页面的加载时间非常关键，否则它没有多大意义。所以在我看来，你最好将CSS与Javascript分开。

这是一本书，您可以在其中了解有关该主题的更多信息：

高性能网站

这个工具可能会帮助你。将您的网页转换为包含所有内容的单个 HTML 文件 - 非常适合您希望减少这些 http 请求的移动设备上的 appcache 清单。

https://github.com/remy/inliner

这将减少请求的数量，但也意味着不会缓存这些请求以用于其他页面。 将定义外部文件视为告诉浏览器"并且站点的这一部分是可重用的"的一种方式。 你会把这种能力拿走，所以CSS和JS会加载。 就像jackwanders说的那样，如果你只有一页就太好了。

由于以下原因，这不是一个好主意：

  1. 您将无法享受缓存的好处

  2. 您将在所有页面中加载不需要的资源

  3. 您在开发网站时会遇到困难，因为大文件具有不相关的代码分支

  4. 如果您在团队中工作，则必须始终与队友处理相同的文件，这意味着您将有很多合并冲突。

您可以为所有页面使用一个 CSS，并且由于它将被缓存，因此后续页面将从缓存中引用它，而无需发送额外的请求。

但是，将所有Javascript文件放在一个文件中是上下文相关的。最有可能的是，您可能正在使用jQuery等库和相关插件。这"可能"在插件之间引发冲突问题。因此，在一次尝试所有文件之前，请尝试一次合并几个文件并检查错误是否弹出。

相关文章：