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

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

<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始终处于单独的文件中。

2012-02-15 Christophe

请注意，您仍然有两个请求，因为当您将该链接元素添加到DOM时，它会去请求它。如果你只有5-10个声明，也许你可以直接做它们，而不用担心样式表。 – 2012-02-15 21:06:04

@BrianGlaz抱歉，我立即意识到我的例子都是错的，并纠正了这个问题。 – Christophe 2012-02-15 21:08:46

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

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

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

2013-03-30 18:58:06 Christophe

这对HTTP请求根本无济于事。使用JavaScript向外部样式表添加链接仍然需要HTTP请求来获取它。

您可能会更喜欢使用类似YUI Compressor的东西来合并和缩小所用的所有窗口小部件的样式表到一个CSS文件中。然后将其包含在每个页面中并让浏览器缓存它。

2012-02-15 21:05:28 Quentin

对不起，我立即意识到我的例子都是错的，并纠正了这个问题。 – Christophe 2012-02-15 21:07:20

更换两次与一个HTTP请求应该带来性能的提升

如果你有你的CSS在自己的文件，浏览器可以缓存它，从而提高了性能。使用JavaScript创建它会导致制作一个更大的JS文件，并且它（CSS）不能被缓存。而且，JavaScript将不得不生成CSS，从而降低性能。

2012-02-15 21:05:59

即使有缓存，也会有一个http请求，对吧？由于样式表的大小，我更担心HTTP请求浪费的时间比加载时间浪费的多。 – Christophe 2012-02-15 21:21:30

很确定它是否被缓存，没有HTTP请求，或只是获取标题，而不是数据。除非你的服务器响应速度很慢，否则“浪费时间”不会成为问题。 – 2012-02-15 21:49:44

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

2012-02-15 21:34:52 kennebec

是的，就是这个想法（在问题中很少解释......）。创建样式元素的代码将进入widget1.js。我纠正了这个帖子。 – Christophe 2012-02-15 22:08:18

回答