html5手机Web单页应用实践--起点移动阅读

一开始以hybrid形式做了一个android的小说阅读客户端，叫4G阅读。而后由于业务需求，要迅速实现纯手机html5 版的，所以就直接在原先客户端内内嵌的网页进行改版，快速实现以后在优化的过程中发现越改越多越改越多…

注意此web应用只支持android及iphone内的浏览器，及PC或mac上的chrome,safari,firefox等支持html5的浏览器。IE10以上浏览器

这算是试验版了吧，以前没这么弄过..

手机访问http://crapi.4gshu.com:8096/4g-read-qd/#index

先上图，有图有真像

文件结构及路由

HTML

Index.html

整个应用框架的基础，包含了头部，尾部HTML，及主要各个页面部分的容器(content-panel)

根据hash路由通过ajax方式加载对应的内容页再添加到对应的comtent-panel内

以下是主要内容模块(内容为html片段)

Index-c.html逛

Category-c.html分类

Rank-c.htm排行

Discovery-c.html发现

Channel-c.html男频，女频...

Search-c.html搜索

Bookshelf-c.html书架

Catalog-c.html 目录

CSS

编写css时使用了less，特别是在修改时，尤其的好用

Public.css 包含了大部分的应用样式

Idangerous.swiper.css 切换插件的样式文件

内容页的样式可以在自身页面内自行添加

Javascript

Avalon.js

在此处用这个MV*框架，主要是方便处理将json数据渲染到DOM上

Jquery.js

很想使用zepto之类的轻DOM框架，但最终还是选择了jquery2.0,原因是方便扩展插件，很多插件不兼容zepto，其实JS文件的大小远没有你想象的那么影响web应用的表现，其实css的渲染影响更大，血的教训啊。关于JS文件过大的问题，其实应用基本上是在3G或wifi情况下使用，你非要在2G环境下使用，那干麻不用WAP版...

Idangerous.swiper.js

非常强大的轮播插件，其实可以实现很多东西。所以选用它来实现轮播

Mango-decoupling.js

很好用的消息插件，用于程序中解耦设计，其消息机制也非常强大

Config.js

由于将这个应用分发到不同的渠道，而不同渠道又有一些不同的配置需求，所以用了config.js来配置一些属性

Core.js

整个框架通用JS的核心，包含了本地储存，通信，通用的事件与方法

为了方便实现，及减少JS文件数，各个内容模块的JS业务逻辑都直接写在各自的html片段中。内容模块在渲染完毕后应该向框架发送一个渲染完毕的消息，或执行框架提开放的渲染完毕API，比如“page_ready”,方便框架处理loading等全局的控制

本地存储

1、离线存储cloudary.appcache，尽可能的将css，js,image,及HTML代码片段文件都离线存储至本地。初次访问时会将所有相关文件都离线到本地，以后再次访问，会优先读取离线到本地的文件

2、Localstorage存储接口数据。开发过程中明显感觉到，后台提供的数据接口的速度明显影响了整个应用的表现，所以在初次访问动态数据接口时将使用localstorage将整个接口返回的数据存储到本地，以后再次访问时先优先读取本地的数据，然后后台会静默更新数据到localstorage内，由于应用没有那么高的实时性要求，所以此方案可行。

Hash路由

整个应用的内容模块content-panel其实是由hash路由来连起来的，构成了所谓的单面应用，即不刷新整个页面。一开始使用的是popstate来实现，结果发现在chrome浏览器下一进页面就会触发一次popstate事件，比较奇葩，这个问题是在应用完成后发现的，还好popstate事件是在core.js中进行过封装的，我就在封装处将popstate事件替换成了hashchange事件，所以说对外部的API还是要抱有不信任的态度，尽量进行封装分隔，万一发生改变，改起来也快。在加载不同的内容模块时，通过wndow.history的pushState和replaceState来实现hash值的改变，在一进页面时首先得把自身页面进行一次replaceState,将自身加入history队列，否则history队列会乱(一大坑啊，反正我以前没replaceState时是遇到过，怎么也管理不好队列)。

根据UI上的设计及功能的不同，我将路由分成了两类，

主页路由：

Index 逛

Category分类

Rank 排行

Discovery 发现

子页路由：

Channel频道

category-detail 分类详情

Topic 专题

Detail 详情

Search 搜索

Bookshelf 书架

Catalog 目录

关于路由的速度优化

1、很多内容模块打开过一次后再次打开时完全是不用再请求的，所以得判断是否打开过，打开过的应用再次打开时就不再请求对应的html片段了，直接显示之前请求下来的html片段，比如index,category,rank,discovery,topic,bookshelf,search这几个内容模块

2、对于需要更新内容的模块，比如detail，channel模块，第一次请求到html片段后也可以缓存下来，以后每次请求新的内容时只需要通过JSON数据更新dom即可，即无需把dom清掉再重新创建新dom。这一点的优化对于性能比较差的mobile设备上尤其重要，这样实现后，请求数据这个动作需要在路由发生变化时发送自定义消息（如：refresh_with_new_data），接受到自定义消息时再发送数据请求，得到消息后再更新dom的内容。

3、即使对于需要更新的内容，同一个链接，连续被打开时，由于数据完全没有变化，所以也可以完全不去请求数据，即可做到所谓的“秒开”

理论上应该用但并未使用的技术

1、backbone,算是比较广泛的mvc框架了，自身提供了路由功能，但个人觉得需要写的代码量太大，如果是团队使用用来规范代码还行，如果个人使用的话，我觉得还是太重了。写一个简单的功能就一大堆代码及对应的JS文件。

2、Requirejs或seajs

本身应用中就首页这几个JS文件，写完就没了，没必要再多一个额外的JS文件请求

3、一些新的CSS3属性

某些比较好用的CSS3属性在移动端支持有限，所以没有使用，比如布局的两端对齐

4、较高的内容模块分段显示，即滚动到了后再渲染到DOM中，首先后台并未提供分断加载的API，其次，自适应的布局加大了实现的难度，最后，木有足够的时间

不足

1、开发时间过短，很多公司的通病吧

2、产品在设计时未考虑单页应用的场景，层级太深的页现在还是刷新整个页面

3、有些功能还未按以上的构架实现，比如动态接口本地存储只做了index首页等

4、比较丑，样子丑，代码实现也比胶水

No zuo no die

为何在内容模块切换过程中未添加一些像native应用切换一样的动画效果？

由于android的机型无花八门，性能参差不齐，css3动画支持力度不一，很多hybrid应用的出现正是为了弥补这样的缺点。布局用html,切换动画使用native。如果你的web应用只要求跑在iphone这等高大上的设备上的话，完全可以使用css3来实现界面切换动画，如果你要求跑在所有平台上，那么......该吃药了亲..

如果你非要尝试，那么你应该会体会到什么叫no zuo no die

结束语

优化工作是个系统性工程，得从方方面面考虑，从产品设计--》UI设计--》前端代码实现--》后台数据接口提供

现在的优化只能算是皮毛吧，不仅前端部分需要优化，而且后台数据接口速度过慢也严重导致了响应速度。

纯粹的手机web单页应用本来就做的比较少，经验太少，需要继续努力学习..

码农啊...

有看到这篇文章的同学欢迎提意见，优化方面特别是

========================================================

转载处请注明：博客园(王二狗)willian12345@126.com