小编典典

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

ajax

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

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

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

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

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

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

感谢您对此的想法!


阅读 299

收藏
2020-07-26

共1个答案

小编典典

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

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

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

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

2020-07-26