外部 CSS 与内联样式的性能差异? [英] External CSS vs inline style performance difference?

问题描述

我的一个朋友说使用<div style=""></div>代替压缩的css文件放在link href开头部分提供了一些性能提升.是真的吗?

解决方案

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

使用 style 属性，浏览器只为该特定元素绘制规则，在本例中为

元素.这减少了 CSS 引擎查找与 CSS 选择器匹配的元素(例如 a.hover 或 #someContainer li)的查找时间.

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

将样式规则放在元素级别也会让您无法跟踪哪些元素以何种方式设置样式.它也可能会适得其反，因为您可以在其中重新绘制多个元素一起绘制特定元素的性能提升.使用 CSS 文件将 CSS 与 HTML 分开，从而确保您的样式正确并且以后更容易修改.

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

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

A friend of mine said that using <div style=""></div> instead of compressed css file put as link href at the head section gives some performance boost. Is that true?

解决方案

The performance boost that your friend mentioned is probably too trivial compared to the amount of performance boost (through other factors) using a CSS file.

Using the style attribute, the browser only paints the rule for that particular element, which in this case is the <div> element. This reduces the amount of look up time for the CSS engine to find which elements match the CSS selector (e.g. a.hover or #someContainer li).

However, putting styling at element level would mean that you cannot cache the CSS style rules separately. Usually putting styles in CSS files would allow the caching to be done, thus reducing the amount of load from the server each time you load a page.

Putting style rules at the element level will also make you lose track of what elements are styled what way. It might also backfire the performance boost of painting a particular element where you can repaint multiple elements together. Using CSS files separates the CSS from HTML, and thus allows you to make sure that your styles are correct and it's easier to modify later on.

Therefore if you look at the comparison, you would see that using a CSS file has much more benefit than styling at element level.

Not to forget when you have an external CSS stylesheet file, your browser can cache the file which increases your application efficiency!

这篇关于外部 CSS 与内联样式的性能差异?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！