关于前端渲染以及优化思路

前端渲染 =》将后端返回的数据绑定到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开发就是多页面应用：每次进入新页面都需要请求服务器（即刷新整个页面代码，多次操作后进入该页面，还是得请求，浪费网络资源，对服务器压力大，加载还慢，交互体验不好）