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

问题描述

我的一个朋友说使用< div style =>< / div> 而不是压缩css文件放为链接href 在头部提供了一些性能提升。是真的吗？

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.

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

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).

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

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.

将样式规则放在元素级别也将使你失去跟踪哪些元素被风格化什么方式。它也可能会回暖绘制一个特定元素的性能提升，您可以在其中重新绘制多个元素在一起。使用CSS文件将CSS与HTML分开，因此可以确保您的样式是正确的，以后可以更容易修改。

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.

因此，如果您查看比较，你会看到使用CSS文件比元素级的样式有更多的好处。

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

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

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

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