Question

我目前正在尝试在我的网站上实现smoothState.js。但是，我在页面之间转换时遇到了问题。

问题在于新内容没有问题＆＃39; （更准确地说，它的样式与上一页的样式相同）。由于我已经非常关注这个网站的性能，我更喜欢有一种方法可以避免组合样式表。

我已经考虑过如何解决这个问题，但无法确定哪个解决方案对性能影响最小。这些是我能想到的可能的解决方案。

1。合并样式表
尽管我不愿意这样做，但这可能是最好的方式。毕竟，它只是几个额外的字节，对吧？毕竟，样式表（缩小和压缩）非常小。

2。添加javascript函数到正文
对于smoothState，我目前正在使用body作为容器。我想我可以这样，例如，在body标签后直接添加以下javascript。

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);

（我必须修改上面的内容，因为在使用smoothState更改页面时，document.load并没有运行。可悲的是，我在vanilla JS上非常糟糕。但我想我可以搞清楚..不是一个大问题:)）

第3。在smoothstate（）的onStart.render（）中做一些javascript魔术第三，最后，我意识到运行一些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文件。

smoothState.js - 不同页面上的不同样式表？

1 个答案: