javascript - 外部样式表与 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 文件中。然后将它包含在每个页面中，让浏览器缓存它。