SPA首屏加载问题

阅读目录

1. 单页面应用(SPA)与多页面应用(MPA)
   • 多页面应用
   • 单页面应用
2. 如何解决首屏加载速度慢的问题？
   • 原因
   • 解决方案

 

---

回到顶部

单页面应用(SPA)与多页面应用(MPA)

多页面应用

　　多页面应用是由多个完整的页面构成，每一次页面跳转都需要向服务器请求一个新的页面。每次请求的资源都是不公用的，有可能导致代码冗余。

 

• 页面切换缓慢

　　　　由于每次跳转都要发送一次http请求，容易造成页面的卡顿

• 首屏加载块

　　　　由于多页面应用将需求分割成多个页面，资源文件的体积相比之下更小，首次请求时返回的主页面只需要包含该页面所需要的资源，加载速度更快；

• 搜索引擎优化效果好

　　　　搜索引擎需要根据页面内容给网页设置权重，从而进行排名，而多页面应用的每个页面都单独放在一个HTML文档中，有利于搜索引擎识别文档内容。

 

单页面应用

　　单页面应用是由一个主页面和多个页面片段组成，利用JavaScript来实现页面片段的跳转，实现页面的局部刷新。这样就无需多次向服务器进行http请求，减轻服务器压力。同时，请求的资源是每个页面片段都可共用的。

 

• 页面切换块

　　　　页面切换时无需发送http请求，实现页面的局部刷新。

• 首屏加载速度慢

　　　　单页面应用需要一次性把所有代码（HTML、JavaSrcipt和CSS）全部请求过来，导致首屏加载速度慢。

• 搜索引擎优化差

　　　　因为单页面应用中页面的切换时需要通过JavaScript渲染，导致搜索引擎无法识别这部分内容，不利于网页排名。

 

 

回到顶部

如何解决首屏加载速度慢的问题？

原因

• 网络延时问题；
• 资源文件体积过大；
• 加载JavaScript代码导致渲染内容阻塞；

 

解决方案

1.路由懒加载

　　将不同路由对应的组件文件分割成不同的代码块进行打包。当某个路由被访问时才去加载对应代码块。

2.静态资源本地缓存

　　使用HTTP缓存或localStorage对某些不会发生改变的静态资源进行本地缓存，下次访问时就减少了这部分的请求和加载时间。

3.代码压缩与图片资源压缩

4.服务端渲染(SSR)

5.内联首屏关键CSS样式，通过CSS内联可以将CSS解析的时间提前，而不是像外部引入的CSS文件那样，当遇到外部CSS文件时才开始加载并解析；