为什么搜索引擎在其主页中使用嵌入式样式表而不是外部样式表?
Why search engines use embedded style sheets rather than external style sheets in their homepage?
据我所知,层叠样式 sheets (CSS) 可以通过三种方式应用于 HTML 文档:
- 内联样式(配置目标元素的
style
属性)
- 嵌入样式sheet(将css规则放在
style
元素中)
- 外部样式 sheet(link 到
.css
文件)
内联样式 通常被认为是一种反模式,因为表示和结构绑定得太紧密而无法维护。 嵌入样式 sheet 在 <head>
部分使用一个或多个 style
标记,从而更好地分离表示和内容。但是样式sheets只能在这个HTML文档中使用。相比之下,外部样式 sheet 通常被认为是更好的做法,因为 css 规则可以在多个 HTML 文档中重复使用。
但我发现所有的搜索引擎,例如 Google, Bing, Yahoo,都在其主页中使用嵌入样式 sheet 而不是外部对应样式。为什么他们不只是 link 到 .css 文件?他们最关心的是什么?为了性能还是什么?他们如何以这种方式缓存 css 规则?
如果我不得不猜测,他们这样做是因为对他们来说,浏览器加载单独的 CSS 文件所花费的额外 100 毫秒很重要。此外,这保证 HTML 永远不会在 CSS 不加载的情况下加载,因此用户不会看到没有样式的页面。
我想当你处理大量的流量时也会有一些性能上的好处,处理尽可能少的请求可能是更可取的,即使这意味着你使用更多带宽(不过这是我的更多猜测)。
这些站点都使用服务器端脚本,这意味着它们可以轻松地使 CSS 规则在所有页面上保持一致。例如,他们可以有一个 CSS 文件,在将每个页面发送到您的网络浏览器之前,他们会自动将其注入每个页面。在他们这边,他们仍然只有一个 CSS 文件需要维护,即使在您这边,看起来他们在每一页上都有单独的 CSS。
综上所述,这并不意味着您不应该从单独的文件中加载 CSS;对于一家每天服务数十亿页的公司来说有意义的事情可能对您的项目没有意义。
在我自己的网站上,我使用嵌入式缩小样式表,这就是我进行转换的原因。
- 浏览器不必发出额外的请求来下载我的样式表
- 它是一个应用程序,不仅仅是一个网页,样式是动态生成的。这意味着在我的开发机器上我仍然使用常规的外部 CSS。
- 页面内容经过 gzip 压缩,这使得最终文件非常小。这也意味着非常快的下载。
您仍然可以在您的开发机器上遵循最佳实践。如果你正在构建一个应用程序,你可以有一个构建过程来优化它以获得最佳性能。
另外很高兴看到您的网站在 Google 页面速度上得分 100% :)
据我所知,层叠样式 sheets (CSS) 可以通过三种方式应用于 HTML 文档:
- 内联样式(配置目标元素的
style
属性) - 嵌入样式sheet(将css规则放在
style
元素中) - 外部样式 sheet(link 到
.css
文件)
内联样式 通常被认为是一种反模式,因为表示和结构绑定得太紧密而无法维护。 嵌入样式 sheet 在 <head>
部分使用一个或多个 style
标记,从而更好地分离表示和内容。但是样式sheets只能在这个HTML文档中使用。相比之下,外部样式 sheet 通常被认为是更好的做法,因为 css 规则可以在多个 HTML 文档中重复使用。
但我发现所有的搜索引擎,例如 Google, Bing, Yahoo,都在其主页中使用嵌入样式 sheet 而不是外部对应样式。为什么他们不只是 link 到 .css 文件?他们最关心的是什么?为了性能还是什么?他们如何以这种方式缓存 css 规则?
如果我不得不猜测,他们这样做是因为对他们来说,浏览器加载单独的 CSS 文件所花费的额外 100 毫秒很重要。此外,这保证 HTML 永远不会在 CSS 不加载的情况下加载,因此用户不会看到没有样式的页面。
我想当你处理大量的流量时也会有一些性能上的好处,处理尽可能少的请求可能是更可取的,即使这意味着你使用更多带宽(不过这是我的更多猜测)。
这些站点都使用服务器端脚本,这意味着它们可以轻松地使 CSS 规则在所有页面上保持一致。例如,他们可以有一个 CSS 文件,在将每个页面发送到您的网络浏览器之前,他们会自动将其注入每个页面。在他们这边,他们仍然只有一个 CSS 文件需要维护,即使在您这边,看起来他们在每一页上都有单独的 CSS。
综上所述,这并不意味着您不应该从单独的文件中加载 CSS;对于一家每天服务数十亿页的公司来说有意义的事情可能对您的项目没有意义。
在我自己的网站上,我使用嵌入式缩小样式表,这就是我进行转换的原因。
- 浏览器不必发出额外的请求来下载我的样式表
- 它是一个应用程序,不仅仅是一个网页,样式是动态生成的。这意味着在我的开发机器上我仍然使用常规的外部 CSS。
- 页面内容经过 gzip 压缩,这使得最终文件非常小。这也意味着非常快的下载。
您仍然可以在您的开发机器上遵循最佳实践。如果你正在构建一个应用程序,你可以有一个构建过程来优化它以获得最佳性能。
另外很高兴看到您的网站在 Google 页面速度上得分 100% :)