SPA首屏加载问题
作者：互联网
单页面应用(SPA)与多页面应用(MPA)
多页面应用
多页面应用是由多个完整的页面构成，每一次页面跳转都需要向服务器请求一个新的页面。每次请求的资源都是不公用的，有可能导致代码冗余。
- 页面切换缓慢
由于每次跳转都要发送一次http请求，容易造成页面的卡顿
- 首屏加载块
由于多页面应用将需求分割成多个页面，资源文件的体积相比之下更小，首次请求时返回的主页面只需要包含该页面所需要的资源，加载速度更快；
- 搜索引擎优化效果好
搜索引擎需要根据页面内容给网页设置权重，从而进行排名，而多页面应用的每个页面都单独放在一个HTML文档中，有利于搜索引擎识别文档内容。
单页面应用
单页面应用是由一个主页面和多个页面片段组成，利用JavaScript来实现页面片段的跳转，实现页面的局部刷新。这样就无需多次向服务器进行http请求，减轻服务器压力。同时，请求的资源是每个页面片段都可共用的。
- 页面切换块
页面切换时无需发送http请求，实现页面的局部刷新。
- 首屏加载速度慢
单页面应用需要一次性把所有代码（HTML、JavaSrcipt和CSS）全部请求过来，导致首屏加载速度慢。
- 搜索引擎优化差
因为单页面应用中页面的切换时需要通过JavaScript渲染，导致搜索引擎无法识别这部分内容，不利于网页排名。
如何解决首屏加载速度慢的问题？
原因
- 网络延时问题；
- 资源文件体积过大；
- 加载JavaScript代码导致渲染内容阻塞；
解决方案
1.路由懒加载
将不同路由对应的组件文件分割成不同的代码块进行打包。当某个路由被访问时才去加载对应代码块。
2.静态资源本地缓存
使用HTTP缓存或localStorage对某些不会发生改变的静态资源进行本地缓存，下次访问时就减少了这部分的请求和加载时间。
3.代码压缩与图片资源压缩
4.服务端渲染(SSR)
标签：请求,首屏,搜索引擎,应用,SPA,页面,加载 来源： https://www.cnblogs.com/evil-shark/p/16554326.html