zoukankan      html  css  js  c++  java
  • 【Vue.js】SPA

    SPA


    2019-11-13  23:20:48  by冲冲

    1、概念

    (1)MPA(multi-page application)

    特点:每一次页面跳转的时候,后台服务器都会返回一个新的html文档,这种类型的网站就是多页网站,也叫多页应用。

    (2)SPA(single-page application)

    ① 原理:第一次进入页面时就会加载相应的HTML、JavaScript 和 CSS,需要切换内容时,通过JavaScript感知url变化,更换当前页面内容,但是并没有新的html文件请求。此时路由不再是后端做,而是前端做。

    ② 页面跳转:js渲染

    ③ 优点:

    A. 页面切换快。前端局部渲染。

    B. 减轻服务器压力。服务器前期发送静态资源(html、css、js)到浏览器,往后通过RESTful API提供接口数据,并使用Ajax异步获取,实现前后端分离。

    C. 不用修改后端程序代码(API接口)就可以同时用于web界面、手机、平板等多种客户端。

    ④ 缺点:

    A. 首屏时间慢。首屏时不仅需要请求一次html,同时还要发送一次js请求,两次请求回来了,首屏才会展示出来。相对于多页面应用只需要发送一次html,SPA首屏时间慢。

    B. SEO差。因为搜索引擎只认识html里的内容,不认识js渲染生成的内容,搜索引擎不识别,也就不会给一个好排名,会导致单页应用做出来的网页在搜索引擎上的排名差。(解决方案:vue的SSR)

     

    2、比较

      多页面应用模式(MPA) 单页面应用模式(SPA)
    应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成
    跳转方式 页面之间的跳转是从一个页面到另一个页面 一个页面片段删除或隐藏,加载另一个页面片段并显示
    跳转后公共资源是否重新加载
    URL模式

    http://xxx/page1.html --> http://xxx/page2.html

    http://xxx/shell.html#page1 --> http://xxx/shell.html#page2

    用户体验 页面间切换加载慢,用户体验差,尤其在移动端 页面片段间切换快,用户体验好,包括移动设备
    能否实现转场动画 容易实现(手机APP动效)
    页面间传递数据 依赖URL、cookies或者localstorage,实现麻烦 页面传递数据容易(VuexVue中的父子组件通讯props对象)
    搜索引擎优化(SEO) 可以直接做 需要单独方案SSR
    特别适用范围 需要对搜索引擎友好的网站 对用户体验要求高,特别是移动应用
    开发难度 较低,大部分JS框架适用 较高,需要特定JS框架
  • 相关阅读:
    c++ 全局变量初始化的一点总结
    新的博客
    Git常用命令总结
    git 分支 branch 操作
    状态管理Vuex
    让 markdown 生成带目录的 html 文件
    mysql安装时,提示:Failed to start service MYSQL80
    【React 资料备份】React Hook
    【React 资料备份】React v16.3之后的生命周期
    两个数组对象取并集
  • 原文地址:https://www.cnblogs.com/yadiel-cc/p/11854243.html
Copyright © 2011-2022 走看看