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

Question

我的设计师认为在不同页面之间创建过渡是个好主意.基本上只有内容部分会重新加载(页眉和页脚保持完整),只有内容div应该具有过渡效果(淡入淡出或某种排序).要创造这种效果并不是真正的问题,让谷歌(分析)开心就是......

解决方案我不喜欢和为什么;

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

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

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

我对实现这种方法犹豫不决的是,我将使用ajax重新加载整个页面.我想知道这是否是ajax的意图,如果它会减慢速度.最重要的是,是否有更好的解决方案,例如.我的第一个"坏"解决方案,但略有不同,所以谷歌会喜欢它(分析也)？

感谢您对此的看法!

Answer 1

简短回答:我不建议以这种方式加载整个页面.

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

1. 支持后退/前进按钮.你需要一个URI#方案来解决.
2. 浏览器必须通过AJAX解析整个页面.这会减慢速度.例如,如果您将一块HTML加载到浏览器中,然后用它替换DOM,那么任何脚本,CSS或其中包含的图像都将开始下载.
3. 内存 - 浏览器不更改页面.随着时间的推移(取决于浏览器),我希望内存使用量增加.
4. 可访问性.每当页面内容更新时,都需要通知屏幕阅读器.可能不是你的顾虑,但值得一提.
5. 缓存.浏览器不知道要缓存哪个页面(超出初始加载).
6. 关注点分离 - 您的View基本上分为服务器端部分,以呈现页面内容以及页面框架的静态HTML,最后是JS将服务器部分与浏览器部分相结合.随着时间的推移,这将使维护成为问题和复杂.
7. 与其他组件集成 - 您已经看到了Google Analytics的问题.您可能会遇到与构建DOM的时间相关的其他组件的问题.

是否值得为页面过渡效果是你的电话,但我希望我已经回答了你的问题.