单页应用SEO和无限滚动AngularJS [英] Single Page Application SEO and infinite scroll AngularJS

问题描述

我们是有类似Pinterest的饲料网站，并计划重构jQuery的汤成一些更有条理。这两个最有可能的候选人是AngularJS和骨干+木偶。该网站是用户生成的，并且大多是喜欢，书签，就贴子发表评论的能力，为用户消费导向型（典型90/9/1规则）。从进我们打开灯箱看到有关的帖子有意见，相关的帖子，类似Pinterest的更多细节。

We are have a site with a feed similar to pinterest and are planning to refactor the jquery soup into something more structured. The two most likely candidates are AngularJS and Backbone+Marionette. The site is user-generated and is mostly consumption-oriented (typical 90/9/1 rule) with the ability for users to like, bookmark, and comment on posts. From the feed we open a lightbox to see more detail about the post with comments, related posts, similar to pinterest.

我们已经零星使用的骨干，熟悉的想法，但推迟了样板。我认为木偶将有很大的帮助与该但是我们开到更激进（如角），它是否会在长期内有助于改变方向。

We have used backbone sporadically and are familiar with the idea but put off by the boilerplate. I assume Marionette would help a lot with that but we're open to changing the direction more radically (eg Angular) if it will help in the long term.

的要求：

• 初始页必须静态的搜索引擎优化的原因。该框架能够开始与现有内容，preferable很少打架是很重要的。


• 我们将preFER有需要的饲料已经加载，这样的转变可以更快的收藏夹数据。有些数据已经存在（标题，描述，照片，NUM喜欢/ NUM书签，NUM评论），但有将被加载的详细视图附加数据 - 的意见，类似的帖子，谁喜欢这一点，等等


• 来后在饲料或细节灯箱所发生的变化应反映在其他同一点的工作（例如，如果我从进料喜欢它，我应该看到，像和新的一样计数如果我去了灯箱 - 或者相反）


• 我们希望将我们的移动网站（目前在煎茶触摸）也使用对于一些通用的部件相同code碱基所以我们可以有移动和主站点之间建立更密切的功能特性。

这关系到我对角的担忧要求：

These requirements related to my concerns about Angular:

1），才有可能/问题有初始页面加载的是静态的，而通过模板附加页撕心裂肺。

1) Will it be possible/problematic to have initial page loads be static while rending via the templates additional pages.

2）是其问题有多个数据源的页的不同部分 - 比如主支柱部分来自嵌入JSON数据和来自看到更多的S进料中而附加细节将来自不同的AJAX呼叫。

2) is it problematic to have multiple data-sources for different parts of page - eg the main post part comes from embedded json data and from "see more"s in the feed while the additional detail would come from a different ajax call.

3）当结合双向是冷的 - 我担心这可能是因为所呈现的项目数的在我们的情况下，一个负的。我们需要双向绑定元件的数量相对较少。文章如下：

3) While the two-way binding is cool - I'm concerned it might be a negative in our case because of the number of items being rendered. The number of elements that we need two-way binding is relatively small. Posts like:

• http://stackoverflow.com/a/7654856/214545


• 角JS会消耗更多的浏览器内存

• http://stackoverflow.com/a/7654856/214545
• Angular JS consumes more browser memory

关注我要我们的用例。我们可以轻松拥有数百个职位的每1-2打的细节。双向绑定可以是已禁用在那里我有场/我知道不会改变的元素呢？

concern me for our use-case. We can easily have hundreds of posts each with 1-2 dozen details. Can the two-way binding be "disabled" where I have fields/elements that I know won't change?

这是正常/可以卸载视图端口相同的内存之外的元素？这也被连接到该移动方向，因为存储器是更加关心那里。

Is it normal/possible to unload elements outside of the view port to same memory? This is also connected to the mobile direction because memory is even more of a concern there.

请问AngularJS工作/在我们的用例执行呢？有没有什么窍门/提示，这将有助于在这里？

Would AngularJS work/perform well in our use-case? Are there any tricks/tips that would help here?

推荐答案

有无限滚动不同的方法或喂，你把它。用户和可接受的响应有效载荷大小的需求将决定你选择哪一个。

There are different methods of "infinite scroll" or feed as you put it. The needs of the users and size of acceptable response payload will determine which one you choose.

的你，你满足性能似乎在这里牺牲可用性。的

1 追加资产

这方法是你的传统追加到下方法，即如果用户到达当前滚动高度的底部，另一API调用将作出内容更堆。这有它的好处是，以处理跨设备的警告是最有效的解决方案。

This method is your traditional append to bottom approach where if the user reaches the bottom of the current scroll height, another API call will be made to "stack on more" content. This has it's benefits as being the most effective solution to handle cross device caveats.

该解决方案的缺点，正如你所提到的，来自大型有效载荷泛滥内存用户通过内容不慎滚动。没有油门。

Disadvantages of this solution, as you have mentioned, come from large payloads flooding memory as user carelessly scrolls through content. There is no throttle.

<div infinite-scroll='getMore()' infinite-scroll-distance='0'>
  <ul>
    <li ng-repeate="item in items">
      {{item}}
    </li>
  </ul>
</div>

var page = 1;
$scope.getMore() = function(){ 
 $scope.items.push(API.returnData(i));
 page++;
}

2 追加资产油门

在这里，我们建议用户可以继续显示一个多食的结果，将无限追加，但它们必须油门或手动援引呼吁更多的数据。这成为返回相对于所述内容的大小繁琐，用户将通过滚动。

Here, we are suggesting that the user can continue to display more results in a feed that will infinitely append, but they must be throttle or "manually" invoke the call for more data. This becomes cumbersome relative to the size of the content being returned that the user will scroll through.

如果有每个有效负载被retruned了很多内容，用户必须点击更多按钮更少。当然，这是在返回较大有效载荷的一个折衷。

If there is a lot of content being retruned per payload, the user will have to click the "get more" button less. This is of course at a tradeoff of returning a larger payload.

<div>
  <ul>
    <li ng-repeate="item in items">
      {{item}}
    </li>
  </ul>
</div>
<div ng-click='getMore()'>
  Get More!
</div>

var page = 1;
$scope.getMore() = function(){
  $scope.items.push(API.returnData(i));
  page++;
}

3。 虚拟滚动

这是无限滚动的最后也是最有趣的方式。这个想法是，你只存储一个范围浏览器内存结果的渲染的版本。也就是说，复杂的DOM操作只作用于你的配置中指定的电流范围。然而，这有它自己的缺陷。

This is the last and most interesting way to infinite scroll. The idea is that you are only storing the rendered version of a range of results in browser memory. That is, complicated DOM manipulation is only acting on the current range specified in your configuration. This however has it's own pitfalls.

最大的是跨设备的兼容性。

The biggest is cross device compatibility .

如果您的手持设备具有到达装置的宽度虚拟滚动窗口---它最好是小于页面的总高度，因为你将永远无法滚动过去的这个食与自己的滚动酒吧。你会被卡住中期页面，因为总是会作用于虚拟滚动饲料而不是包含饲料的实际页面您的滚动。

If your handheld device has a virtual scrolling window that reaches the width of the device --- it better be less then the total height of the page because you will never be able to scroll past this "feed" with its own scroll bar. You will be "stuck" mid page because your scroll will always be acting on the virtual scroll feed rather than the actual page containing the feed.

其次是可靠性。如果用户从低指数一个极高手动拖动滚动条，你是迫使broswer非常非常快速地运行这些指令，它在测试中，引起我的浏览器崩溃。这可以通过隐藏滚动条是固定的，但当然，用户可以通过非常非常迅速滚动调用相同塞纳里奥

Next is reliability. If a user drags the scroll bar manually from a low index to one that is extremely high, you are forcing the broswer to run these directives very very quickly, which in testing, has caused my browser to crash. This could be fixed by hiding the scroll bar, but of course a user could invoke the same senario by scrolling very very quickly.

这里是演示

源

初始页必须静态的搜索引擎优化的原因。该框架能够开始与现有内容，preferable很少打架是很重要的。

那么，你的意思是，你想要的页面是prerendered服务器端其服务内容之前？这种做法在早期的数千名工作良好，但大多数人从此远离，并朝着单页应用风格去。有充分的理由：

So what you are saying is that you want the page to be prerendered server side before it serves content? This approach worked well in the early thousands but most everyone is moving away from this and going towards the single page app style. There are good reasons:

• 在发送给用户作为一个引导让您的服务器做WAY更少的工作来获取API数据inital种子。

• The inital seed you send to the user acts as a bootstrap to fetch API data so your servers do WAY less work.

延迟加载的资产和异步Web服务调用，使percieved加载时间比传统的要快得多渲染服务​​器上的所有内容第一，然后吐出回给用户的方法。

Lazy loading assets and asynchronous web service calls makes the percieved load time much faster than the traditional "render everything on the server first then spit it back out to the user approach."

您的搜索引擎优化可以使用页面pre-渲染/缓存引擎在Web服务器的前面坐只是网络爬虫你的完全渲染版回应pserved $ P $。这个概念很好地解释 <一个href=\"http://theothersideof$c$c.com/what-is-stopping-google-from-indexing-single-page-javascript-applications\">here.

Your SEO can be preserved by using a page pre-render / caching engine to sit in front of your web server to only respond to web crawlers with your "fully rendered version". This concept is explained well here.

，我们将preFER有需要的收藏夹数据的饲料已经加载，这样的转变可以更快。有些数据已经存在（标题，描述，照片，NUM喜欢/ NUM书签，NUM评论），但有将被加载的详细视图附加数据 - 的意见，类似的帖子，谁喜欢这一点，等等

如果您对饲料inital有效载荷不包含为每一个饲料ID儿童的数据点，需要使用额外的API请求加载它们在您的收藏夹---你是正确的这样做。这是完全一个合法的用例。你会吵了一个API调用是unpercievable延迟到最终用户50-100ms。如果您abosultely需要与饲料发送额外的负载，你的arent中奖了。

If your inital payload for feed does not contain children data points for each "feed id" and need to use an additional API request to load them in your lightbox --- you are doing it right. That's totally a legit usecase. You would be arguing 50-100ms for a single API call which is unpercievable latency to your end user. If you abosultely need to send the additional payload with your feed, you arent winning much.

更改在饲料或细节收藏的发生应该反映在其他同一点的工作（例如，如果我从进料喜欢它，我应该看到，像新象数职数字如果我去灯箱 - 或者相反）

您在这里混合技术---类似按钮的API调用到Facebook。无论这些变化传播到像按钮Facebook的其他实例在同一页上达至Facebook如何处理它，我敢肯定，一个快速谷歌将帮助你。

You are mixing technologies here --- The like button is an API call to facebook. Whether those changes propogate to other instantiations of the facebook like button on the same page is up to how facebook handles it, I'm sure a quick google would help you out.

数据具体到你的网站---但有几个不同的使用情况：

Data specific to YOUR website however --- there are a couple different use cases:

• 说我改变我的收藏夹标题，也希望改变传播到其当前显示在饲料，如果你的文章的编辑操作保存到服务器，成功回调可能引发更新新值与WebSocket的。这种变化将传播到不只是你的屏幕，但每个人都别人的屏幕。​​

• Say I change the title in my lightbox and also want the change to propogate to the feed its currently being displayed in. If your "save edit action" POST's to the server, the success callback could trigger updating the new value with a websocket. This change would propogate to not just your screen, but everyone elses screen.

您也可以谈论双向数据绑定（AngularJS这是伟大的）。随着双向数据绑定，你的模式，或者你从你的Web服务后面的数据可以被绑定到muiltiple地方你的看法。通过这种方式，为您编辑共享同一型号的页面的一部分，其他的将在沿边它实时更新。这发生之前的任何HTTP请求所以是一个完全不同的使用案例。

You could also be talking about two-way data binding (AngularJS is great at this). With two way data-binding, your "model" or the data you get back from your webservice can be binded to muiltiple places in your view. This way, as you edit one part of the page that is sharing the same model, the other will update in real time along side it. This happens before any HTTP request so is a completely different use case.

我们希望将我们的移动网站（目前在煎茶触摸）也使用对于一些通用的部件相同code碱基所以我们可以有移动和主之间更紧密的功能特性，网站

您真的应该采取一个看起来像一个现代化的响应CSS框架 引导 和 基金会 。使用自适应网页设计的一点是，你只需要建立网站一次器。---所有不同的屏幕尺寸。

You should really take a look a modern responsive CSS frameworks like Bootstrap and Foundation. The point of using responsive web design is that you only have to build the site once to accomadate all the different screen sizes.

如果你正在谈论的功能模块化，AngularJS叫绝。这个想法是，你可以在你的网站组件导出为可用于​​其他项目的模块。这可以包括意见为好。如果你建立一个负责任的框架的意见，你猜怎么着 - 你可以在任何地方，现在使用它。

If you are talking about feature modularity, AngularJS takes the cake. The idea is that you can export your website components into modules that can be used for another project. This can include views as well. And if you built the views with a responsive framework, guess what --- you can use it anywhere now.

1），才有可能/问题有初始页面加载的是静态的，而通过模板撕心裂肺的其他页面。

如上所述，其真最好远离这些种类的方法移动。如果你绝对需要它，模板引擎不约你阉了有效载荷的服务器端渲染或客户端服务。链接部分页面将同样入店。

As discussed above, its really best to move away from these kind of approaches. If you absolutely need it, templating engines dont care about wether your payload was rendered serverside or client side. Links to partial pages will be just as accesible.

2）是有问题的有多个数据源页面的不同部分 - 例如主哨部分来自嵌入式JSON数据，并从看多s，而另外的细节在饲料中将来自不同的Ajax调用。

同样，这正是这个行业正在走向。你会使用获取所有外部API数据的inital静态引导在percieved和实际的负荷节省时间---这也会让你的开发周期更快，因为你是完全分开独立peices的担忧。你的API不应该在乎你的看法和有关API你的看法不应该照顾。我们的想法是，无论你的API和前端code可以成为模块化/可重复使用的，当你打破他们成更小的peices。

Again, this is exactly what the industry is moving into. You will be saving in "percieved" and "actual" load time using an inital static bootstrap that fetches all of your external API data --- This will also make your development cycle much faster because you are separating concerns of completely independant peices. Your API shouldnt care about your view and your view shouldnt care about your API. The idea is that both your API and your front end code can become modular / reusable when you break them into smaller peices.

3）当结合双向是冷的 - 我担心这可能是因为所呈现的项目数的在我们的情况下，一个负的。我们需要双向绑定元件的数量相对较少。

我也将这个问题与你离开下方的注释结合起来：

I'm also going to combine this question with the comment you left below:

感谢您的回答！你能澄清 - 这似乎是1），2）只是处理你将如何实现无限滚动，而不是可能来自这样一个实现的性能问题。如此看来，3个地址的方式问题类似于最新版本的煎茶触摸，这可能是一个很好的解决方案

您会遇到性能问题是完全主观的。我试图勾勒出性能方面的考虑一样节流进入讨论，因为限制可以大大减轻压力的服务器正在量和用户的浏览器有工作，追加到DOM每一个新的结果集做。

The performance issues you will run into are totally subjective. I tried to outline the performance considerations like throttling into the discussion because throttling can drastically reduce the amount of stress your server is taking and the work your users browser has to do with each new result set appended into the DOM.

无限滚动，一段时间后，会吃掉你的用户浏览器内存。这么多，我可以告诉你的是inevitible但只有通过测试将您能告诉多少。根据我的经验，我可以告诉你，一个用户浏览器可以处理的虐待很大但同样，你的负载有多大每个结果集，什么指令，你对所有结果的运行是完全主观的。只有在一个远程数据第三个选项我描述设置渲染，但也有其局限性，以及解决方案。

Infinite scroll, after a while, will eat up your users browser memory. That much I can tell you is inevitible but only through testing will you be able to tell how much. In my experience I could tell you that a users browser can handle a great deal of abuse but again, how big your payload is for each result set and what directives you are running on all of your results are totally subjective. There are solutions that render only on a ranged data set in option three I described, but have their limitations as well.

回来API数据应该不会再比大小1-2kbs，并且应该只需要大约50-200ms返回查询。如果你的arent满足这些速度，mabye是时候重新评估您的查询或削减的结果通过使用子ID的查询其他端点，具体回来的大小设置。

API data coming back shouldn't be anymore than 1-2kbs in size, and should only take about 50-200ms to return a query. If you arent meeting those speeds, mabye it's time to re-evaluate your queries or cut down on the size of the result set coming back by using child ID's to query other endpoints for specifics.

这篇关于单页应用SEO和无限滚动AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！