时下SPA单页应用如火如荼,对前端乃至后端开发都带来不小的冲击和变革。笔者整理了下笔记,决定写一下以前基于iframe做单页博客的一些经验方法。

对于单页应用,笔者没有找到最官方的定义。在笔者看来,在用户操作过程中,浏览器始终不会重载整个页面的web应用,便可以称为单页应用。这里不包括https://im.qq.com/这种宣传单页

例如coding.net、网易云音乐播放、QQ空间、移动端大量的react案例(比如手Q健康、公众号)等等

单页站点优劣

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

传输数据少

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

服务可不中断

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

前后端开发更规范

前端也可按照MVC的模式更好的模块化开发,而后端开发仅仅只需要开发数据操作接口,对前后端开发而言都是一种解放

 

但单页站点也带来了一些新的问题,比如

首次加载数据大耗时长

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

网友评论