码迷,mamicode.com
首页 > 其他好文 > 详细

SPA单页面优缺点

时间:2019-08-03 18:48:23      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:服务端   web   应用   div   避免   缺点   成都   架构   代码   

 

SPA:概念
spa指的是single page application 是一种特殊的 Web 应用,就是只有一张Web页面的应用, 它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。但是,对单页应用来说模块化的开发和设计显得相当重要。
优点:
1. 良好的交互体验,不刷新,减少 请求  数据ajax异步获取 页面流程;用户体验好、快,内容的改变不需要重新加载整个页面
             前端进行的是局部的渲染,避免了不必要的跳转和重复的渲染
2.前后端分离,前端负责view,后端负责model,各司其职; 架构清晰
3.减轻服务端压力
             服务器只需要提供数据,不需要管前端的展示逻辑和页面合成,提高了 性能
               SPA应用中服务器可以先将一份包含静态资源(HTML CSS JS等)的静荷数据(payload)发送给客户端,之后客户端只需要获取渲染页面或视图数据即可,
4.共用一套后端程序代码,设配多端
         不用修改后端程序代码就可以同时适配用于web界面、手机、平板等多种客户端;无需考虑兼容
5.可以缓存较多数据,减少服务器压力
缺点:
1. 首次加载时间过长
         为实现单页Web应用功能及显示效果,需要在加载页面时将js、CSS统一加载,部分页面按需加载。
2. SEO(搜索引擎优化)难度高  
           由于整个页面中网页中没有html,不利于 SEO搜索引擎抓取,
3.页面复杂度提高很多,复杂逻辑难度成倍,开发难度较高
         由于后端只提供数据而不再管前端的展示逻辑和页面合成,所以这些展示逻辑和页面合成都需要在前端进行编写(前进、后退等),所以会大大提高页面的复杂性和逻辑的难度
 
解决办法1.:VUE  SSR  只是解决SEO问题;
解决方法2.:路由图片、懒加载、js按需加载、使用cdn、js放在body后边、压缩代码、移除console 、debugger;
                   异步组件(const  aa=resolve =>require([‘../xxx/xx‘]),resolve)
     修改webpack配置 、添加登录专用的router配置   
 

SPA单页面优缺点

标签:服务端   web   应用   div   避免   缺点   成都   架构   代码   

原文地址:https://www.cnblogs.com/captainMforlife/p/11295774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!