Внешняя таблица стилей против тега, добавленного в JavaScript - PullRequest
Новая
       2

Внешняя таблица стилей против тега, добавленного в JavaScript

2 голосов
/ 16 февраля 2012

У меня есть несколько виджетов, которые можно добавлять на различные веб-страницы.Каждый поставляется со своей собственной таблицей стилей: 

<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 всегда находятся в отдельных файлах.

Ответы [ 4 ]

3 голосов
/ 16 февраля 2012

Это не поможет с запросами HTTP. Добавление ссылки на внешнюю таблицу стилей с помощью JavaScript по-прежнему требует HTTP-запроса для ее получения.

Возможно, было бы лучше использовать что-то вроде YUI Compressor для объединения и минимизации таблиц стилей для всех виджетов, которые вы используете, в один файл CSS. Затем включите его в каждую страницу и позвольте браузерам кэшировать его.

1 голос
/ 16 февраля 2012

замена двух http-запросов одним должна повысить производительность

Если у вас есть CSS в отдельном файле, браузер может его кешировать, что повышает производительность. Создание JavaScript приведет к созданию файла JS большего размера, и его (CSS) нельзя будет кэшировать. Кроме того, JavaScript должен будет генерировать CSS, что снижает производительность.

0 голосов
/ 30 марта 2013

Мой последний выбор заключался в создании таблицы стилей из скрипта.

Помимо сокращения количества http-запросов, главное преимущество в том, что вы можете настроить таблицу стилей перед ее внедрением.Это особенно полезно для виджетов, так как вы можете настроить имя класса, цвет или размер во время выполнения.

В более широком масштабе это то, что делают некоторые библиотеки, такие как LESS и SASS.

0 голосов
/ 16 февраля 2012

Если вы создаете новый элемент стиля, почему бы не поместить его код в файл виджета js, на который он влияет?

...