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

Posted 2023-05-07

【中文标题】加载 HTML 内容后应用的 CSS 规则

【英文标题】：CSS rules applied after HTML content is loaded

【发布时间】：2015-03-20 04:18:15

【问题描述】：

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

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

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

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

【问题讨论】：

先加载 CSS 文件？

在网站完成加载您的内容之前显示“加载”图标并隐藏主要内容怎么样？

我想过这个。我认为这是我的最后一个选择，因为我不想引入“加载”动画 - 感觉应用程序很慢。

如果是“单页应用”....怎么会有“一些页面”？

浏览器不会重新加载/重定向到不同的 html 视图，因此它是一个单页应用程序。 “页面”是指用户在给定时刻作为页面查看的内容。它可能是登录屏幕或常见问题解答屏幕，但它是一个 SPA。

【参考方案1】：

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

CSS 文件：

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

JS 文件：

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

图片：

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

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

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

【讨论】：

请问 - 在文档底部加载我的 JS 文件有什么帮助？

浏览器加载页面时，从上到下，从左到右读取HTML文档。在读取 HTML 文档时，浏览器会在到达您的 JS 脚本并执行它们之前读取整个 DOM。该页面将加载得更快。如果您将脚本放在页面顶部，浏览器将首先读取头部中的脚本并启动回调（“document.ready”、“window.load”等）并且您的 DOM 尚未准备好然而。浏览器将从文档顶部到文档底部来回移动。

这就是为什么您应该将所有脚本放在页面底部以确保 DOM 已加载并避免在页面加载时因额外的循环和回调而使浏览器膨胀。

Yahoo! Performance Rules：检查这部分“将脚本放在底部”。另外：***.com/a/5329895/1337185