101

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

4

9 回答 9

107

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

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

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

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

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

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

于 2011-11-27T08:20:34.107 回答
7

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

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

如果客户端的互联网速度很慢，那么单个请求可能会非常慢，从而使页面样式减少，直到样式表交付为止。同样，如果它是内联的，则根本不会有任何延迟。

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

于 2016-04-12T15:47:50.993 回答
5

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

于 2013-09-30T10:46:13.483 回答
3

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

于 2011-11-27T08:16:33.730 回答
2

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

如果CSS 内容大小的下载速度快于服务器响应请求的速度（考虑 DNS 时间、服务器延迟等），则inline CSS加载速度会更快。external CSS file

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

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

于 2020-02-23T23:11:56.700 回答
1

事实是“是”

这是个很大的差异。特别是当您自动化用户界面时。试试下面的代码。我用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>
于 2013-08-20T22:18:47.270 回答
0

肯定是的，因为没有服务器请求，所以 css 会与 html 一起加载和呈现，从而使其更快。

但我建议使用内部 css 而不是内联 css，使用<style>内部<head>标签以及显示主页所需的核心样式，然后加载外部 CSS 文件

于 2021-10-29T20:16:35.313 回答
-1

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

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

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

于 2013-10-24T12:59:41.450 回答
-2

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

于 2018-10-12T10:05:38.887 回答