嵌入在 dwt 中的 CSS 与外部样式表

Question

我创建了一个有 46 个页面的新网站：http://www.lampshade111.com/ 我使用采用动态 Web 模板的 Microsoft Expression Web 4。 所有 css 都嵌入到 dwt 页面的标题中，并更新到每个单独的网页。 一切看起来和工作都很完美 - 没有问题。

但是，我所阅读的所有内容都建议使用外部样式表。 因此，本着“良好实践”的精神，我从 dwt 标题中删除了 css，并使用（链接）到 dwt 的外部样式表。 当然，各个页面由 dwt 更新，并且链接的 css 文件显示在每个页面上。 同样，一切看起来和以前一样完美。

问题：在使用外部样式表后查看我的网站时，我的浏览器中的网站速度要慢得多。

我有另一个有 256 页的网站，所有 css 都嵌入在主 dwt 的标题中 - 没有外部样式表。 http://www.hoylelamps.com/ 多年来一直运行良好。

问题： 有什么理由不在 dwt 的标题中使用 css 吗？ 这是否比外部样式表更有效（更快）？ 我找不到有关此主题的任何信息。

感谢您的帮助？ - 吉姆

Answer 1

我无法想象为什么外部样式表比外部样式表“慢得多”。链接的样式表将在加载后立即被缓存，无需再次加载。这意味着您加载的第二页和第三页应该更快，除非您在每个页面上使用完全不同的格式。

嵌入式样式表一开始会运行得更快，因为只需要加载一个资源。但随着时间的推移，维护多个嵌入样式表的页面所需的工作将变得更加沉重。请记住，每次您在任何页面中更改甚至一个 CSS 规则时，您都必须在每个页面中进行更改并再次上传所有这些页面。否则，您将在整个网站中使用不同格式的各个页面。

外部链接样式表排除了这个问题。一份样式表，一份要更正和上传的文件。我能想到的唯一会让您的页面加载或响应更慢的事情如下：

• 非常大的样式表
• 使用“import”而不是“link”命令（某些浏览器对这些命令的反应不同）
• 您正在使用非标准 CSS 或非常密集的样式命令。

没有看到 CSS 我真的不能给你更多的建议。浏览器首先必须加载两个文件这一事实将导致其运行速度稍慢。但是很难理解为什么整个网站运行得更慢。

以下是一些建议：

• 您是否在其他浏览器和其他计算机上检查和测试过您的页面？也许它根本不是页面。可能是您使用的浏览器或计算机。
• 如果您的样式表很大，请将其分成逻辑组件。我有用于格式化表格、表单和特殊组件的样式表，它们不会出现在每一页上。仅加载与该页面相关的 CSS。有一个主样式表，然后是针对特定类型组件的专用样式表，例如上面提到的那些。
• 检查您正在使用的命令类型。您是否充分利用了级联、继承和特异性？尝试创建尽可能高效的 CSS。

一开始，保留嵌入式样式表可能很容易，但更新和维护一个带有嵌入式样式表的大型网站会更加繁重。

希望对您有所帮助。