成都网站建设在你建立一个单页应用程序网站之前-阅读这篇博文!

2023-09-06 分类：网站建设

如果2021年在网页设计方面有一个趋势，那就是单页应用程序(spa)的普及。水疗中心数量的增加并不令人惊讶，因为水疗中心是我们大多数人每天使用的最受欢迎的、引领潮流的网站。例如，Facebook、Gmail、Twitter和谷歌Maps都是spa。现在商业网站使用SPA框架已经相当普遍了。

在你跳上SPA的潮流并创建你的下一个网站之前，你可能希望从那些已经选择了SPA之路的人的经验和错误中学习。虽然spa有一些优秀的特性，但它们也有一些局限性，或者至少有一些复杂性。

单页应用程序的优点

spa提供非常流畅和快速的用户体验。他们创造了一个多页网站的印象，但他们利用一个单一的HTML文件。spa使用JavaScript代码与浏览器进行通信，这意味着请求不会经常发送到服务器并从服务器检索。这种客户端呈现创建了一个更快的网站和流畅的用户体验，很像桌面应用程序。

spa在开发中也没有前端和后端;这都是一回事。spa也可以离线使用，比传统网站更快，制作和调试也相对容易。

spa的另一个优点是，通过单一的设计，它们在任何操作系统和浏览器上都可以很好地查看和工作。

搜索引擎优化的问题

当前spa的一个重要问题是，它们很难在搜索引擎上优化索引和排名。一般的SEO主管也不太可能调整和优化必要的代码，以确保搜索引擎机器人可以有效地抓取和索引一个SPA网站。除非执行人员受过培训，精通SPA使用的特定JavaScript框架的使用。

单独使用JavaScript可能会给搜索引擎机器人爬行带来问题。从SEO的角度来看，通常不鼓励网站在导航中使用JavaScript，因为机器人爬行、索引和呈现需要大量代码。通常认为，导航的最佳实践是只使用HTML和CSS。

StackOverflow的这篇博文说明了一个开发人员在他的第一个SPA项目中遇到的一些JavaScript相关问题:

“HTML是结构化的，计算机和机器人很容易理解，但它们不一定理解JavaScript。虽然有很多文章在讨论谷歌的爬虫在抓取一个网站时是否执行JavaScript，但我的经验是它没有。

spa和用户禁用JavaScript

spa的另一个缺点是，当用户禁用JavaScript时，它们不能工作。根据StackOverflow上的这个帖子，大约2%的美国人在他们的主要浏览器上禁用了JavaScript。

编码技术要求

最后，创建一个安全且功能上没有错误的SPA需要大量的专业知识。使用WordPress或Shopify这样的内容管理系统创建一个复杂的电子商务网站相对容易，但使用SPA框架则非常困难。

单页应用和社交分享

当用户在社交媒体平台上分享网页时，它被分享到的网站将从打开的图形或Twitter卡元细节的HTML中拉进预览图像和文本片段。

当使用CMS或标准HTML & CSS网站时，这个元标记很容易产生。做SPA可不容易。许多人错误地提供了由JavaScript填充的元标记。这种方法通常会导致SPA网站的每个页面/视图都有相同的预览。

例如，用户可能会在Facebook上分享一个讨论加密货币利弊的博客页面。如果Facebook不能访问开放图表标签，社交分享将显示你的主页预览，这是完全无关的，不太可能产生很多点击。这个问题有一个解决方案，在本教程中从tutplus概述。

缓存

如果使用SPA，允许你的网站缓存也会变得更加复杂。

为了使缓存按预期发挥作用，您将需要考虑一个“缓存破坏”解决方案。或者，您可以使用if-modified-since + last-modified或if-none-match + ETag头以及适当的缓存控制头。

如果文件是静态的，通常建议开发人员使用If -modified，因为只要正确配置了HTTP服务器，这将自动实现。

也可以使用Cloudflare。但是，请注意，Cloudflare在缓存响应之前不会执行任何JavaScript。有关这方面的更多信息，请访问Cloudflare网站。

单页应用程序视图和状态

在标准的多页网站(MPW)中，用户可以通过点击导航按钮/链接来浏览网站，并加载新页面。在SPA中，用户将单击导航按钮并加载同一HTML页面的不同视图或状态。

使用SPA，应用程序外壳永远不会重新加载。因此，例如，如果您的SPA网站有相同的页眉，页脚和工具条，整个网站，这将只加载一次。用户将通过单击导航按钮重新填充主内容或任何不同的内容，而模板保持不变。

这多亏了AJAX。

活动跟踪和单页应用程序

对于spa，页面跟踪可能会有问题。这是因为，从技术上讲，浏览器只加载一个页面。当用户在网站上导航到不同的页面时，使用标准跟踪，它会报告只有初始页面被加载。

谷歌Analytics 4在“增强测量”下有一些内置特性，旨在跟踪spa中的页面访问量。如果启用了这个功能，并且勾选了“基于浏览器历史事件的页面更改”旁边的复选框，它就应该跟踪URL的更改——即使页面没有加载或重新加载。

然而，“增强的度量”的一些其他特性不能与spa正确工作，所以禁用“站点搜索”和“滚动”，以避免误导性报告。

如果由于任何原因这种方法不工作，你可以使用谷歌标签管理器中的“历史更改触发器”。禁用增强的测量页面视图选项，然后转到谷歌标签管理器à触发器à New

从内置触发器的菜单中，选择“历史更改”，命名它，然后点击保存。

刷新和预览。现在，每次单击一个新页面/视图时，都会触发一个历史事件。

结论

要创建一个SPA网站，你需要掌握一个Javascript框架，比如Vue、React或Angular。使用普通的JavaScript是可能的，但它要花更多的时间。

使用带有XML的Ajax来检索信息并在后台“加载”不同的网站页面。

SPA网站的主要问题似乎与搜索引擎优化和跟踪有关。确保所有API都得到支持，并使用历史API和适当的链接标记，以确保搜索引擎机器人可以抓取单独的url。您可以使用谷歌移动友好测试开始测试您的SPA网站。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容