smoothState.js - разные таблицы стилей на разных страницах?

Question

В настоящее время я пытаюсь реализовать smoothState.js на моем сайте. Я, однако, столкнулся с проблемой при переходе между страницами.

Проблема в том, что новый контент "не имеет стиля" (точнее говоря, он стилизован под стили предыдущей страницы). Поскольку я сосредоточился на производительности для этого сайта, я бы предпочел, если бы я мог избежать объединения таблиц стилей.

Я немного подумал о том, как решить эту проблему, но не могу решить, какое из решений окажет наименьшее влияние на производительность. Это возможные решения, о которых я мог подумать.

1. Объедините таблицы стилей
Несмотря на то, что я не хочу этого делать, это может быть лучшим способом. В конце концов, это всего лишь несколько дополнительных байтов, верно? В конце концов, таблицы стилей (минимизированные и сжатые) довольно маленькие.

2. Добавьте функцию javascript в тело
Для smoothState я в настоящее время использую тело в качестве контейнера. Я думаю, что я мог бы, например, добавить следующий javascript непосредственно после тега body.

var cb = function() {
  var l = document.createElement('link'); l.rel = 'stylesheet';
  l.href = 'css/single.css';
  var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

(Я должен был бы изменить вышеупомянутое, так как document.load не запускается при смене страниц с smoothState. К сожалению, я довольно ужасен в vanilla JS. Но я думаю, я могу понять это... Не большая проблема:))

3. Сделайте некоторое волшебство javascript в onStart.render() из smoothstate() В-третьих, и наконец, я понимаю, что было бы правдоподобно запустить некоторый javascript для получения таблицы стилей целевой страницы и добавления ее к новой. Мой инстинкт подсказывает мне, что это будет менее эффективно с точки зрения производительности, чем просто объединение таблиц стилей...

В случае, если это поможет, я включу мою функцию smoothState ниже.

 'use strict';
  var $body = $('html, body'),
  content = $('#main').smoothState({
    prefetch: true,
    pageCacheSize: 4,
    development: true,
    onStart: {
      duration: 250,
      render: function (url, $container) {
          // #3 would be implemented here.
          content.toggleAnimationClass('is-exiting');
          $body.animate({
            scrollTop: 0
          });
        }
      },
      onProgress : {
        duration: 0,
        render: function (url, $container) {
          $body.css('cursor', 'wait');
          $body.find('a').css('cursor', 'wait');
        }
      },
      onEnd: {
        duration: 250, // Duration of our animation
        render: function (url, $container, $content) {
          $body.css('cursor', 'auto');
          $body.find('a').css('cursor', 'auto');
          $container.html($content);
        }
      }
    }).data('smoothState');
})(jQuery);

Кто-нибудь может предложить, какой из трех предоставленных методов будет иметь наименьшее влияние на загрузку страниц моих страниц, или предложить другой метод решения проблемы?

ОБНОВЛЕНИЕ 28/04/15 Я решил просто пойти с методом № 1 и объединил таблицы стилей.

Answer 1

Кто-нибудь может предложить, какой из трех предоставленных методов будет иметь наименьшее влияние на загрузку страниц моих страниц, или предложить другой метод решения проблемы?

Вы также можете включить новые ссылки на таблицы стилей внутри div#main целевой страницы. Когда вы вводите новый HTML, браузер будет понимать и выполнять любые новые <link rel="stylesheet" href="" /> вводится.

Я лично все же предпочел бы объединить все файлы CSS, хотя.