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

External CSS vs inline style performance difference?

提问by George

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

我的一个朋友说，使用<div style=""></div>放在link hrefhead 部分而不是压缩的 css 文件可以提高一些性能。真的吗？

采纳答案by mauris

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.

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

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.hoveror #someContainer li).

使用 style 属性，浏览器只为该特定元素绘制规则，在这种情况下是<div>元素。这减少了 CSS 引擎查找与 CSS 选择器匹配的元素（例如a.hover或#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.

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

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 文件将 CSS 与 HTML 分开，从而允许您确保样式正确并且以后更容易修改。

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 样式表文件时，您的浏览器可以缓存该文件，从而提高您的应用程序效率！

回答by sebjwallace

The page will load faster if you use inline styles vs style sheets. In some cases must faster.

如果您使用内联样式与样式表，页面加载速度会更快。在某些情况下必须更快。

When you use a style sheet using href it requires another request to the server, then the parsing of the file after response. With inline styles there is none of that, just direct parsing.

当您使用 href 使用样式表时，它需要向服务器发出另一个请求，然后在响应后解析文件。内联样式没有这些，只是直接解析。

If a client has slow internet then that single request could be very slow leaving the page style-less until the style sheet get delivered. Again, if it were inline there would be no delay at all.

如果客户端的 Internet 速度很慢，那么该单个请求可能会非常慢，直到样式表被交付时，页面才会变得没有样式。同样，如果它是内联的，则根本不会有延迟。

The only reason we use style sheets is to be organised. There are times when they are not needed, so inline styles or in-document style sheets suffice.

我们使用样式表的唯一原因是有条理。有时不需要它们，因此内联样式或文档内样式表就足够了。

回答by s.ermakovich

It's not an easy question to answer, because the perfomance in this case depends on many factors (complexity of CSS selectors, document size, etc.). However, if we take an isolated case, then we can see that CSS class is in general faster than inline style:
Inline style vs CSS class

这不是一个容易回答的问题，因为这种情况下的性能取决于许多因素（CSS 选择器的复杂性、文档大小等）。然而，如果我们采取一个孤立的案例，那么我们可以看到 CSS 类通常比内联样式更快：
内联样式 vs CSS 类

回答by eciusr

Well it can but the reason for the linked or external style sheet is so it can be cached in the browser especially when your using the same div in multiple pages for the site. This means the browser only has to load the style sheet once instead of having to reload the code every time the browser reloads page. It also makes for cleaner code which makes any changes or debugging easier.

嗯，它可以，但链接或外部样式表的原因是它可以缓存在浏览器中，尤其是当您在站点的多个页面中使用相同的 div 时。这意味着浏览器只需加载一次样式表，而不必每次浏览器重新加载页面时都重新加载代码。它还使代码更清晰，使任何更改或调试更容易。

回答by Don

THE TRUTH IS 'YES'

事实是“是的”

There is a huge difference. Especially when you are automating user interface. Try the following code. I use IE10 and notepad to develop. I am learning as I go and make tests this is a shortened version test. (there maybe errors as I reduced the code to show your answer)

这是个很大的差异。特别是当您自动化用户界面时。试试下面的代码。我使用IE10和记事本开发。我一边学习一边进行测试，这是一个缩短的版本测试。（可能会出现错误，因为我减少了代码以显示您的答案）

Click on the image you reference and read the alert messages. HINT: Save this file the save again as an edit before editing (testing).

单击您引用的图像并阅读警报消息。提示：在编辑（测试）之前再次保存此文件作为编辑。

Best wishes, Don

最好的祝福，唐

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>

回答by adrianTNT

There is no fixed answer in my opinion.

在我看来没有固定的答案。

An inline CSSwill load faster ifthe CSS content size downloads faster than your server would respond to an external CSS filerequest (considering DNS time, server latency, etc).

一个inline CSS将载入速度，如果在CSS内容大小比下载服务器更快地将一个响应external CSS file请求（DNS考虑时间，服务器延迟等）。

For normal size CSS I would inline them in the page, for something over 15-20KB I would probably put it in an external file and make sure it can be cached.

对于正常大小的 CSS，我会将它们内联到页面中，对于超过 15-20KB 的内容，我可能会将它放在一个外部文件中并确保它可以被缓存。

I am sure there are many other considerations I am missing now, but there is no fixed answer for inline vs external.

我确信我现在还缺少许多其他考虑因素，但是内联与外部没有固定的答案。

回答by vicky

Using external style sheets is definitely a better option because it will help you to remember the style you have applied on the div(s). It reduces the time of loading the page because the lesser the HTML code the faster it will load.

使用外部样式表绝对是一个更好的选择，因为它可以帮助您记住已应用于 div 的样式。它减少了加载页面的时间，因为 HTML 代码越少，加载速度就越快。

But in some cases you might have to change some property of a particular div then the inline style is the best option. And truly speaking, one or two inline style won't make any change the time of loading the page.

但在某些情况下，您可能需要更改特定 div 的某些属性，那么内联样式是最佳选择。说真的，一两个内联样式不会对加载页面的时间产生任何影响。

There is another option of internal style sheet but it is used only when you have a single page website like if you are making a template. This is because you have to write CSS in every HTML page

内部样式表还有另一种选择，但仅当您拥有单页网站（例如制作模板）时才使用它。这是因为您必须在每个 HTML 页面中编写 CSS

回答by atuls1396

I prefer using inline CSS over external CSS where there are multiple small CSS files for every other element or image. No point in downloading several CSS files with merely 5-10 lines of code in each. If your element contains properties such as hover, active, checked etc. you're then supposed to use an external CSS file as it will avoid complicating your development process.

我更喜欢使用内联 CSS 而不是外部 CSS，其中每个其他元素或图像都有多个小的 CSS 文件。下载多个仅包含 5-10 行代码的 CSS 文件毫无意义。如果您的元素包含诸如悬停、活动、选中等属性，那么您应该使用外部 CSS 文件，因为它可以避免使您的开发过程复杂化。