提升混合应用页面打开速度的新思路
发布在前端路上2017年7月22日view:285
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

我们都知道混合应用的流畅性不如原生应用,除了不能像原生一样轻松驾驭各种狂拽酷炫的效果,混合应用还有一个难以消除的弱点在于页面打开速度上,如果有机会在同一台手机上直接对比的话,这种差距是肉眼都能直观感受到的,这主要是由于web页面每次打开前需要初始化,在那一瞬间需要完成DOM创建、资源下载、样式渲染、js执行,这些时间消耗造成了按键按下与页面进场之间短暂的停顿,也造成了混合应用整体“不流畅,不跟手”的印象。

为了尽可能解决这个问题,最近想到了一种新的优化思路,优化后在测试机上空白页面的打开速度较之前提升100ms左右,对于大量依赖js运行的页面提速效果更明显。思路并不复杂,就是先移除页面中所有的js资源,加速页面渲染速度,当页面开始进场动画后,再开始加载执行js,充分利用了进场动画的时间,以缩短整个页面展现的时间,核心代码就是选择时机动态插入js节点部分,该方案已经应用于HybridStart项目,详细过程点此了解

应用该方案后同时还解决了混合应用的另一个问题,那就是打开不同APP页面不再有速度差别了,之前产生的速度差别,主要是因为js代码可能产生异步请求或者生成DOM节点,这些耗时都不可预估,长的甚至以秒计算,优化后的页面完全排除掉js资源的干扰,渲染速度的差别就仅在于DOM渲染量的差别,而这个基本上任何页面都不会差太多,因此不同页面的打开速度也就基本一致了。

最后安利一下HybridStart项目,如果你也在用apicloud做混合应用,这一定是你的不二之选,很难想象开发体验能比这更好的了。另外HybridStart的开发原则之一是UI可剥离,我认为框架的UI跟功能绑定就是耍流氓,没错我说的就是mui,没法想象怎么用mui做自定义风格的项目,这方面HybridStart是完胜的,使用HybridStart做项目完全不需要担心UI好不好改,因为你甚至可以一怒之下将自带UI删掉重写,完全不影响核心功能,当然了即便UI不是重点,HybridStart的自带UI也足够满足普通APP项目需求了,而且附带less文件,只要是别太非主流的风格都能通过改变量实现。

最后,虽然目前HybridStart是基于apicloud平台,但未来还会跟进dcloud平台,因为HybridStart的初衷就是跨平台,最初一版是脱胎于古老的appcan平台,在饱尝appcan之坑后,决心将其打造成一款跨引擎的混合应用开发框架,目的就是抹平不同平台的引擎api差别,减少平台迁移成本,就目前来看,apicloud跟dcloud相比,还是稍逊一筹的。

评论
发表评论
4个月前

@Array Huang 多webview不适合webpack,用的seajs

4个月前

不上webpack么?

WRITTEN BY
雅X共赏
前端路上:www.refined-x.com
TA的新浪微博
PUBLISHED IN
前端路上

前端路上,与你同行。

我的收藏