外部CSS vs内联风格的性能差异？
我的一个朋友说，使用<div style=""></div>而不是压缩的CSS文件作为link href在头部分提供了一些性能提升。 真的吗？
与使用CSS文件提高性能（通过其他因素）相比，您的朋友提到的性能提升可能太微不足道了。
使用style属性，浏览器只绘制该特定元素的规则，在这种情况下是<div>元素。 这减less了CSS引擎查找哪些元素匹配CSSselect器（例如a.hover或#someContainer li ）的查找时间。
但是，在元素级别放置样式意味着您不能单独cachingCSS样式规则。 通常在CSS文件中放置样式将允许caching完成，从而减less每次加载页面时来自服务器的加载量。
在元素级别添加样式规则也会使您忘记以什么方式对元素进行了样式化。 这也可能会反过来画一个特定的元素，你可以在一起重绘多个元素的性能提升。 使用CSS文件可以将CSS从HTML中分离出来，从而可以确保您的样式是正确的，并且稍后可以轻松修改。
因此，如果你看看比较，你会发现使用CSS文件比元素级别的样式有更多的好处。
不要忘记，当你有一个外部的CSS样式表文件，您的浏览器可以caching文件，从而提高您的应用程序效率！
那么它可以但链接或外部样式表的原因是它可以caching在浏览器中，特别是当您在网站的多个页面使用相同的div时。 这意味着浏览器只需加载一次样式表，而不必在每次浏览器重新加载页面时重新加载代码。 它也使更简洁的代码，使任何更改或debugging更容易。
真理是'是'
有一个巨大的差异。 特别是当你自动化用户界面时。 尝试下面的代码。 我使用IE10和记事本来开发。 我正在学习，并且进行testing，这是一个缩短的版本testing。 （可能有错误，因为我减less了代码来显示你的答案）
点击您引用的图片，然后阅读警报消息。 提示：在编辑（testing）之前，再次将此文件保存为编辑。
祝好，唐
<!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>
这不是一个容易回答的问题，因为这种情况下的性能取决于许多因素（CSSselect器的复杂性，文档大小等）。 但是，如果我们采取一个孤立的情况，那么我们可以看到CSS类通常比内联风格更快：
内联样式与CSS类
如果使用内联样式和样式表，页面加载速度会更快。 在某些情况下，必须更快。
当您使用href使用样式表时，它需要向服务器发送另一个请求，然后在响应之后parsing文件。 内联样式没有这个，只是直接parsing。
如果一个客户端的networking速度很慢，那么这个单一的请求可能会非常缓慢，直到样式表被传送出去，页面的样式就会减less。 再说一遍，如果是内联的话，就不会有任何延迟。
我们使用样式表的唯一原因是组织。 有时候不需要它们，所以内联样式或文档样式表就足够了。
使用外部样式表绝对是一个更好的select，因为它会帮助您记住您在div上应用的样式。 它减less了加载页面的时间，因为HTML代码越小，加载的速度越快。
但在某些情况下，您可能需要更改某个div的某些属性，那么内联样式是最好的select。 实际上，一个或两个内联样式在加载页面的时候不会有任何改变。
内部样式表还有另一种select，但只有当您有单个页面网站时才使用它，例如制作模板。 这是因为你必须在每个HTML页面上写CSS
如果您正在编写JS，则在JS解决scheme中使用CSSbuild议将CSS规则放入JS代码而不是DOM.style中。
这个lib被推荐： https ： //github.com/cssobj/cssobj
它是从JS创buildCSS规则和实时更新。
