一个典型的网站由一个索引.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说的那样,如果你只有一页就太好了。
由于以下原因,这不是一个好主意:
-
您将无法享受缓存的好处
-
您将在所有页面中加载不需要的资源
-
您在开发网站时会遇到困难,因为大文件具有不相关的代码分支
-
如果您在团队中工作,则必须始终与队友处理相同的文件,这意味着您将有很多合并冲突。
您可以为所有页面使用一个 CSS,并且由于它将被缓存,因此后续页面将从缓存中引用它,而无需发送额外的请求。
但是,将所有Javascript文件放在一个文件中是上下文相关的。最有可能的是,您可能正在使用jQuery等库和相关插件。这"可能"在插件之间引发冲突问题。因此,在一次尝试所有文件之前,请尝试一次合并几个文件并检查错误是否弹出。