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

Question

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

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

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

我该怎么做才能解决这个问题？如果我应该提供一些代码，请告诉我。 我正在使用Kendo Mobile UI和AngularJS。

Answer 1

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

CSS文件：

• 尽量避免使用3个CSS文件。 3个CSS文件表示3个HTTP请求。如果您需要以这种方式保存文件，那就好了。
• 避免使用＆＃34; @ import＆＃34;在你的CSS文件中
• 缩小CSS文件。您可以使用在线缩小工具在线执行，也可以使用多个库以编程方式执行此操作。
• 将CSS样式加载到文档顶部的<link>标记中。

JS档案：

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

图片：

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

如果您愿意花一些钱来大幅度提高加载时间，那么请考虑使用CDN（内容分发网络）。我使用过Amazon Web Services CloudFront，设置起来非常简单。您将CSS，JS和图像文件放在那里，并在全世界（在所有亚马逊服务器上）进行复制，并且它会改善页面加载时间。它是＆＃34;按使用付费＆＃34;系统，因此您可以随时决定停止使用此服务。

了解更多： https://developer.yahoo.com/performance/rules.html