外部样式表与 JavaScript 添加样式标签答案

【问题标题】：External stylesheet vs. JavaScript-added style tag外部样式表与 JavaScript 添加样式标签
【发布时间】：2012-03-07 06:19:41
【问题描述】：

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

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

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

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

类似这样的东西，插入到widget1.js中：

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

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

【问题讨论】：

【解决方案1】：

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

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

在更大的范围内，这就是 LESS 和 SASS 等一些库正在做的事情。

【讨论】：

【解决方案2】：

如果你正在创建一个新的样式元素，为什么不把它的代码放在它影响的 js 小部件文件中呢？

【讨论】：

【解决方案3】：

用一个替换两个 http 请求应该会带来性能提升

如果您的 CSS 在自己的文件中，浏览器可以缓存它，从而提高性能。让 JavaScript 创建它最终会生成一个更大的 JS 文件，并且它（CSS）不能被缓存。此外，JavaScript 必须生成 CSS，从而降低性能。

【讨论】：

【解决方案4】：

这对 HTTP 请求毫无帮助。使用 JavaScript 添加指向外部样式表的链接仍然需要 HTTP 请求来获取它。

您最好使用YUI Compressor 之类的东西将您使用的所有小部件的样式表合并和缩小到一个 CSS 文件中。然后将其包含在每个页面中，并让浏览器缓存它。

【讨论】：