单页应用及多页应用

一:是什么

  多页面应用:一个项目是由多个完整的html页面组成

  单页面应用:一个项目中只有一个完整的html页面,其他的都是部分html片段组成。

二:渲染方式

  多页面:页面跳转,后台服务器返回一个新的html文档,页面跳转所有资源都要重新加载

  单页面:页面跳转,局部刷新,不会重新加载全部资源。片段切换快,容易实现

二:问题:

  多页面:页面跳转切换,会出现卡顿空白问题,不容易实现切换动画。切换慢

  单页面:首屏时间慢,SEO差;单页应用的首屏时间慢,首屏时需要请求一次html,同时还要发送一次js请求,两次请求回来了,首屏才会展示出来。相对于多页应用,首屏时间慢。
SEO效果差,因为搜索引擎只认识html里的内容,不认识js的内容,而单页应用的内容都是靠js渲染生成出来的,搜索引擎不识别这部分内容,也就不会给一个好的排名,会导致单页应用做出来的网页在百度和谷歌上的排名差。

三:特性:

  多页面:

    (1)首屏时间快=》访问页面时,服务器只需要返回一个html,页面就会展示出来,这个过程只经历一盒HTTP请求,所以页面展示速度快

    (2)利于SEO=》SEO:根据网页内容给网页权重,搜索引擎可以识别html内容的,每个页面所有内容都放在html中,所以排名效果好

  单页面:

    (1)页面切换快=》页面每次切换跳转时,并不需要做html文件的请求,这样就节约了很多http发送时延,我们在切换页面的时候速度很快。

四:单页面解决seo

  服务器端渲染技术(我是SSR),通过这些技术可以完美解决这些缺点

单页面VS多页面


mm


多页应用模式MPA


单页应用模式SPA


应用构成


由多个完整页面构成


一个外壳页面和多个页面片段构成


跳转方式


页面之间的跳转是从一个页面跳转到另一个页面


页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开壳页面


跳转后公共资源是否重新加载




URL模式


http://xxx/page1.html 和 http://xxx/page2.html


http://xxx/shell.html#page1 和 http://xxx/shell.html#page2


用户体验


页面间切换加载慢,不流畅,用户体验差,特别是在移动设备上


页面片段间的切换快,用户体验好,包括在移动设备上


能否实现转场动画


无法实现


容易实现(手机app动效)


页面间传递数据


依赖URL、cookie或者localstorage,实现麻烦


因为在一个页面内,页面间传递数据很容易实现(这里是我补充,父子之间传值,或vuex或storage之类)


搜索引擎优化(SEO)


可以直接做


需要单独方案做,有点麻烦


特别适用的范围


需要对搜索引擎友好的网站


对体验要求高的应用,特别是移动应用


搜索引擎优化(SEO)


可以直接做


需要单独方案做,有点麻烦


开发难度


低一些,框架选择容易


高一些,需要专门的框架来降低这种模式的开发难度

    

原文地址:https://www.cnblogs.com/jcxfighting/p/11664305.html

时间: 2024-08-08 12:43:49

单页应用及多页应用的相关文章

浅谈单页应用和多页应用——Vue.js向

浅谈单页应用和多页应用--Vue.js向 多页面 多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用. 在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写. 页面跳转=>返回HTML,优点:首屏时间快,SEO效果好,缺点是页面切换慢. 首屏时间快?访问页面,服务器只需要返回一个HTML文件,这个过程就经历了一个HTTP请求,请求响应回来,页面就能被展示出来. SEO(搜索引擎排名)效果好?搜索引擎能识别HTML的内容,根据内容进行排名. 页面切换慢:每一次切换

PHP.26-TP框架商城应用实例-后台2-商品列表页-搜索、翻页、排序

商品列表页 1.翻页 控制器GoodsController.class.php添加方法lst(),显示列表页 在商品模型GoodsModel.class.php类中添加search方法 /** *实现翻页.搜索.排序 * */ public function search($perPage = 5) //$perPage控制显示条数 { /***********翻页***********/ //取出总的记录数 $count = $this->count(); //生成翻页类的对象 $pageOb

WPF中ListBox ListView数据翻页浏览笔记(强调:是数据翻页,非翻页动画)

ListBox和ListView在应用中,常常有需求关于每页显示固定数量的数据,然后通过Timer自动或者手动翻页操作,本文介绍到的就是该动作的实现. 一.重点 对于ListBox和ListView来讲,后台绑定的ItemSource绑定的一般都是List<T>格式,而List<T>有个方法是Take和Skip,分别意思是取List部分和跳过List部分. 取数据的格式是:List.take().Skip(); 二.话不多说,实例说话(后面会附有该例子链接,仅供参考) (1)Xam

NVelocity分页时判断首页前一页后一页末页的详细

共$Data.TotalCount个/$Data.PageNum页 #if($Data.PageNum==1) <span class="disabled"> << </span> <span class="disabled"> < </span> #else <a href="StuList.ashx?PageNum=1"> << </a> #

C#生成PDF页脚第几页共几页

C#生成PDF页脚第几页共几页 分类: .net 2012-06-06 21:04 2842人阅读 评论(3) 收藏 举报 c#stringfontsfileheaderwindows 我在网上找了好久都没找到在封面显示生成的PDF总页数,然后自己摸索着做出来,分享给大家. 我用的是这个组件来实现的.net生成PDF. 首先创建一个工程,然后引用这个组件 然后创建一个页面,添加一个 按钮 然后开始写后台了..不多说,直接贴代码. [csharp] view plaincopy protected

GridView分页(第一页、上一页、下一页、最后页、当前页数/总页数)

<PagerTemplate>                <table width="100%">                    <tr>                        <td width="75%">                            <asp:ImageButton ID="imgBtnFirst" runat="server&qu

启动页分为4页,最后一页有一个按钮,点击跳转到主页面

代码效果为:启动页分为4页,最后一页有一个按钮,点击跳转到主页面. 上代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UIScrollView * sv = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)]; sv.contentSize = CGSizeMake(320

MVC的布局页,视图布局页和分布页的使用

一,结构如下图 二,布局页和视图布局页 1>使用方法一 _ViewStart.cshtml @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>视图布局页_ViewStart.cshtml</h2> _Layout.cshtml <!DOCTYPE html> <html> <head> <meta name="viewport" content

基于 MVVM ,用于快速搭建设置页,个人信息页的框架

写一个小小轮子- 写UITableView的时候,我们经常遇到的是完全依赖于网络请求,需要自定义的动态cell的需求(比如微博帖子列表).但是同时,大多数app里面几乎也都有设置页,个人页等其他以静态表格为主的页面. 而且这些页面的共性比较多: 1. 大多数情况下在进入页面之前就已经拿到所有数据. 2. cell样式单一,自定义cell出现的几率比较小(几乎都是高度为44的cell). 3. 多数都分组. 因为自己非常想写一个开源的东西出来(也可以暴露自己的不足),同时又受限于水平,所以就打算写

GridView自定义分页样式(上一页,下一页,到第几页)

今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1). 图(1)GridView分页效果 自定义GridView的分页样式,使用的是GridView的  <PagerTemplate>元素.我们先看这段分页代码. 1 <PagerTemplate> 2 <br /> 3 <asp:Label ID="lblPage" runat="s