zoukankan      html  css  js  c++  java
  • 单页面应用程序(SPA)的优缺点

      我们通常所说的单页面应用程序通常通过前端框架(angular、reactvue)进行开发,单页面应用程序将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互。由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。

    一、优点

    1.良好的交互体验

      单页应用的内容的改变不需要重新加载整个页面,获取数据也是通过Ajax异步获取,没有页面之间的切换,就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象,页面显示流畅,web应用更具响应性和更令人着迷。

    2.良好的前后端工作分离模式

      后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端。

    3.减轻服务器压力

      单页应用相对服务器压力小,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍。

    二、缺点

    1.首屏加载慢

    • 如果不对路由进行处理,在加载首页的时候,就会将所有组件全部加载,并向服务器请求数据,这必将拖慢加载速度;
    • 通过查看Network,发现整个网站加载试讲长达10几秒,加载时间最长的就是js、css文件和媒体文件及图片

      解决方案:

    • Vue-router懒加载

        Vue-router懒加载就是按需加载组件,只有当路由被访问时才会加载对应的组件,而不是在加载首页的时候就加载,项目越大,对首屏加载的速度提升得越明显。

    • 使用CDN加速

        在做项目时,我们会用到很多库,采用cdn加载可以加快加载速度。

    • 异步加载组件

        这里可以参考别人的介绍(https://segmentfault.com/a/1190000012138052

    • 服务端渲染

        服务端渲染还能对seo优化起到作用,有利于搜索引擎抓取更多有用的信息(如果页面纯前端渲染,搜索引擎抓取到的就只是空页面)

    2.不利于SEO

      seo 本质是一个服务器向另一个服务器发起请求,解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说,搜索引擎的基础爬虫的原理就是抓取url,然后获取html源代码并解析。 如果一个单页应用,html在服务器端还没有渲染部分数据数据,在浏览器才渲染出数据,即搜索引擎请求到的html是模型页面而不是最终数据的渲染页面。 这样就很不利于内容被搜索引擎搜索到。

      解决方案:

    • 服务端渲染

        服务器合成完整的 html 文件再输出到浏览器

    • 页面预渲染
    • 路由采用h5 history模式

    3.不适合开发大型项目

      大型项目中可能会涉及大量的DOM操作、复杂的动画效果,也就不适合使用Vue、react框架进行开发。

  • 相关阅读:
    转:不在同一个服务器上的数据库之间的数据操作(oracle/sql server的对比)
    即将来到: CSS Feature Queries (CSS特性查询)
    HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
    jQuery animate方法开发极客标签Logo动画融合效果
    Bootstrap3实现的响应式幻灯滑动效果个人作品集/博客网站模板
    无需编码开发快速设计互动式UI
    免费资源:Bootstrap开发的创意模板
    通过Intel XDK编写跨平台app(二)
    免费图标:30个食品相关的图标
    CSS中:before和:after选择器的用法
  • 原文地址:https://www.cnblogs.com/belongs-to-qinghua/p/11151054.html
Copyright © 2011-2022 走看看