页面优化有哪些_在多页面应用和单页面应用中（例如vue）怎么提高seo搜索引擎优化

# 单页面和多页面开发与应用 # 单页面： - 什么是单页面： 单页面是指只有一个主页面的应用程序。 浏览器必须在开始时加载所有必需的 html、js 和 css。 所有页面内容都包含在这个所谓的主页中。 但在写入时，它们仍然会被单独写入（页面片段），然后在交互时由路由器动态加载。 - 跳转仅加载一次，用于PC和官网 - 页眉 -> 第一页、第二页、第三页 -> 脚本 # 单页技术： - 是一个综合性的客户端框架。 其模板基于双向 UI 数据绑定。 数据绑定是一种在模型更改时自动更新视图，并在视图更改时更新模型的自动化方式。 它的 HTML 模板是在浏览器中编译的。 编译步骤创建纯 HTML，浏览器将其重新呈现到实时视图中。 在后续页面视图中重复此步骤。 在传统的服务器端 HTML 编程中，控制器和模型等概念在服务器进程内交互以生成新的 HTML 视图。 在该框架中，控制器和模型状态在客户端浏览器中维护，因此生成新页面不依赖于与服务器的交互。 -Ember.js 是一个基于模型-视图-控制器 (MVC) 软件架构模型的客户端 Web 应用程序框架。 它允许开发人员通过一个框架中的常见习惯用法和最佳实践来创建可扩展的单页应用程序。

该框架提供了丰富的对象模型、声明式双向数据绑定、计算属性、.js 提供的自动更新模板以及用于管理应用程序状态的路由器。 -.js 是专为单页应用程序设计的全栈（客户端-服务器）框架。 它具有比 、Ember 等更简单的数据绑定功能，并使用 --Data 和发布/订阅自动将数据更改传播到客户端，而不需要开发人员编写任何同步代码。 全栈反应式确保从数据库到模板的所有层都可以在必要时自动更新。 服务器端渲染等生态系统包解决了搜索引擎优化 (SEO) 等问题。 - 是一个适用于移动、桌面和网络的客户端框架。 它很相似，但更新、更符合标准，并且使用模块化举措。 使用下一代编写。 -Vue.js（俗称Vue）是一个用于构建用户界面的开源渐进式框架。 -React（通常写为 React.js 或 React.js）是一个用于构建用户界面的库。 它由 、 个人开发人员以及企业社区维护。

React 最大的优势是它的易用性——基本上任何熟悉 HTML 的开发人员都可以创建 React 应用程序。 另一个明显的优势是可以使用相同的技术堆栈来创建 Web 和移动应用程序。 有多家公司使用 React 和 Redux 库来让开发人员创建复杂但可扩展的 Web 应用程序。 - 是一个全栈库，它采用 Relay 和 Om Next 的数据驱动原则来实现反应式、功能性、数据驱动的软件。 -单页 seo（搜索引擎优化）： -根据部分进行优化，为每个关键字创建一个

或每个关键字并为其分配一个适当的 ID，该页面上的内部链接将链接到该 ID。 - 优化页面速度对于单页网站SEO至关重要。 - 做了SEO之后，单页还是单页 # 单页的优点： - 减轻服务器压力。 如果不使用单页面（spa），如果每次切换页面时向服务器发送请求，服务器返回一个html文件； 但如果使用单页面，切换时不需要请求服务器，只需要使用本地js即可进行切换。 并且无需在服务器端配置路由，前后端完全分离——增强用户体验，增加应用的流畅度。 使用spa后，页面切换时非常流畅。 完全没有那种不断清爽的感觉。 相反，它的反应非常快。 因为js运行速度很快，所以js在做本地路由的时候会很慢。 快的。 -单页面应用不需要页面间切换，因此不会出现“白屏现象”，也不会有假死和“闪烁”现象。 -单页面应用对服务器的压力比服务器小。 服务器只需要使用数据，无需担心显示逻辑和页面合成，吞吐能力会提升数倍。 -良好的前端和后端分离。 后端不再负责模板渲染和页面输出。 后端API通用，即同一套后端程序代码无需修改即可用于Web界面、手机、平板等多种客户端。 - 单页面的缺点： - 第一次加载需要很长时间。

解决方案：可以采用基于HTTP Chunk的首屏数据渐进式预加载方案。 该方案整体将单页应用的首屏渲染时间缩短了1.2秒。 针对首屏数据渐进式预加载的优化思路也得到了体现：优化首屏数据加载节点的速度。 预加载第一屏数据以并行化多个串行节点。 -SEO问题不利于被百度、360等搜索引擎收录。解决方案：可以使用服务。 它获取请求并直接在服务器端的js中运行HTML（就像浏览器一样）。 动态填充内容后，它会广播一个事件来告知“内容已准备好”。 现在可以返回给爬虫了。”这样，爬虫就得到了一个完整的HTML，就像浏览器渲染的一样。目前流行的框架都有对应的服务端渲染框架——这可能会导致CSS命名冲突。解决方案：我们可以使用Sass、LESS等CSS预处理器在一定程度上解决这个问题 - 前进、后退、地址栏、书签等都需要通过程序来管理，页面的复杂度很高，需要一定的能力。 # 多页面： - 什么是多页面：每次页面跳转时，后台服务器都会返回一个新的HTML文档。这种类型的网站就是多页面网站，也称为多页面网站。多页应用 - 跳转需要刷新 所有资源，对于应用程序或客户端 - 页眉 -> 第一页 -> 脚本、页眉 -> 第二页 -> 脚本、页眉 -> 第三页 -> 脚本 - 多页优点：为用户提供一个完美的视觉方向，注重简单明了的SEO管理，没有大量的菜单。

由于应用可以针对每页一个关键词进行优化——多页面 缺点：后端和移动客户端不能同时使用，前端和后端开发紧密结合。 开发变得相当复杂。 开发人员需要使用客户端和服务器端的框架。 这导致应用程序开发时间更长。 # 区别： -组成：单个页面由一个shell页面和多个页面组成，多页面由多个完整页面组成 -css（资源公用）：单页面共享，只需要加载shell部分，多页面-页面不共享，每个页面单独加载 - 刷新方式：单页部分更改或刷新，多页全页刷新 - URL 方式：单页/#/多页/.html - 用户体验：单页页面切换速度快，用户体验好，多页面加载慢，流畅度不够，用户体验差 - 过渡动画：单页面容易实现，但多页面不可能实现 - 数据传输：容易单个页面、多个页面需要依赖url传递参数，或者等等。 - 搜索引擎优化：单个页面需要单独的解决方案，实现起来比较困难，也不利于SEO搜索。 可以用SSR进行优化，多页面实现方式简单 - 适用范围：单页面对体验要求高，追求页面流畅度，多页面追求对搜索引擎应用的高支持 - 开发成本：单页面要求较高，需要专业的框架； 多页较低，但页面重复代码较多 - 维护成本：单页相对容易，双页相对复杂