我应该使用AJAX加载整个html页面吗？

Question

我的设计师认为在不同页面之间创建过渡是一个好主意。本质上，只有内容部分会重新加载（页眉和页脚保持不变），并且只有内容div应该具有过渡效果（淡入淡出或某种形式）。创造这种效果并不是真正的问题，让Google（分析）感到高兴的是…

我不喜欢的解决方案以及原因；

• 仅使用ajax加载内容div：谷歌将看不到任何内容，这意味着将永远找不到该网站，或者仅显示由ajax检索的部分，而这些部分根本不会显示整页
• 显示过渡效果，然后将用户“重定向”到指定页面（捕获元素的click事件）：效果与仅链接到另一个页面几乎相同。用户仍然会看到页面正在重新加载

我想到了一个可能的解决方案：当访客单击链接，捕获事件，使用ajax加载目标，同时显示过渡效果时，然后仅使用通过ajax请求获取的内容重写整个文档。

至少这将起作用并具有一些优点；无论您的互联网连接速度有多慢，页面的重新加载看起来都是无缝的，谷歌不会在意，因为ajax内容本身就是一个完整的html页面，并且可以按原样进行爬网，即使是非JavaScript浏览器（手机等。）不会介意，他们只是重新加载页面。

实施该方法的犹豫是我将使用Ajax重新加载整个页面。我想知道这是否就是ajax的目的，是否会使速度变慢。最重要的是，有没有更好的解决方案，例如。我的第一个“坏”解决方案但略有不同，因此Google希望使用它（分析也是如此）？

感谢您对此的想法！

Answer 1

简短的答案：我不建议以这种方式加载整个页面。

长答案：不推荐。尽管可能，但这并不是XHR / Ajax的真正意图。本质上，您正在做的是复制浏览器的本机行为。您将遇到的一些问题：

1. 支持“后退/前进”按钮。您需要使用URI＃方案来解决。
2. 浏览器必须通过AJAX解析整个页面。这会使事情变慢。例如，如果您将HTML块加载到浏览器中，然后用它替换DOM，则只有其中的所有脚本，CSS或图像才会开始下载。
3. 内存-浏览器未更改页面。随着时间的推移（取决于浏览器），我希望内存使用量会增加。
4. 辅助功能。每当页面内容更新时，都需要通知屏幕阅读器。可能对您而言不是问题，但值得一提。
5. 正在缓存。浏览器将不知道要缓存的页面（超出初始负载）。
6. 关注点分离-您的View本质上分为服务器端部分，以呈现页面内容以及页面框架的静态HTML，最后是JS，将服务器部分与浏览器部分组合在一起。随着时间的推移，这将使维护变得麻烦而复杂。
7. 与其他组件的集成-您已经发现Google Analytics（分析）存在问题。您可能会遇到其他与DOM的构建时间有关的组件的问题。

是否值得为页面过渡效果而用，但这是您的电话，但我希望我已经回答了您的问题。