ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

SPA首屏加载问题

2022-08-05 15:00:08  阅读:143  来源: 互联网

标签:请求 首屏 搜索引擎 应用 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有