我的一个朋友说,用<div style=""></div>代替压缩的CSS文件放在头部作为link href可以提高一些性能.这是真的吗?

推荐答案

与使用CSS文件(通过其他因素)的性能提升相比,你朋友提到的性能提升可能太微不足道了.

使用style属性,浏览器仅为该特定元素绘制规则,在本例中为<div>元素.这减少了CSS引擎查找哪些元素与CSS Select 器(例如a.hover#someContainer li)匹配的查找时间.

然而,将样式设置放在元素级别意味着不能单独缓存CSS样式规则.通常,将样式放入CSS文件将允许进行缓存,从而减少每次加载页面时服务器的负载量.

在元素级别设置样式规则也会使您无法了解哪些元素是以何种方式设置样式的.这也可能会适得其反,因为在绘制特定元素时,可以将多个元素重新绘制在一起.使用CSS文件将CSS从HTML中分离出来,这样可以确保样式正确,以后更容易修改.

因此,如果您查看比较,您会发现使用CSS文件比在元素级别设置样式有更多的好处.

不要忘记,当你有一个外部CSS样式表文件时,你的浏览器可以缓存该文件,从而提高你的应用程序效率!

Css相关问答推荐

当父母滚动时,让子元素变得粘稠

关于React.js的CSS Select 器

如何使一组元素的行为像字符串一样?

主dart 文件未加载Flutter Web

如何将bslib::card()中的扩展按钮移到右上方,其中full_screen = TRUE?

以百分比形式输入的css宽度属性不会生效

如何定位此下拉框的下拉面板

具有不同边框宽度和 colored颜色 的边框半径,Safari渲染问题

如何使TWebPanel具有圆角?

ReactJS 连续循环动画滚动

CSS 布局:使一列依赖于另一列

为什么我的 CSS 转换在 React 18 中不起作用

Flex & space-around 与内容相交

带填充的水平边框

CSS3 - RotateY() 居中

使用 CSS 无限期地闪烁两个不同持续时间的文本

如何始终在浏览器中显示垂直滚动条?

CSS媒体查询仅针对iPad和iPad?

在渲染网页之前等待字体加载

使图像具有响应性 - 最简单的方法