额外的、未使用的 CSS 定义是否会降低浏览器的速度?

发布于 2024-11-03 13:55:26 字数 610 浏览 2 评论 0原文

在与许多 CMS 合作并切割了许多 HTML 设计之后,当我看到 SilverStripe 对 CSS 的使用时,我被转换了。

本质上,根据您所在的页面更改

标记中的 ID 是一种浪费,并且更改 标记的类和ID 将是更改特定页面的更简单的方法。

在以下问题中,一位同事对这种信念提出了质疑:

在一个特定的网站上,我们有各种结构相似的页面。有些可能包含特殊表格,有些可能不包含。所有特殊表单都应该有不同的背景图像,具体取决于我们所在的子部分。

由于声称“额外的 CSS 行会减慢 body.onLoads”,我对所有背景进行编码的论点CSS 中的期望被拒绝了。

有人可以引用各种案例之间的证据吗?案例包括: CSS 编码错误,以及 CSS 编码良好,但每个页面上都有各种未使用的 CSS?

(具体来说我的问题,有人能解释我的不安吗?假设图像会在那里并根据数据库中的变量自动生成内联CSS(或基于标题部分的样式标签),我感到不舒服。)

After working with many CMSes and cutting up many HTML designs, when I saw SilverStripe's use of CSS, I was converted.

Essentially, that it would be a waste to change IDs in <div> tags depending upon the page you were on, and that changing the <body> tag's classes and ID would be an easier way of changing specific pages.

Such convictions were brought into question by a coworker during the following problem:

On a specific website, we have a variety of pages that are similar in structure. Some may include a special form, and some may not. All special forms should have a different background image depending upon the sub-section we are in.

Due to a claim that "additional lines of CSS slow down body.onLoads," my argument to code all background expectations in the CSS was rejected.

Can anybody cite evidence between a variety of cases? Cases including: Badly-coded CSS, and CSS well-coded, but having a variety of unused CSS on each page?

(And specifically speaking on my problem, can anybody explain my unease? I feel uncomfortable assuming images will be there and auto-generating Inline CSS (or header-section-based style tags) based upon a variable from a database.)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

千秋岁 2024-11-10 13:55:26

这并不重要(明显),除非您的网站是 Gmail 或 YouTube(或类似的 CSS 密集型网站)。

Google 在其 Page Speed 指南中提供了一些建议:

http://code .google.com/speed/page-speed/docs/payload.html#RemoveUnusedCSS

删除或推迟样式规则
不被文档使用避免
下载不必要的字节并允许
浏览器更快地开始渲染。

在浏览器开始渲染之前
网页,必须下载并解析
任何需要的样式表
布置页面。即使样式表
位于缓存的外部文件中,
渲染被阻止,直到浏览器
从磁盘加载样式表。在
另外,一旦样式表是
加载后,浏览器的 CSS 引擎已
评估其中包含的每条规则
文件以查看规则是否适用
当前页面。很多时候,很多网络
站点重复使用相同的外部 CSS 文件
对于他们的所有页面,即使有很多页面
其中定义的规则不适用
到当前页面。

最好的方法
最大限度地减少由以下原因引起的延迟
样式表加载和渲染时间
是为了减少 CSS 的占用;
一个明显的方法是删除
或推迟不适用的 CSS 规则
当前页面实际使用的。

关于这一点:

由于声称“附加线路
CSS 减慢了 body.onLoads,”我的
参数编码所有背景
CSS 中的期望被拒绝。

额外的时间约为几毫秒。做更容易和可维护的事情,而不是更“高效”的事情。

It's not going to matter (noticeably) unless your website is Gmail or YouTube (or is similarly CSS heavy).

Google has some recommendations in their Page Speed guide:

http://code.google.com/speed/page-speed/docs/payload.html#RemoveUnusedCSS

Removing or deferring style rules that
are not used by a document avoid
downloads unnecessary bytes and allow
the browser to start rendering sooner.

Before a browser can begin to render a
web page, it must download and parse
any stylesheets that are required to
lay out the page. Even if a stylesheet
is in an external file that is cached,
rendering is blocked until the browser
loads the stylesheet from disk. In
addition, once the stylesheet is
loaded, the browser's CSS engine has
to evaluate every rule contained in
the file to see if the rule applies to
the current page. Often, many web
sites reuse the same external CSS file
for all of their pages, even if many
of the rules defined in it don't apply
to the current page.

The best way to
minimize the latency caused by
stylesheet loading and rendering time
is to cut down on the CSS footprint;
an obvious way to do this is to remove
or defer CSS rules that aren't
actually used by the current page.

Concerning this:

Due to a claim that "additional lines
of CSS slow down body.onLoads," my
argument to code all background
expectations in the CSS was rejected.

The extra time is in the order of a few milliseconds. Do what is easier and maintainable, not what is more "efficient".

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文