我有一个适用于移动设备的网络应用程序。
这是一个单页应用程序，因此它使用了一个相当大的索引文件和 3 个巨大的 CSS 文件。
在某些页面中，CSS 规则是在内容加载后应用的，这意味着我可以在表单字段仍未设置样式时短暂地看到它们。
我该怎么做才能解决这个问题？让我知道是否应该提供一些代码。 我正在使用 Kendo Mobile UI 和 AngularJS。
最佳答案
您需要加快页面加载时间。
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 和图像文件放在那里，它们会在世界各地(在所有亚马逊服务器上)被复制，这将缩短页面加载时间。这是一个“按使用付费”系统，因此您可以随时决定停止使用此服务。
关于html - 加载 HTML 内容后应用的 CSS 规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28070723/