微网站设计平台,网络营销相关的岗位有哪些,中象做网站怎么样,北京住房和城乡建设网1、单页面应用程序#xff08;SPA#xff09;
① 什么是 SPA
SPA 全称为 Single-Page Application#xff0c;表示单页面应用程序。 也就是说只有一个 HTML 文件的 Web 应用#xff0c;我们通过 Vue 开发的项目其实就是典型的 SPA应用 在单页面应用程序中#xff0c;我…1、单页面应用程序SPA
① 什么是 SPA
SPA 全称为 Single-Page Application表示单页面应用程序。 也就是说只有一个 HTML 文件的 Web 应用我们通过 Vue 开发的项目其实就是典型的 SPA应用 在单页面应用程序中我们不会为每个路径创建多个 HTML 文件而是使用 JavaScript 为同一页面上的不同路径呈现不同的组件。 当从浏览器请求单页面应用程序时就会下载一个 bundle.js 文件该文件包含所有请求网站的已编译 JavaScript 代码。使用这种方法浏览器会通过使用 HTML5 History API 根据用户选择的路径呈现单个页面。 如果网站使用了延迟加载那么可能会有多有 bundle.js 文件会根据请求的路径进行下载。
因此除了特殊情况否则不会重新加载页面再次从服务器请求。如果想维护应用程序的状态这一点是非常重要的因为重新刷新页面就会重置应用程序的状态。
SPA的特点: 1) SPA 应用只有一个 HTML 文件所有的内容其实都在这个页面中呈现的 2) SPA 应用只会加载一次HTML文件, 不会因为用户的操作而进行页面的重新加载当用户与应用程序交互时是通过动态更新页面内容的方式来呈现不同的内容 ② SPA 的优点
提高页面加载速度从而获得更好的用户体验 它们通常只加载一次。加载后页面渲染取决于浏览器的速度。 不会重新加载整个网页, 只是局部更新。 更少的服务器负载 渲染逻辑在浏览器中执行。服务器和客户端之间只发送相关数据。 只用处理数据不用处理界面。 缓存 只向服务器发送一次请求返回的响应会被缓存也可以离线使用SPA。 调试 React 和 Vue 等 SPA 框架提供了调试工具这使开发人员的开发调试更加轻松。 代码可重用性 开发人员可以重用代码这使得开发效率更高。 转场动画 容易实现。 页面间数据传递 因为在一个页面内多以页面之间数据传递很容易 ③ SPA 的缺点
搜索引擎优化 (SEO) 较差 搜索引擎具有可以解析 JavaScript 的爬虫但它们很难爬取异步内容。加载初始页面后不知道还有其他数据的爬虫将停止爬取从而导致 SEO 效率低。 内存泄漏 事件监听器占用大量空间。使用 SPA 在客户端很容易引入内存泄漏如果将事件侦听器添加到全局对象而没有在卸载组件时删除它们就会产生内存泄漏。如果不想导致内存泄漏则需要清理事件侦听器、定时器等。 安全性 与 MPA 相比SPA 更容易受到跨站点脚本攻击XSS。 2、多页面应用程序MPA ① 什么是 MPA
MPA 全称 Multi-Page Application表示多页面应用程序。多页面应用程序由多个 HTML 文件组成每当请求页面时就会下载这些文件。 我们在地址栏输入的每个新的 URL 或单击的每个超链接时都会向服务器发送一个新请求并下载一个新的页面。在这种方法中服务器完成了较为繁重的工作。 因此如果用户的网络连接较差每个页面可能需要很长时间才能加载出来。
② MPA 的优点
搜索引擎优化SEO更好 单页可以只有有限数量的关键字但多页应用程序可以为多个页面提供相同数量的关键字这为爬虫提供了更多关于网站的信息. 良好的可扩展性 可以持续添加功能不断扩展。但在 SPA 中随着不断添加功能bundle.js 将会不断增长因此要么减少内容要么进行延迟加载。 内存泄漏很少见 服务器端很有可能出现内存泄漏但客户端内存泄漏很少见因为浏览器将为每个导航链接加载不同的脚本。 ③ MPA 的缺点
加载速度慢 它们不断地为每个请求加载新页面即使 UI 发生了细微的变化页面也必须重新加载。如果客户端的网络连接不好或服务器速度慢加载速度就会下降最终导致用户体验不佳。 开发效率低 代码可重用性较低文件较大前端与后端的耦合更紧密。这些因素会使开发效率低。 增加服务器负载 与服务器的每次交互都包含一个需要渲染的 UI 包。 转场动画 无法实现。 页面间数据传递 依赖 URL、Cookie、或者 localStorage 等实现麻烦。 3、渐进式应用程序PWA
① 什么是 PWA
PWA 全称 Progressive Web Apps表示渐进式应用程序。
渐进式应用程序可以在独立的窗口中运行而不是在浏览器的选项卡中运行。简单的说它们是一种 web 应用程序类似于本地应用程序可以安装在手机、平板电脑或者笔记本电脑上。
下载后用户可以通过屏幕上的图标访问该应用。这种应用还可以向用户发送推送消息和通知。渐进式应用程序可以是 单页面应用SPA也可以是多页面应用MPA。 想要申请 PWA 应用必须满足三个条件
安全上下文 (HTTPS) 安全上下文是为用户身份验证和机密性定义的最低标准。PWA 的许多 API 和许多功能如地理定位只有在应用程序通过安全网络提供服务时才可用。Service Worker Service Worker 是在后台运行并控制浏览器如何处理网络请求和内容缓存的脚本。PWA 通过服务工作者提供离线服务。清单文件这是一个 JSON 文件用于保存 PWA 所需的应用程序信息例如应用程序的名称、启动 URL、多种尺寸的图标和主题颜色。 与原生移动应用程序相比渐进式 Web 应用程序更小。研究表明它们有助于增加流量和用户参与度并降低跳出率这主要归功于它的离线可用性。
