smoothState.js

Question

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

问题是新的内容是'unstyled'（更准确的说是和上一页的样式一致）。由于我非常关注该站点的性能，因此我希望有一种方法可以避免组合样式表。

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

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

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

Can anyone suggest which of the three methods provided would have the least impact on the page-load of my pages, or suggest another method of tackling the problem?

您还可以在目标页面的 'div#main' 中包含新的样式表引用。当您注入新的 html 时，浏览器将理解并执行任何新引入的 <link rel="stylesheet" href="" />。

不过，我个人还是更喜欢连接所有 CSS 文件。

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

smoothState.js - Different stylesheets on different pages?

javascript

css

jquery