Question

我正在使用turbolink来模拟“单页”应用。一旦页面被缓存，应用程序就会非常快，但是第一次点击太慢了。有没有办法通过在后台加载一些页面来预填充过渡缓存？

我将调查黑客攻击页面缓存，但想知道是否有人之前已经这样做了。

（如果这看起来很不寻常，那么，请相信我这样做是有充分理由的.Turbolinks几乎可以实现更复杂的实现，总体来说我很满意。）

更新：所以看起来这应该是相对简单的，只需在Turbolinks的pageCache中添加条目，例如：

$.ajax({
  url: url,
  dataType: 'html',
  success: function(data) {
    var dom = $(data);
    Turbolinks.pageCache[url] = {
      ...
    }
  }
});

然而，似乎不可能在javascript中构造一个body元素，这是必需的。如果不这样做，似乎我不能构建存储在缓存中的对象，而不是浏览器首先渲染它。

除了黑客攻击Turbolinks之外的任何想法？

更新2：还有一个问题是pageCache被一个闭包隐藏了，因此需要破解Turbolinks。我有一个我正在测试利用iFrames的解决方案 - 似乎正在运作。

Answer 1

First Hack Turbolinks允许访问pageCache，turbolinks.js.coffee的结尾应该是这样的。

@Turbolinks = {
  visit,
  pagesCached,
  pageCache,
  enableTransitionCache,
  enableProgressBar,
  allowLinkExtensions: Link.allowExtensions,
  supported: browserSupportsTurbolinks,
  EVENTS: clone(EVENTS)
}

然后实现一个获取功能。这就是你在想的，我们可以使用DOMParser将字符串转换为DOM对象。

function preFetch(url) {
        $.ajax({
            url: url,
            dataType: 'html'
        }).done(function(data) {
            var key = App.Helper.getCurrentDomain() + url;
            var parser = new DOMParser();
            var doc = parser.parseFromString(data, "text/html");
            Turbolinks.pageCache[key] = {
                url: url,
                body: doc.body,
                title: doc.title,
                positionY: window.pageYOffset,
                positionX: window.pageXOffset,
                cachedAt: new Date().getTime(),
                transitionCacheDisabled: doc.querySelector('[data-no-transition-cache]') != null
            };
        });
    };

用法：

$(function() {
    preFetch('/link1'); // fetch link1 into transition cache
    preFetch('/link2'); // fetch link2 into transition cache
});

将页面预加载到turbolinks转换缓存中

1 个答案: