Css性能！更多重复或独特

哪个更快更优化？

哪个更适合浏览器和流量？

未来的任何变化。

* 1。

.class1,.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:34%; 
float:right 
} 
.class2{ 
width:44%; 
float:left 
}

.class1{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:34%; 
float:right 
} 
.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
width:44%; 
float:left 
}

* 3。

.class1,.class2{ 
line-height:40px; 
text-align:left; 
margin-left:4%; 
} 
.class1{ 
width:34%; 
float:right; 
} 
.class2{ 
width:44%; 
float:left; 
}

* @connexo建议的新更新。

Sepas为您的时间！

来源

2017-03-04 Amin Maleki

在你的第一个规则块中，你有两个'width'声明。 – connexo

这是我该怎么做。将所有属性都分成一个块，然后定义偏差属性。

.class1, 
.class2 { 
    line-height: 40px; 
    margin-left: 4%; 
    text-align: left; 
} 
.class1 { 
    float: right; 
    width: 34%; 
} 
.class2 { 
    float: left; 
    width: 44%; 
}

除了我建议的声明书按字母顺序排序，并在一个块中的最后声明之后不要省略分号，结构性的东西。

来源

2017-03-04 20:55:16 connexo

你说的对分号。我从来没有想过你的模型，因为我认为这不是迷你！但我选择，如果执行浏览器。 –

针对别人不要贬低，但我们有Gzip！所以最佳答案是3. –

我不确定问题是否正确。在CSS的情况下，我会问维护它有多容易。当您在较大的网站上工作时，更新1个样式声明比更新10个声明更好。如果你确定class1和class2的行为总是相同的话，我会用第一个例子。查找究竟需要更新的内容会更容易。

这两个例子都不会对性能产生任何显着影响，而且它们与SEO（据我所知）无关。

我希望这回答这个问题...

来源

2017-03-04 20:32:59 Kate

然后我会和第一个例子一起去。这真的很容易。在处理网站上每个容器的大量样式时，要找到需要更新的正确部分是非常困难的。像这样分组肯定有帮助。 – Kate

如果开发人员很重要，那么现在流量和浏览器都很重要。 –

有几件事情你应该注意：

1.使用速记
这将减少不必要的使用空间。 - >优化交通

2.缩减大小代码
同为1

3.分割你的CSS - 代码（临界首屏CSS）
这是一个非常有效的方式来优化您的页面速度。您可以将代码放在用户可以在页面顶部看到的第一个视图中，其余的在底部。然后浏览器可以呈现页面，而不需要完全下载页面。

4.使用内联CSS
这不是beautifulest解决方案，但它会影响性能。但是不要将所有的CSS内联编写，只有一些小部分。

来源

2017-03-04 21:13:42

我与前3个选项一起工作。他们是关于流量，但浏览器？你知道4是怀旧。 –

3加速您的页面（为了您的JavaScript不会阻止进程）。对于用户来说，网页的响应速度更快。而且4也可以提供帮助。它可以减少你的CSS，因为你直接将它应用到元素。但你是对的，效果不是极端的。 –

Css性能！更多重复或独特

回答

相关问题