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

Answer 2

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

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

如果客户端的互联网速度较慢，那么单个请求可能会非常缓慢，在样式表交付之前会使页面样式更少。同样，如果它是内联的，那么根本就没有延迟。

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

Answer 3

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

Answer 4

真相是'是'

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

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

祝福，唐

<!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>

Answer 5

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

Answer 6

我认为没有固定答案。

如果{} CSS内容的下载速度比服务器对inline CSS的响应速度（考虑DNS时间，服务器延迟等）的下载速度快，则external CSS file的加载速度会更快。

对于普通大小的CSS，我会在页面中内联它们，对于15-20KB以上的内容，我可能会将其放在外部文件中，并确保可以对其进行缓存。

我确定我现在还缺少许多其他注意事项，但是对于内联还是外部，没有固定的答案。

Answer 7

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

但在某些情况下，您可能需要更改特定div的某些属性，然后内联样式是最佳选项。实际上，一个或两个内联样式不会对加载页面的时间做任何改变。

内部样式表有另一种选择，但只有当您拥有单个页面网站时才会使用它，就像您正在制作模板一样。这是因为你必须在每个HTML页面中编写CSS

Answer 8

相对于外部CSS，我更喜欢使用内联CSS，因为外部CSS中每个其他元素或图像都有多个小型CSS文件。下载几个CSS文件，每个文件只有5-10行代码，这毫无意义。如果您的元素包含悬停，活动，选中等属性，则应使用外部CSS文件，因为它将避免使开发过程复杂化。

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

8 个答案: