代码之家 › 专栏 › 技术社区 › Cannon Moyer

延迟CSS的技巧

css html

Cannon Moyer · 技术社区 · 6 年前

例如:

<head>
     <style>
         .red{color: red;}
         .yellow{color: yellow;}
     </style>
</head>

我的CSS表:

.red{color: red;}
.yellow{color: yellow;}
.black{color:black;}
.orange{color:orange}
.green{color:green}

那么,我应该删除吗 .red 和 .yellow 从我的CSS表中的类?我最初认为是的,但我在主工作表中遇到了一些重写问题,我想知道这是否是删除它们的标准技术。

提前谢谢。

2 回复 | 直到 6 年前

YOU 6 年前

保持 .red{color: red;} .yellow{color: yellow;} 它们在样式表中,但也包括在 <head> 所以浏览器不会等待样式表使用中的代码加载和呈现元素 < 部分。如果这些规则没有在其他页面中使用,则可以删除它们以保存文件大小。

基本上最关键的CSS是尽快呈现在折叠内容之上,所以如果你提前提供样式,那就更好了。

如果CSS的文件大小小于20kb,则应该内联所有CSS规则。

-1

Siavas 6 年前

在获取样式表之前,大多数浏览器都不会显示页面,因此将一部分移动到另一部分 style 标签将做更多的坏事比好事,因为现在将有两个地方的造型必须保持。 This post

但问题是,这是否是您必须考虑的一个非常关键的性能考虑因素?样式表往往有几十KB,而现在的带宽需要几毫秒才能下载。如果这对你来说同样重要,那么你可以从上面链接的帖子中获益,因为你的方法会导致不同浏览器的结果。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

7 月前