B端和C端产品看中的优化

B端商业性项目和C端项目看中的用户体验有什么不同?

B端单页面系统感觉有一下几个特点:

  1. 偏向数据交互,逻辑性东西较多
  2. 用户的网络环境比较好,浏览器兼容相对优质
  3. 注重操作的流畅,单页面跳转迅速,不是太注重首屏速度
  4. 不注重SEO

针对这些特点我们做了

  • MVC模式编程,应对复杂逻辑
  • 整站Ajax交互
  • 前端自带路由(利用location.hash),解决前进后退问题
  • 开发组件,加大复用

那么在B端优化方面怎么做呢?
1.打包策略问题:

  • 利用浏览器并行加载的特性(4-8个之间)
  • 把必要加载的放到这个段里,主要 AMD Loader、css文件
  • js模块加载应尽可能将模块打包为浏览器可接受的最大并发数个文件。
  • 打包的文件大小 建议500K左右

2.文件合并:
一个页面的启动脚本,可能包括很多文件大致分下面4种:

1
2
3
4
5
6
7
8
9
1.特别大的库单独拥有自己的一个脚本,比如ECharts之类的图表库
2.UI控件库,包含基础UI控件和业务UI控件,合并为一个脚本。
3.MVC框架、页面基类、工具类、系统通用功能层等业务无关的逻辑合并为一个脚本。
4.一级页面的业务模块合并为一个脚本。
//注意的是,各启动脚本间不应该有任何一个模块被重复合并到多个脚本中。

单页面中一个路由页面相关会被打包在一起,比较典型的是将Controller、Model和View合并到Controller对应的文件中。

3.预加载判断(没实践经验,也是猜想的几个方案)

1
2
3
4
5
6
7
1.用户行为预测,如用户停留在某一个列表页面时时,根据其以往
的行为进行分析,很有可能进入新建的操作。
2.临近加载,如计算用户的鼠标轨迹来预测后续可能点击的按钮等
3.空闲加载,通过统一的请求管理,寻找网络空闲的时候来加载需
要的资源,从而不影响急需的资源的加载进度。

4.版本管理

1
2
3
4
5
//现在大部分版本管理,缓存策略 都是加MD5
1. 把不变的,或者不经常变的文件打包在一起
2. 把变动频率高的打包在一起
//这样就能更好的利用缓存了

C端页面感觉有一下几个特点:

  1. 看着展现速度
  2. 数据交互少要展现
  3. 响应时间、白屏时间都影响用户心情

我们这边尝试的方案

  • 想前后端分离,想SEO,不想要白屏

    • 增加了node做中间层,前端开发者搞模板
    • node层渲染数据,,直接给浏览器吐页面
  • 所有图片统统CDN

作者 [@sha Qihe]
QQ:330630770
2015 年 12月 1日