html - 加载 HTML 内容后应用的 CSS 规则

Question

我有一个适用于移动设备的网络应用程序。

这是一个单页应用程序，因此它使用了一个相当大的索引文件和 3 个巨大的 CSS 文件。

在某些页面中，CSS 规则是在内容加载后应用的，这意味着我可以在表单字段仍未设置样式时短暂地看到它们。

我该怎么做才能解决这个问题？让我知道是否应该提供一些代码。我正在使用 Kendo Mobile UI 和 AngularJS。

Answer 1

您需要加快页面加载时间。

CSS 文件:

• 尽量避免使用 3 个 CSS 文件。 3 个 CSS 文件意味着 3 个 HTTP 请求。如果您需要保持这种方式来组织文件，那很好。
• 避免在 CSS 文件中使用“@import”
• 缩小您的 CSS 文件。您可以使用在线 Minify 工具在线完成此操作，也可以使用多个库以编程方式完成此操作。
• 在 <link> 中加载您的 CSS 样式文档顶部的标签。

JS 文件:

• 在文档底部加载你的 JS 文件
• 缩小您的 JS 文件。您可以使用在线 Minify 工具在线完成此操作，也可以使用多个库以编程方式完成此操作。

图片:

• 尝试使用 PNG8 而不是 GIF 图片
• 尽可能使用高质量 (60%) 的 JPEG
• 尝试通过将多个图形组合到一个图像文件中来使用 CSS Sprites。这将减少 HTTP 请求的数量。
• 如果您希望在调用 JavaScript 函数或处理某些内容之前显示图像，请使用 JavaScript 预加载图像。

如果您愿意花一些钱来大幅缩短加载时间，请考虑使用 CDN(内容分发网络)。我使用过 Amazon Web Services CloudFront，它的设置非常简单。你将你的 CSS、JS 和图像文件放在那里，它们会在世界各地(在所有亚马逊服务器上)被复制，这将缩短页面加载时间。这是一个“按使用付费”系统，因此您可以随时决定停止使用此服务。

阅读更多: https://developer.yahoo.com/performance/rules.html