前端渲染 =》将后端返回的数据绑定到html上去展示,本质是字符串的解析替换

1 客户端渲染 csr,vue,react,angular ,需要等待客户端的js执行完成

交互体验好

首屏加载好

seo不行

2 服务端渲染 ssr 后端把数据填充好,直接返回给客户端加载出来即可(asp,php,jsp早期技术,后期技术模板引擎(art-template))

在服务端把数据结合模板渲染成html

首屏加载快

seo好

前后端耦合严重

无法发挥前端优秀生态

对服务端压力大,用户体验一般

3 同构渲染 麻烦

客户端发起请求-》服务端渲染首屏内容+生成客户端SPA相关资源-》服务端将生成的首屏资源发送给客户端-》客户端直接展示-》首屏中的SPA相关资源执行后会激活客户端Vue-》之后客户端所有交互都有客户端的SPA处理

关于SPA单页应用=》一个web项目就只有一个页面(一个html文件),所有的内容都被分成了很多小块(也就是组件,可以重复利用,可以任意调整组件,每个组件就是一个独立的部分(包括html,css,js))

使用过程理解:单页面指一个系统只加载一次资源,探后下面的操作交互,数据互通,通过router,ajax等技术来进行,页面并没有刷新,页面只在最开始前刷新一次,如watch监控平台就是单页应用

优点:一次加载所有代码,利用js动态变换html内容,除非数据是动态的才需要和服务器要数据,其他交互都不需要服务器参与。分离前后端关注点(前端负责界面展示,后端负责存储和计算),减轻服务器压力,api共享,后端api通用化

如果是多端应用,则可共用,显著减少服务端工作量,用户体验好,页内交互快,前端组件化,代码结构和组织方式规整

缺点:首次加载耗时较长,需要加载大量资源(建议加入缓存),按需加载,先加载首屏文件,等设备&网络处于空闲态再对其他路由组件进行预加载,提升页面切换性能,根据路由拆分初始加载体积,利用异步加载方式,在路由注册时提供异步拉取组件的 方法,仅在需要进入对应路由时,对应组件才会被加载进来

缓存+懒加载:多项缓存,按需加载(懒加载)可优化首屏加载时长

路由配置:通过历史路路由信息,解决导航不可用问题

用#!代替#号: 解决ajax不被搜索引擎抓取的问题

导航不可用,由于单页web应用在一个页面中显示所有内容,所以不能使用浏览器的前进后退功能,对于搜索seo不友好(实际是把渲染工作交给客户端了,需要客户端执行

js来组织和渲染,而搜索引擎抓取内容需要有完整的html和内容的)

传统的web开发就是多页面应用:每次进入新页面都需要请求服务器(即刷新整个页面代码,多次操作后进入该页面,还是得请求,浪费网络资源,对服务器压力大,加载还慢,交互体验不好)