提升混合应用页面打开速度的新思路

最新推荐文章于 2025-09-05 18:39:19 发布

转载最新推荐文章于 2025-09-05 18:39:19 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/refined-x/p/7222039.html

文章标签：

#ui

本文介绍了一种提高混合应用页面加载速度的方法，通过先移除JS资源，待页面渲染后再加载，有效缩短了页面展现时间，并使不同页面的加载速度趋于一致。

我们都知道混合应用的流畅性不如原生应用，除了不能像原生一样轻松驾驭各种狂拽酷炫的效果，混合应用还有一个难以消除的弱点在于页面打开速度上，如果有机会在同一台手机上直接对比的话，这种差距是肉眼都能直观感受到的，这主要是由于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相比，还是稍逊一筹的。

转载于:https://www.cnblogs.com/refined-x/p/7222039.html