我的一个朋友说，使用 <div style=""></div> 而不是压缩的 css 文件将 link href 放在 head 部分可以提高性能。这是真的吗？
【问题讨论】：
标签： css performance inline-styles
它可以，但链接或外部样式表的原因是它可以缓存在浏览器中，尤其是当您在网站的多个页面中使用相同的 div 时。这意味着浏览器只需加载一次样式表，而不必在每次浏览器重新加载页面时重新加载代码。它还使代码更简洁，使任何更改或调试变得更容易。
【讨论】：
与使用 CSS 文件的性能提升量（通过其他因素）相比，您朋友提到的性能提升可能太微不足道了。
使用样式属性，浏览器只为特定元素绘制规则，在本例中为<div> 元素。这减少了 CSS 引擎查找与 CSS 选择器匹配的元素（例如 a.hover 或 #someContainer li）的查找时间。
但是，将样式放在元素级别意味着您不能单独缓存 CSS 样式规则。通常将样式放在 CSS 文件中可以完成缓存，从而减少每次加载页面时服务器的负载量。
将样式规则放在元素级别也会使您无法跟踪哪些元素以何种方式设置样式。它也可能会适得其反，因为绘制特定元素可以将多个元素重新绘制在一起，从而提高性能。使用 CSS 文件可以将 CSS 与 HTML 分开，从而确保您的样式正确，并且以后更容易修改。
因此，如果您看一下比较，您会发现使用 CSS 文件比在元素级别设置样式更有好处。
不要忘记，当您有一个外部 CSS 样式表文件时，您的浏览器可以缓存该文件，从而提高您的应用程序效率！
【讨论】：
事实是“是”
有很大的不同。特别是当您自动化用户界面时。 试试下面的代码。我用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>
【讨论】：
这不是一个容易回答的问题，因为这种情况下的性能取决于许多因素（CSS 选择器的复杂性、文档大小等）。但是，如果我们举一个孤立的例子，那么我们可以看到 CSS 类通常比内联样式快：
Inline style vs CSS class
【讨论】：
使用外部样式表绝对是更好的选择，因为它可以帮助您记住您在 div(s) 上应用的样式。它减少了加载页面的时间，因为 HTML 代码越少加载速度越快。
但在某些情况下，您可能需要更改特定 div 的某些属性，那么内联样式是最佳选择。说真的，一两个内联样式不会对页面加载时间产生任何影响。
还有另一种内部样式表选项，但它仅在您有一个单页网站时使用，例如您正在制作模板。这是因为你必须在每个 HTML 页面中编写 CSS
【讨论】：
如果您使用内联样式而不是样式表，页面加载速度会更快。在某些情况下必须更快。
当您使用带有 href 的样式表时，它需要向服务器发出另一个请求，然后在响应后解析文件。使用内联样式就没有这些，只是直接解析。
如果客户端的互联网速度很慢，那么单个请求可能会很慢，从而导致页面样式较少，直到样式表交付为止。同样，如果它是内联的，就不会有任何延迟。
我们使用样式表的唯一原因是有条理。有时不需要它们，因此内联样式或文档内样式表就足够了。
【讨论】：
我更喜欢使用内联 CSS 而不是外部 CSS，其中每个其他元素或图像都有多个小 CSS 文件。下载几个只有 5-10 行代码的 CSS 文件是没有意义的。 如果您的元素包含悬停、活动、选中等属性，那么您应该使用外部 CSS 文件，因为它会避免使您的开发过程复杂化。
【讨论】：
在我看来没有固定的答案。
inline CSS 的加载速度会更快如果 CSS 内容大小的下载速度快于您的服务器响应 external CSS file 请求的速度（考虑 DNS 时间、服务器延迟等）。
对于正常大小的 CSS，我会将它们内联在页面中，对于超过 15-20KB 的内容，我可能会将其放在外部文件中并确保它可以被缓存。
我确信我现在还遗漏了许多其他注意事项，但对于内联与外联没有固定的答案。
【讨论】：
当然可以，因为没有服务器请求，css 会与 html 一起加载和呈现，从而更快。
但我建议使用内部 css 而不是内联 css，使用 <head> 标记内的 <style> 以及显示主页所需的核心样式，然后加载外部 CSS 文件
【讨论】：