zoukankan      html  css  js  c++  java
  • 单页应用(SPA)简介

    单页站点优劣

    单页站点的优势主要有三点     

    传输数据少

    单页站点的重点是局部刷新,因此每次更新,传输的数据少,减少后端压力,甚至对于完全前后端分离的SPA应用,只需要传输少量json数据即可。这一点在移动端显得尤为重要,许多应用前端代码并不会频繁更新,完全可以由前端直接缓存起来,每次使用只需与后端交互少量数据,这样既省流量也能让用户获得接近native的体验

    服务可不中断

    一些特殊网站,如音乐播放、IM聊天等,不希望因为页面全部重载造成服务中断。单页应用因为局部刷新,可以将这些服务放置在刷新范围之外,持续提供服务

    前后端开发更规范

    前端也可按照MVC的模式更好的模块化开发,而后端开发仅仅只需要开发数据操作接口,对前后端开发而言都是一种解放
     
    但单页站点也带来了一些新的问题,比如

    首次加载数据大耗时长

    特别是目前基于angular或者react的纯前后端分离的SPA,结合一些javascript方言,编译出来js相当的大,笔者曾在内网亲眼目睹10M级别的js文件,即便以内网的网速首次打开也需要3秒左右。为每个模块单独编译js是种办法,但实际操作会可能发现,随着项目越做越大,拆分成独立模块编译的成本会越来越大,最终不得不委曲求全整站使用一个js,除非从一开始就有良好的规范限制。

    极差的SEO(搜索引擎优化)

    众所周知,通过请求url即可获取到大量页面正文文本的页面是对搜索引擎最为友好的,虽然现在的爬虫已经具备解析运行页面js脚本索引动态内容的能力,但是每个网站千奇百怪,爬虫需要考虑触发什么事件、按什么顺序触发才能获取更多内容,索引动态内容的难度要远远大于索引静态内容。而目前主流的单页应用,几乎都是以前端js模板引擎来渲染html页面数据,直接通过url获取到的内容极少,这对搜索引擎非常不友好。SEO最差的单页应用可能仅仅只有首页能够被搜索引擎收录。这成了制约单页应用发展的一大障碍,即便现在又方案可以提高收录,但效果还是不好

    导航需要人为处理

    浏览器对div以及早期浏览器对iframe都不记录历史记录,因此需要开发对浏览器的前进后退做实现,通过修改hash或者history API来实现前进后退(后面会提到)

    单页应用的实现方式

    笔者了解到的,目前主要两种实现方式

    iframe

    其一,使用iframe的优点之一就是开发简单,目前的浏览器都已经对iframe url发生修改产生历史记录。
    其二,除了响应式问题的兼容性不好之外(也正因此iframe很不适合用在移动端),iframe作为使用多年的浏览器技术之一,在许多方面的兼容性要好许多,也是一些新技术在低版本浏览器上不可用时的替代解决方案,如contentEditable。
    其三,iframe与父文档相对独立,可以不受父文档的影响,想必这也是目前一些网站(网易云音乐,QQ空间,各大邮箱)继续使用iframe的主要原因。

    ajax+div+historyapi

    这种方式实现要更复杂,开发要自己实现url管理,以达到前进、后退跳转等能力,不过目前都已经有成熟的路由库可以使用,另外基于div模式的SPA,开发需要考虑全局对局部的影响,包括css、事件等。这种方式的优点是刷新要更轻量,js库和css样式在首次加载即可,局部页面可以只加载少量的数据,并且基于div响应式效果在移动端要更好。因此这也成了目前流行的前端框架angular、react等选用的方案。
    欢迎广大前端爱好者点评,一起前端的世界里遨游!
  • 相关阅读:
    [转]面向对象的三个基本特征
    C#验证Email
    天气预报
    【原】c#实现数字金额转换成大写金额
    C#发送Email
    DIV 显示最上层
    ArrayList 与 String[] 之间的转换
    Flex与.NET互操作(五):FileReference+HttpHandler实现上传/下载
    Flex与.NET互操作(三):基于WebService的数据访问(下)
    Flex与.NET互操作(六):Flex和.NET协同开发利器FluorineFx
  • 原文地址:https://www.cnblogs.com/liudm/p/7172359.html
Copyright © 2011-2022 走看看