外部CSS与内联样式的性能差异？

Question

我的一个朋友说，使用开头部分<div style=""></div>代替压缩的css文件可以link href提高性能。真的吗？

Answer 1

与使用CSS文件的性能提升（通过其他因素）相比，您的朋友提到的性能提升可能微不足道。

浏览器使用style属性，仅绘制该特定元素的规则，在这种情况下为<div>元素。这样可以减少CSS引擎查找哪些元素与CSS选择器匹配的查找时间（例如a.hover或#someContainer li）。

但是，将样式置于元素级别将意味着您无法单独缓存CSS样式规则。通常，将样式放在CSS文件中将允许进行缓存，从而减少每次加载页面时服务器的负载量。

将样式规则放在元素级别还会使您无法跟踪以什么方式对哪些元素进行样式设置。这也可能会抵消绘画特定元素的性能提升，您可以在其中一起重新绘画多个元素。使用CSS文件可将CSS与HTML分开，从而使您可以确保样式正确，以后更容易修改。

因此，如果您看一下比较，您会发现使用CSS文件比在元素级别进行样式设计具有更多好处。

不要忘记拥有外部CSS样式表文件时，浏览器可以缓存该文件，从而提高了应用程序的效率！