外部样式表与JavaScript添加的样式标记

Question

我有多个可以添加到各种网页的小部件。每个都有自己的样式表：

<link type="text/css" href="http://mySite/widget1.css" />
<script type="text/javascript" src="http://mySite/widget1.js"></script>

样式表特定于每个小部件，非常短（5到10个声明）。

我正在考虑在脚本中动态创建样式表，原因有两个：

• 我觉得维护两个单独的文件很痛苦
• 用一个替换两个http请求应该带来性能改进

像这样，插入widget1.js：

var stylesheet=document.createElement("style");
stylesheet.innerHTML="#slideshow{width:500px;...";
etc...

这有什么问题吗？这对我来说听起来不错，但是当我查看其他示例（如jQuery插件）时，css和js总是在单独的文件中。

Answer 1

这对HTTP请求完全没有帮助。使用JavaScript添加到外部样式表的链接仍然需要HTTP请求来获取它。

使用像YUI Compressor之类的东西将你使用的所有小部件的样式表合并并缩小为单个CSS文件可能会更好。然后将其包含在每个页面中，让浏览器对其进行缓存。

Answer 2

  

用一个替换两个http请求应该带来性能改进

如果您的CSS在自己的文件中，浏览器可以缓存它，从而提高性能。使用JavaScript创建它将最终制作更大的JS文件，并且它（CSS）无法缓存。此外，JavaScript必须生成CSS，从而降低性能。

Answer 3

如果要创建新的样式元素， 为什么不将它的代码放在它影响的js小部件文件中？

Answer 4

我最后的选择是在脚本中创建样式表。

除了减少http请求的数量外，主要的好处实际上是你可以在注入之前调整样式表。这对小部件特别有用，因为您可以在运行时调整类名，颜色或大小。

在更大范围内，这就是像LESS和SASS这样的图书馆正在做的事情。