单页应用程序(SPA)是一种网站设计方法,其中每个新页面的内容不是通过加载新的HTML页面来提供的,而是通过JavaScript操作现有页面上的DOM元素来动态生成的。
【资料图】
在更传统的web页面体系结构中,index.html页面可能链接到服务器上的其他html页面,浏览器将从头开始下载和显示这些页面。
SPA方法允许用户在更新或获取新元素时继续使用页面并与之交互,并且可以导致更快的交互和内容重新加载。此外,HTML5历史API允许我们在不重新加载页面的情况下更改页面的URL,从而允许我们为不同的视图创建单独的URL。
一旦进入SPA,应用程序就能够通过AJAX请求或WebSocket从服务器动态获取内容。这允许浏览器在后台向服务器请求获取附加内容或新“页面”时保持当前页面的打开状态。
如果您曾经开始过搜索查询,并且在键入时在输入表单下方显示了中间结果,那么您已经看到了在更新这些DOM元素的背景中发生的动态查询。事实上,服务器查询可以获取任何类型的数据,通常采用JSON有效负载、字符串甚至已经准备好呈现的HTML元素的形式。
何时使用单页应用程序,何时不使用?
什么时候应该考虑使用单页应用程序?
首先,如果您希望在用户和应用程序之间进行丰富的交互,那么SPA几乎是必不可少的。第二,如果你想在页面上提供实时更新,你肯定需要使用这种方法;通知、数据流和实时图表都需要使用这种方法。
你应该避免使用SPA吗?
如果您的内容是纯静态的,那么引入SPA会缩短用户的加载时间,要求用户在能够查看任何内容之前下载并执行JavaScript负载。然后,可以通过简单地根据请求显示静态HTML内容来提高浏览器年龄较大或互联网连接较慢的用户的可访问性。最后,如果机器人程序无法查看任何标题或内容,无法显示任何HTML内容可能会损害SEO排名。
上面讨论的服务器端呈现方法可以改善加载时间的情况,并为未启用JavaScript的用户提供一些基本的可读性。建议至少为未启用JavaScript的用户提供内容的基本功能,以便他们有机会根据从初始页面加载中看到的内容来决定启用JavaScript。