前端SPA(单页面应用)性能优化,交互体验加成!入门知识_性能小白基础

SPA简介:单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA

前端SPA(单页面应用)性能优化,交互体验加成!入门知识

SPA简介:

单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换 HTML(采用的是 div 切换显示和隐藏),从而实现UI与用户的交互。在 SPA 应用中,应用加载之后就不会再有整页刷新。相反,展示逻辑预先加载,并有赖于内容Region(区域)中的视图切换来展示内容。

前端SPA(单页面应用)性能优化,交互体验加成!入门知识_性能小白基础

要实现单页面应用,现在已经有很多现成的框架了,它们都是很全面的开发平台,为单页面应用开发提供了必需的页面模板、路径解析和处理、后台服务 api 访问、 DOM 操作等功能。

前端SPA(单页面应用)性能优化,交互体验加成!入门知识_性能小白基础

1. 优点

1) 有良好的交互体验

能提升页面切换体验,用户在访问应用页面是不会频繁的去切换浏览页面,从而避免了页面的重新加载;

2) 前后端分离开发

单页Web应用可以和 RESTful 规约一起使用,通过 REST API 提供接口数据,并使用 Ajax 异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分;

3) 减轻服务器压力

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

4) 共用一套后端程序代码
不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端;

2. 缺点:

1) SEO难度较高

由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧;

2) 前进、后退管理

由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理,当然此问题也有解决方案,比如利用URI中的散列+iframe实现;

3) 初次加载耗时多

为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理;

3. 性能优化

1) 加载优化

在SPA中,通常一开始就会加载所有必需的代码(HTML,JavaScript和CSS),有时候考虑到首屏加载太慢会按需加载,按需加载就是按照当前呈现的不同页面加载不同的文件,而不是最开始就把所有文件都加载出来,从而避免首屏加载很慢。

当首屏加载完毕后,设备&网络处于空闲状态,可以对其他路由组件进行预加载,以便提升页面切换性能。

根据路由拆分减少初始加载体积,利用异步加载方式,在路由注册时提供异步拉取组件的方法,仅在需要进入对应路由时,对应组件才会被加载进来。 

  • 初次加载的速度

单页应用的第一页加载会比基于服务器的应用慢。这是因为首次加载必须先拿到框架和应用程序的代码,再在浏览器中呈现所需的视图。基于服务器的应用程序只需将所需的HTML推送到浏览器,从而减少了延迟和下载用时。

  • 加快页面加载速度

有一些方法可以加快单页应用的初次加载速度,比如采用多项缓存措施、需要时再加载某些模块(懒加载)。

  • 页面生命周期

单页应用在初始页面加载时被完全加载,然后页面区域被替换或更新为按需从服务器加载的新页面片段。为避免过度下载未使用的功能,单页应用通常会逐渐下载更多内容,如所需要的功能、页面的一小块,或者完整的一页。

前端SPA(单页面应用)性能优化,交互体验加成!入门知识_性能小白基础

2) SEO优化

由于我们在处理单页应用的时候页面是不刷新的,所以会导致我们的网页记录和内容很难被搜索引擎抓取到。搜索引擎抓取页面首先要遵循http协议,可是#不是协议内的内容。而实际上也是这样,我们没有见过搜索引擎的搜索结果中,哪一条记录可以快速定位到网页内的某个位置的。解决的方法是用 #!号代替#号,因为谷歌会抓取带有#!的URL。(Google规定,如果你希望Ajax生成的内容被浏览引擎读取,那么URL中可以使用”#!”(这种URL在一般页面一般不会产生定位效果)),这样我们可以解决ajax的不被搜索引擎抓取的问题。在vueJs里面,我们可以看到作者就是这样做的。

3) 前进后退功能优化

配置好路由信息,通过记录浏览过的历史路由信息,可以很好的记录或历史查看过的界面,也可以独立写个足迹功能实现。

4. 体验优化

1) 构建骨架图

SPA 首屏加载面临较长时间白屏,骨架图是一个完美的”缓兵之计”,相当于加载到下个界面时先把下个页面的雏形加载出来,再加载其余的组件,做到缓冲作用,骨架图对用户体验有极大的提升:

  • 快速展示

配合 PWA 首屏缓存,骨架图可实现瞬间加载&展示,首屏视觉上有冲击性地提升;

  • 稳定加载

消除页面初始加载因多次重绘&资源加载导致的”抖动”需要注意的是,骨架图应尽量保持足够小巧与简单,以确保不会严重影响页面后续加载;

2) 页面切换

无论如何优化性能加载,在页面切换时候依旧需要获取页面数据,若处理不好,可能会在数据返回前有短暂的不友好”空白”。通过以下方式可以很好处理这个问题:

  • 切换前:

在确保组件&数据加载完毕前,可保证页面可交互性,减少用户阻塞感;

  • 转场动画:

在大多数原生应用,转场动画属于标配,即时组件&数据已经完全加载,在切换至新页面瞬间,依旧需要页面渲染时间,这段时间可能导致页面短暂空白或者”视觉阻塞”,通过转场动画时间,可以很好地缓解这个问题,大多数页面保证在转场动画完毕之后依然渲染完毕。

 

小结

单页面应用不是一个新兴的技术,对于很多应用场景可以提供比传统网站更好的用户体验,同时对开发效率,服务器压力等,都有很好的表现,另外,前端的框架,包括比如AngularJS、vue.js、Backbone.js等,SEE2.0就是采用angularJS框架实现的单页面应用设计的项目。

海计划公众号
(0)
上一篇 2020/04/03 19:29
下一篇 2020/04/03 19:29

您可能感兴趣的内容

  • 算法工程师的危机基础入门_算法入门基础

    9月20号讯飞AI同传语音造假的新闻刷爆科技圈,科大讯飞股价应声下跌3.89%(不是65.3%,标题党文章害死人)。 吃瓜群众纷纷感慨,有多少人工,就有多少智能。AI概念在2015年起就红得发紫,不论是送外卖,搞团购,卖车,或是推荐莆田医院的,是个公司都会标榜自己是搞人工智能的。在21世纪的第二个十年,计算机专业相关的学生不说自己是搞AI算法的,同学聚会都抬

    2020/04/03
  • H5的sessionStorage和localStorage指南教程_存储小白攻略

    1) H5 新增的 sessionStorage 和 localStorage 的区别sessionStorage 和 java 的 session 差不多,可以短时间存储信息,电脑浏览器常用sessionStorage 存储用户登录信息(个人理解)localStorage 可以永久保留用户信息,不用每次都登录,常用于APP 2)sessionStorage

    2020/03/24
  • Vue基于snabbdom做了哪些事攻略教程_vue入门百科

    前言之前有简单看过 Vue patch 部分的源码,了解了是基于 Snabbdom 库实现的。最近想详细了解下 Vue 处理 vnode patch 的整个过程,想知道它在 Snabbdom 之上做了哪些事情?所以带着这个问题,写了这篇文章来记录。Snabbdom 做了哪些事?A virtual DOM library with focus on simpl

    2020/03/29
  • ajax设置header头部之后造成跨域的解决方案菜鸟教程_ajax基础教程

    ajax设置header头部之后造成跨域的解决方案菜鸟教程 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 J…

    2020/03/19
  • javascript难点是什么?菜鸟教程下载_js知识小白攻略

    javascript难点是什么?下面本篇文章就来给大家介绍一下10个JavaScript难点,感兴趣的小伙伴们可以参考一下,希望对大家有所帮助。1、立即执行函数立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作:(f

    2020/03/24
  • Django如何与ajax通信?基础入门_django入门教程

    示例一文件结构假设你已经创建好了一个Django项目和一个App,部分结构如下:mysite
    myapp|___views.py|___models.py|___forms.py|___urls.py
    templates|___ajax_test.html示例代码ajaxTest.html

    something interesting

    2020/03/26
  • san菜鸟教程San – 百度新造的MVVM组件框架

    san基础入门 官方网址:https://ecomfe.github.io/san/ GitHub:https://github.com/ecomfe/san 简介描述:San &…

    2020/03/05
  • 前端性能优化之重排和重绘入门攻略_优化零基础入门

    来源:https://segmentfault.com/a/1190000016990089作者:Parkeeers前言,最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》,今天写的文章从“老生常谈”的页面重绘和重排入手,去探究这两个概念在页面性能提升上的作用。一.重排 & 重绘有经验的大佬对这个概念一定不会陌生,“浏览器输入URL发

    2020/04/03
  • javascript如何循环遍历对象?入门基础知识_遍历菜鸟教程下载

    在JavaScript中有多种循环遍历对象的方法,下面本篇文章就来给大家介绍一下使用JavaScript循环遍历对象的方法,希望对大家有所帮助。1、使用for 循环for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历。let arr = [1,2,3];
    for (let i=0; i<arr.length; i++){console.log

    2020/03/22
  • CSS中zoom和scale的差异基础入门_区别使用说明

    先说原理zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。例子
    div {width:300px;height:100px;border

    2020/03/22
  • AndroidUX入门教程_安卓设备UI设计欣赏及文章

    AndroidUX基础入门 官方网址:http://androidux.com/ 简介描述:安卓设备UI设计欣赏及文章 The first android app pattern …

    2020/03/06
  • HTML中name、id、class的区别介绍使用教程_区别基础指南

    在一个页面中,有许多的控件(元素或标签)。为了更方便的操作这些标签,就需要给这些标签标识一个身份牌。在HTML中有name、id、class等属性区分一个元素,下面我们就来看一下这几种属性的区别。1. name指定标签的名称。1.1 格式1.2 应用场景①form表单:name可作为转

    2020/03/20
  • 移动端调起软键盘导致 position:fixed 偏移小白基础_键盘使用教程

    1. 问题描述app内打开H5页面,页面包含input输入框,点击input调起软键盘,输入完成点击下方提交按钮弹出toast时,会出现t toast 跳动的现象,其中:toast采用 position: fixed 进行固定定位2. 分析原因关于 position: fixed首先来看,MDN 中对 position: fixed 的说明:不为元素预留空间

    2020/03/24
  • vue中的watch的用法入门基础知识_监听小白基础

    在vue中,使用watch来响应数据的变化。下面代码是watch简单的用法:

    export default {data(){r

    2020/03/30
  • Js对象继承基础指南_继承菜鸟指南

    JavaScript对象继承的方法有很多,这里总结一下几种比较常用的方法。现在有一个”动物”对象的构造函数。function Animal(){this.species = “动物”;
    }
    Animal.prototype.voice = function(){console.log(‘voice’);
    }还有一个”猫”对象的构造函数。function Ca

    2020/03/26
  • JSON.stringfy()的使用小白攻略_json入门攻略

    JSON.stringify() 语法 JSON.stringify(value[, replacer[, space]])value 被序列化为字符串的对象replacer 根据类型不同,其行为也不一样。如果是一个函数类型,则相当于是一个filter,可以对序列化的键值对进行加工处理;如果是一个数组,则只有符合数组中名称的key才会被输出space 如果为

    2020/03/23