我的一个朋友说，使用开头部分<div style=""></div>代替压缩的css文件可以link href提高性能。真的吗？
Answers:
与使用CSS文件的性能提升（通过其他因素）相比，您的朋友提到的性能提升可能微不足道。
使用style属性，浏览器仅绘制该特定元素的规则，在这种情况下为<div>元素。这样可以减少CSS引擎查找哪些元素与CSS选择器匹配的查找时间（例如a.hover或#someContainer li）。
但是，将样式置于元素级别将意味着您无法单独缓存CSS样式规则。通常，将样式放在CSS文件中将允许完成缓存，从而减少每次加载页面时服务器的负载量。
将样式规则放在元素级别也将使您失去对以哪种方式设置样式的元素的跟踪。这也可能会抵消绘画特定元素的性能提升，您可以在其中一起重新绘画多个元素。使用CSS文件可将CSS与HTML分开，从而使您可以确保样式正确，以后更容易修改。
因此，如果您看一下比较，您会发现使用CSS文件比在元素级别进行样式设计具有更多好处。
别忘了当您有一个外部CSS样式表文件时，您的浏览器可以缓存该文件，从而提高了应用程序的效率！
如果使用内联样式与样式表，则页面加载速度更快。在某些情况下必须更快。
当您使用带有href的样式表时，它需要对服务器的另一个请求，然后在响应后解析文件。对于内联样式，没有任何东西，只有直接解析。
如果客户的互联网速度较慢，则该单个请求可能会非常缓慢，从而使页面没有样式，直到交付样式表为止。同样，如果是内联的，则根本不会有延迟。
我们使用样式表的唯一原因是要有条理。有时不需要它们，因此内联样式或文档内样式表就足够了。
这不是一个容易回答的问题，因为这种情况下的性能取决于许多因素（CSS选择器的复杂性，文档大小等）。但是，如果采取孤立的案例，那么我们可以看到CSS类通常比内联样式快：
内联样式与CSS类
可以，但是链接或外部样式表的原因是它可以在浏览器中缓存，尤其是当您在网站的多个页面中使用相同的div时。这意味着浏览器只需要加载一次样式表，而不必每次浏览器重新加载页面时都重新加载代码。它还使代码更整洁，从而使更改或调试变得更加容易。
真相是“是”
这是个很大的差异。尤其是在自动化用户界面时。请尝试以下代码。我使用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，在外部CSS中，每个其他元素或图像都有多个小型CSS文件。下载几个CSS文件，每个文件只有5-10行，毫无意义。如果您的元素包含悬停，活动，选中等属性，则应使用外部CSS文件，因为它将避免使开发过程复杂化。