Question

我正在创建一个从服务器请求大量内容的应用。我在每个阶段，AJAX请求，DOM注入和渲染中，通过点击在整个应用程序中安装计时器。我发现这些请求完全不可预测，平均而言我记录下它们占据了点击渲染管道的43％。

我想最小化这些优化UX的请求，我的解决方案是使用JS变量创建一个哈希表。我也尝试过以同样的方式使用localStorage。

 MyRequest.prototype.sync = function(r) {

    if (this.storage[r.path]) {
        return this.storage[r.path];
    } else {

        this.req = new XMLHttpRequest();
        this.req.open('GET', r.path, false);
        this.req.send(null);

        if (this.req.status === 200) {  
           this.storage[r.path] = this.req.responseText;
           return this.req.responseText;  
        } else {
           return null;
        }
    }
};

我想到的其他解决方案是将内容保留在DOM树中，因为DOM元素从视口或显示中移除：none不会影响渲染树。并在需要时从DOM中获取内容。

**预取内容的最佳做法是什么，最好是在最终请求的html页面的初始HTTP请求中？这种方法是一个不错的解决方案吗？

Answer 1

如果你能做到这一点，你将获得数百万美元：）

预取是指在用户知道（或表示）他想要它之前获取内容。

有几种策略：

使用原始请求加载内容

假设加载的第一页有6个按钮。如果用户很可能会点击button1和button3，那么立即发送这些页面可能是值得的。

缺点是您的初始结果会很大，因此下载和处理时间会更长。

在后台获取网页

如果您处于'漏斗'状态，用户可能会点击下一页的“下一步”，请在后台加载该页面。当用户点击下一页时，页面已经存在。

不要卸载任何东西

如果您处于用户经常在多个页面之间来回切换的情况，请不要卸载页面。将数据保存在内存中，甚至是DOM中的整个HTML结构（display:none等）。

根据需要获取网页

这是你的“后备”，也可能是你目前正在使用的内容。

正确预取非常难。这取决于用户使用您网站的方式。他们使用它的方式可能会随着时间而改变。单个用户使用它的方式可能会随着时间而改变。

由您来决定这些技术的正确平衡。

在初始HTML页面上预取HTML内容以供将来请求使用

1 个答案: