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 规则时，您都必须在每个页面中进行更改并重新上传所有这些页面。否则，整个站点中的各个页面将采用不同的格式。

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

• 非常大的样式表
• 使用“导入”而不是“链接”命令(某些浏览器对这些命令的 react 不同)
• 您正在使用非标准 CSS 或非常密集的样式命令。

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

这里有一些建议:

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

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

希望对您有所帮助。