精华内容
下载资源
问答
  • 单页面和多页面

    2018-10-04 14:33:18
    单页面SPA 指的是项目中有一个整体的框架,页面跳转是使用js来进行局部跳转。 优点: 页面切换快, 缺点: 首屏速度慢,由于要加载必须的js,css 导航不可用,如果一定要导航需要自行实现前进、后退。(由于是...

    单页面SPA

    指的是项目中有一个整体的框架,页面跳转是使用js来进行局部跳转。

    优点:
    页面切换快,
    缺点:

    • 首屏速度慢,由于要加载必须的jscss
    • 导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
    • SEO(搜索引擎优化)差

    应用场景
    经常切换页面的场景和数据传递较多,多表单的场景,
    常用于PC端官网、购物等网站


    多页面MPA

    项目中使用很多个页面,且页面跳转是整页刷新。

    优点:
    首屏加载速度快,但是页面切换回稍微慢
    缺点:
    页面切换慢,由于每一次都要发送html请求
    应用场景
    常用于app或 客户端等
    现在单页面是潮流发展,缺点慢慢被改进,所以学习的时候注意使用单页面


    下面是看到一篇博客中将单页面和多页面总结的很好。
    在这里插入图片描述
    图片来源

    展开全文
  • (设置vue 单页面meta info信息,如果需要单页面SEO,可以 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩。三大框架 Angular、Vue、React,可谓妇孺皆知。随着单页面应用的普及,人们在感受其...
  • 单页面和多页面应用场景总结

    千次阅读 2019-05-10 17:42:37
    页面和多页面应用场景总结 一、什么是单页面应用? 基本概念:在项目应用中,以单个html页面作为外壳页面,并在外壳页面一次性加载项目所依赖的资源(CSS、JS)。项目中其他页面作为页面片段在外壳页面中进行无感...

    单页面和多页面应用场景总结

    一、什么是单页面应用?

    基本概念:在项目应用中,以单个html页面作为外壳页面,并在外壳页面一次性加载项目所依赖的资源(CSS、JS)。项目中其他页面作为页面片段在外壳页面中进行无感切换(例如:利用H5的History监听到URL的变化,对页面片段进行切换(删除和添加))。

    单页面应用结构图:

    在这里插入图片描述

    优点:项目依赖资源共用,页面片段切换流畅(无感)、页面片段可以进行复用,页面片段切换时可以使用转场动画效果;

    缺点:不利于SEO优化,首屏加载缓慢。至于有些资料说开发成本高、这个不认同,以下介绍;

    二、什么是多页面应用?

    这里我觉得多页面应用可以分为两种形式:

    1. 传统形式:这种技术方案就是最初搭建页面的实现方式,每个页面都有各自的HTML文件,每个页面所依赖的资源都在各自HTML文件中引入,并且页面之间的跳转通过URL跳转。架构图如下所示:

    在这里插入图片描述

    2. 单页面形式:这种技术方案根据实际项目出发,本质上是将单页面应用拆分成多个单页面应用,多个单页面应用之间的调整通过传统形式来实现;架构图如下所示:
    在这里插入图片描述

    总结:传统形式结构是完全符合多页面的思想。单页面结构是单页面应用和多页面应用的互补方案;解决了首屏加载慢的问题,一定程度优化了SEO优化(作用感觉不大)。相对于传统形式结构,它可以像单页面应用一样实现转场动画(多页面跳转之间还是不能实现)。整理如下图所示:
    在这里插入图片描述

    三、如何选择页面结构?

    还是那句话,具体根据项目分析,对于官网、电商类这种对SEO和首屏加载速度要求比较高的项目,可以采用多页面应用结构。或者优秀“服务器端渲染方案”;如果是后台管理系统页面,不对外开放的系统,用单页面应用,这样可以利用第三方框架(Vue、React等)对系统进行组件化,如果系统过大,导致首屏加载缓慢,可以将系统拆分成单页面形式的多页面应用;一般来说登录页面作为后台管理系统的首屏页面。

    展开全文
  • 单页面应用(SinglePage Web Application,SPA)只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站 如图: 单页面...

    单页面应用(SinglePage Web Application,SPA)

    只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站

    如图:

    单页面应用结构视图
    单页面应用结构视图

    多页面应用(MultiPage Application,MPA)

    多页面跳转刷新所有资源,每个公共资源(js、css等)需选择性重新加载,常用于 app 或 客户端等

    如图:

    多页面应用结构视图
    多页面应用结构视图

    具体对比分析:

    单页面应用(SinglePage Web Application,SPA)多页面应用(MultiPage Application,MPA)
    组成一个外壳页面和多个页面片段组成多个完整页面构成
    资源共用(css,js)共用,只需在外壳部分加载不共用,每个页面都需要加载
    刷新方式页面局部刷新或更改整页刷新
    url 模式a.com/#/pageone
    a.com/#/pagetwo
    a.com/pageone.html
    a.com/pagetwo.html
    用户体验页面片段间的切换快,用户体验良好页面切换加载缓慢,流畅度不够,用户体验比较差
    转场动画容易实现无法实现
    数据传递容易依赖 url传参、或者cookie 、localStorage等
    搜索引擎优化(SEO)需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化实现方法简易
    试用范围高要求的体验度、追求界面流畅的应用适用于追求高度支持搜索引擎的应用
    开发成本较高,常需借助专业的框架较低 ,但页面重复代码多
    维护成本相对容易相对复杂
    展开全文
  • 单页面和多页面的区别

    千次阅读 2018-07-20 10:40:14
    页面应用 ... 优点:首屏时间非常快,SEO效果好 ...单页面应用 页面跳转不请求html页面,而是通过js渲染,通过js动态的把当前的内容删除掉,把新的页面的dom结构渲染出来 优点:页面切换快 缺点:首屏时间稍慢,SEO差...

    多页面应用

    每次跳转都会请求一个网页,返回的是html文件

    优点:首屏时间非常快,SEO效果好 (搜索引擎优化)

    缺点:因为跳转页面,页面切换比较慢

    单页面应用

    页面跳转不请求html页面,而是通过js渲染,通过js动态的把当前的内容删除掉,把新的页面的dom结构渲染出来

    优点:页面切换快

    缺点:首屏时间稍慢,SEO差

    展开全文
  • 主要介绍了在不使用ssr的情况下解决Vue单页面SEO问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 单页面应用首页白屏时间过长和SEO不友好的问题的一些技术的优缺点原理概括首页白屏时间过长的原因SEO不友好的原因预渲染技术骨架屏技术总结 概括 随着vue,react等前端框架的出现,单页面应用也随着流行起来。...
  • 主要介绍了vue-cli单页面预渲染seo-prerender-spa-plugin操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • # 单页面和多页面开发及应用 # 单页面: - 什么是单页面单页面是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写...
  • Vue单页面SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择页面 但...
  • 一个做SEO的好朋友,给我推荐的,拿出来大家共享一下。
  •  1、何为SEO?  SEO(search engine optimization),翻译为搜索引擎优化,是利用搜索引擎的搜索规则来提高在相关搜索引擎的排名以及访问量的方式。  2、目的  为了获取更的流量、排名以及点击率从而实现...
  • 主要介绍了浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 单页面模式和多页面模式详解

    千次阅读 2019-05-10 20:22:43
    1、单页面应用(SPA): 一个项目中只有一个完整的html主页面,其他都是html片段组成的分页面,浏览器一开始会在主页面加载所有必须的 html, js, css。撸代码的时候每个页面分开写(不管主页面还是分页面 )。在...
  • 页应用 单页应用 页面 就是 个html 优点:首页时间快 seo引擎优化效果 排名效果好 ...单页面 js渲染 优点:页面切换快 缺点:缺屏时间稍慢 seo搜索引擎 效果不好 排名不好 服务器 端可以弥补缺点 ...
  • vue单页面SEO优化

    千次阅读 2018-11-15 17:30:17
    1.1 安装prerender-spa-plugin vue.config.js: const path = require('path') const PrerenderSPAPlugin = require('prerender-spa-plugin') module.exports = { plugins: [ ... new PrerenderSPAPlugin...
  • 之前上线了一个使用vue做的单页面应用。google倒是可以爬取js运行的数据了,很快就收录了我的站点,但是百度还不行,很天...单页面应用主要有两种SEO的方式 服务端渲染 这是比较常见的模式,比如vuereact等都...
  • 分享视频教程——轻量级MVVM框架Vue.js快速上手(MVVM、SEO单页面应用、SSR服务器端渲染、Nuxt.js) 实践阶段由浅入深分为四个案例:动态评分、图片轮播、OLTP管理界面、聊天室。聊天室程序则体现了VueHTML5技术的...
  • vue单页面和多页面优缺点

    千次阅读 2019-12-20 14:18:48
    开场:在项目中,单页面应用和多页面应用这两个是必不可少的,当然公司面试时只要简历上有写会vue这个问题十有八九也会提及,今天就重点说一下这个两个概念、使用、及优缺点。。。 单页面应用(spa) 概念:只有一...
  • 分享视频教程——轻量级MVVM框架Vue.js快速上手(MVVM、SEO单页面应用、SSR服务器端渲染、Nuxt.js) 本系课程,主要分为两部分完成。第一部分:掌握Vue.js设计规范的语法。 第二部分:通过一些实际的前端案例来强化...
  • vue单页面seo(prerender-spa-plugin,vue-meta-info)
  • 网页中单个页面如何做好SEO优化

    千次阅读 2014-01-08 09:30:20
    当然这里我们并不想谈及如何把内容做好,而是想谈下网页中单个页面如何做好SEO优化,同时又能提高用户体验,让用户更容易接受你的内容。 1,网页内容的长度 对于搜索引擎优化来说,理想的网页内容长度不能小于250...
  • 今天学习了简书上的一个单页面应用seo优化的方法。 前后端分离之后,前端各大框架展露头角完美的开发体验也带来了一些问题比如seo单页面应用相比之前的php,jsp的服务端渲染方式来说是一大不足。为了让我们的项目...
  • (设置vue 单页面meta info信息,如果需要单页面SEO,可以 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩。三大框架 Angular、Vue、React,可谓妇孺皆知。随着单页面应用的普及,人们在感受...
  •  单页面开发常用于webapp开发后台管理系统等。  优点:1用户体验好,流畅。  2因为单页面,所以对服务器的压力较小。  3可以在页面切换的时候加一些酷炫的动画效果。  4代码的复用度大。有利于后期的维护...
  • Vue单页面应用优化SEO之预渲染

    千次阅读 2018-12-06 14:06:50
    这里优化SEO重点说vue-cli框架,毕竟是spa项目,所以SEO十分不友好,原因在于它自身并不是静态html,而是由js动态生成的(通过文档碎片劫持的方式以及Object.defineProperties等方法,有兴趣可以去研究研究vue的原理)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,794
精华内容 10,317
关键字:

seo单页面和多页面