Fork me on GitHub

什么是单页应用?它的优缺点?其缺点的解决方案是什么?

一、什么是单页应用?
从字面上来理解:
单页面应用(SPA--------single page application),一个web项目只有一个页面(即一个HTML文件);一个项目的所有页面的所有内容被分成了很多的小块(即组件),可以重复利用的,可以任意调整的组件,每个组件就是一个独立的部分(包括html,css和javascript代码)。

从使用的过程来理解:
单页面应用指一个系统只加载一次资源,然后下面的操作交互、数据交互是通过router、ajax等来进行,页面并没有刷新,页面只在最开始前刷新一次。

二、单页应用的优缺点
要说单页应用的优点之前,得提一下多页应用的缺点,因为将它俩进行比较,更容易理解。
多页应用就是以前传统的web开发。有了单页面应用,才把以前的传统web开发叫作多页面应用。
多页面应用的缺点:每次进入新的页面,都需要向服务器发送请求,即需要整个页面的所有代码。而且,多次操作后,再次进入该页面时,还得再次请求。不但浪费了网络流量,更重要的是有延迟,用户友好性,用户体验不好。

1.优点
而单页应用则是一次性把web应用的所有代码(HTML,JavaScript和CSS)全部请求过来,有时候考虑到首屏加载太慢会按需加载。这样一来,以后用户的每一个动作都不会重新加载页面(即不用再问服务器要页面的HTML,css和js代码),取而代之的是利用 JavaScript 动态的变换HTML的内容(这不需要和服务器交互,除非数据是动态,那么只需要问服务器要数据即可)。

单页应用优点的小小总结:

1.分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,减轻服务器压力,服务器只用出数据就可以,而且不会把前后端的逻辑混杂在一起;

2.API共享,后端API通用化,服务如果是多端的(浏览器端、Android、iOS、微信等),单页应用的模式便于你在多个端共用 API,可以显著减少服务端的工作量;

3.用户体验好、快,内容的改变不需要重新加载,提升了用户体验;

4.前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整。

2.缺点
单页应用缺点的小小总结:

1.首次加载耗时较多,需加载大量的资源
2.导航不可用,由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能
3.对搜索引擎(SEO)不友好
原因:单页应用实际是把视图(View)渲染从Server交给浏览器,Server只提供JSON格式数据,视图和内容都是通过本地JavaScript来组织和渲染。而搜索搜索引擎抓取的内容,需要有完整的HTML和内容(搜索引擎只认识html里的内容,不认识js的内容)单页应用架构的站点,并不能很好的支持搜索,会导致单页应用做出来的网页在百度和谷歌上的排名差。

 

三、单页应用缺点的解决方案
1.按需加载:按照当前呈现的不同页面加载不同的文件,而不是最开始就把所有文件都加载出来,从而避免首屏加载很慢。
当首屏加载完毕后,设备&网络处于空闲状态,可以对其他路由组件进行预加载,以便提升页面切换性能。
根据路由拆分减少初始加载体积,利用异步加载方式,在路由注册时提供异步拉取组件的方法,仅在需要进入对应路由时,对应组件才会被加载进来。

2.缓存+懒加载:有一些方法可以加快单页应用的初次加载速度,比如采用多项缓存措施、需要时再加载某些模块(懒加载)

3.配置好路由信息:通过记录浏览过的历史路由信息,可以很好的记录或历史查看过的界面,有效解决导航不可用的问题

4.用 #!号代替#号:搜索引擎抓取页面首先要遵循http协议,可是#不是协议内的内容。而实际上也是这样,我们没有见过搜索引擎的搜索结果中,哪一条记录可以快速定位到网页内的某个位置的。解决的方法是用 #!号代替#号,因为谷歌会抓取带有#!的URL。我们可以解决ajax的不被搜索引擎抓取的问题。

posted @ 2021-04-28 21:58  Kaicy  阅读(4144)  评论(0编辑  收藏  举报