将我的CSS / JS / Sprite嵌入我的单页web-app中会使其加载速度更快吗？

Question

我有单页网络应用，目前包含四个文件：

• index.html
• main.js
• style.css
• sprites.png

这意味着加载网站的每个用户都必须请求index.html，为其他三个文件解析它，然后再发出三个http请求（我相信），以获取剩余的文件。

在我看来，将javascript，css和sprite图像（base64编码）直接嵌入index.html文件中可能会（稍微快一点）。

我认为不这样做的主要原因，以及我认为在这种情况下不适用的原因如下：

• 可以防止任何这些附加文件单独缓存。这对我来说不是问题，因为它们永远不会从另一个页面加载（因为只有一个html页面）
• 如果文件位于不同的CDN服务器上，则可以并行下载它们。 （目前这个项目不够大，不值得多台服务器）

我应该透露，这个网站是一个小型的宠物项目，这个项目没有 - 大到足以值得进行这种细致的性能调整，但我喜欢用宠物项目作为探索问题（及其解决方案）的途径可能会面对我的日常工作。

Answer 1

通常不会这样做，因为您增加了整个HTML页面的大小。您将在第一次访问时保存一些请求，但是每次获取HTML文件时，您都会强制客户端重新加载所有内容。

它可以提高访问您网站一次的用户的性能，并且只会提高一次。对于任何类型的长期战略，它都是不合适的。

Answer 2

当你的页面被重新加载时，js，images和CSS被缓存在客户端上，并且不需要重新加载。此外，base64要求您的客户激活JavaScript以查看您的页面。最后，与下载文件相比，解码base64可能需要更长时间的弱客户端。 所以简而言之，不要过度思考一些事情。