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

Question

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

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

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

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

Answer 1

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

CSS文件：

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

JS文件：

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

图片：

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

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

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