1

我正在使用 jquery mobile 创建一个移动单页 Web 应用程序。webapp 包括一些 javascript 文件和一些 css 文件。我已经编写了一个连接和缩小 js 和 css 文件的部署脚本，现在我想知道是否应该直接在 HTML 文件中内联连接的 js 和 css - 请注意我在这里谈论的是单页应用程序（我知道在具有动态生成 HTML 的传统 web 1.0 应用程序中，这将是一个坏主意）。我还使用 appcache/manifest 文件来缓存单页应用程序，以便从缓存中提供对 Web 应用程序的后续访问，因此我主要关心的是初始加载时间。

当我内联所有内容（jquery、jquery mobile 等）时，我的 7kb HTML 文件增加到 350kb（压缩后为 100kb），但现在所有内容都可以在一个请求中加载。

但是我是否缺少其他一些好处，例如并行下载 js 文件 - 因此最好不要内联 css 和 js，而是将所有 js 和 css 连接到单个 js 文件和单个 css 文件然后获取他们每个人都在单独的请求中？

我应该注意关于文件大小的任何限制吗？也许网络路由器中的缓存在较小的文件大小或其他情况下效果更好？

所以我的问题归结为在制作单页移动网络应用程序时内联所有内容是否是个好主意？

4

2 回答 2

3

应该连接多少以及应该内联多少的答案取决于许多条件。最终的答案是您应该进行 A/B 测试并找到最适合您的方法。根据您的描述，我建议您绝对不要内联 350K 的 CSS 和 JS。如果您这样做，那么对 HTML 或 JS 或 CSS 的任何更改都需要下载整个有效负载。相反，通过将 HTML、JS 和 CSS 作为单独的请求来划分这些更改和强制更新。你可以做动态| 内联使第一个响应快速但利用（应用程序或本地存储）缓存来处理后续请求，但是当与应用程序缓存结合使用时会变得复杂（因为 HTML 文档保存到应用程序缓存中）。否则，只需将它们分开，将每个资源保存到应用程序缓存，并根据需要更新各个资源。

于 2012-09-09T20:21:36.513 回答
1

如果可以从具有不同查询字符串的不同 url 访问您的 webapp，我不建议将所有内容内联到 html 中。例子 ：

每个都将在 appcache 中添加一个主副本（您可以通过查看 chrome://appcache-internals/ 在 chrome 中对其进行验证）。然后，您可能会在缓存方面达到 appcache 的配额限制。此外，在 appcache 更新时，浏览器会遍历其 appcache 条目列表并询问它的新副本。对于移动设备和应用缓存，我遵循的一个很好的折衷方案是保持 html 很小，然后有一个大的 css（包含 base 64 内联图像）和一个 js 文件。

仅供参考，目前在 appcache 中列出的所有资源总和的大小有一个配额限制，顺序为 5MB 到 25MB（25 是新的 iOS6 限制）

-seb

于 2012-10-30T05:10:02.530 回答