H5移动应用常常是一个手机网页应用,或被包装成一个安卓或苹果的应用程序。
在开发完成后,将本地开发版本上线时常常需要优化,主要的优化思路是:
- 减少交互次数,即减少对服务器的访问,主要手段有缓存优化、文件合并等。
- 减少交互数据,主要手段有文件最小化(minify)、WEB服务器配置gzip压缩等。
逻辑页优化
逻辑页是H5移动应用中的重要概念。用户看到的每个页面并不是一个个独立的H5应用,而是一个H5应用中的一个逻辑页而已,这样实现出来的应用才能运行更平滑且省流量。
不支持逻辑页的H5多页应用都在耍流氓。
-- 天笑
一个H5多逻辑页应用(亦称“变脸式应用”)通常由基础架构层(框架)、通用逻辑层(多逻辑页共享部分)以及一个个逻辑页构成。下面是一个H5多页应用的结构:
<!DOCTYPE html>
<html>
<!-- 框架,所有H5应用共享 -->
<link rel="stylesheet" href="app_fw.css" />
<script src="lib/app_fw.js"></script>
<!-- 通用逻辑层,当前应用内所有逻辑页共享 -->
<link rel="stylesheet" href="index.css" />
<script src="index.js"></script>
H5应用框架内容
<!-- 逻辑页: page1 -->
<link rel="stylesheet" href="page1.css" />
<script src="page1.js"></script>
<div id="page1">逻辑页内容</div>
<!-- 逻辑页: page2 -->
<link rel="stylesheet" href="page2.css" />
<script src="page2.js"></script>
<div id="page2">逻辑页内容</div>
</div>
</html>
上例中,在文档的后面,是所有的逻辑页,每个逻辑页都有样式(css), 控制逻辑(js)和页面内容(div)部分。应用框架中会有支持逻辑页显示和切换的操作。
在开发时,每个页面可以分开开发,实现模块化。
由于逻辑页也包含JS/CSS这些文件,所以可以把它们当成模块,也采用上一节的对JS/CSS文件最小化再合并的方法进行优化,把所有的逻辑合并到主页里。
然而,这样做有以下问题:
- 所有的逻辑页都在主页面中,导致应用加载时消耗时间、流量、内存占用均过大。尤其在一个较大的应用中,其中的逻辑页超过20个,全部内嵌对性能是有影响的。
- 一个逻辑页有更新会导致整个主页更新,在开发时添加一个逻辑页都需要修改主页也很麻烦。
支持动态逻辑页和模板加载
解决以上问题的方法是使用动态逻辑页和模板加载,即框架在显示一个逻辑页时,先查看内部有没有逻辑页模板,有则用之,没有则从外部动态加载逻辑页。
这样,在开发时,所有逻辑页都可放置在主页外部独立开发;在上线时优化时,把常用的逻辑页内嵌到主页中去。
以筋斗云框架为例,H5动态逻辑页应用文件结构如下:
index.html - H5应用
page/home.html - 逻辑页home
page/home.js - home的应用逻辑
page/login.html - 逻辑页login
page/login.js - login应用逻辑
...
开发时,在index.html中不包含任何逻辑页,而在上线时,将home.html, login.html等常用页合并到主页中去。
webcc优化工具支持mergePage命令合并和内嵌逻辑页,可设置策略如下:
<!DOCTYPE html>
<html>
...
H5应用框架内容
<!-- WEBCC_BEGIN 所有内嵌的逻辑页 -->
<!-- WEBCC_USE_THIS
WEBCC_CMD mergePage -minify yes page/home.html page/login.html
WEBCC_END -->
</html>
其中,逻辑页page/home.html
内容示例如下,它指定了脚本为home.js
:
<div mui-script="home.js">
home页内容
</div>
webcc处理后,生成的内容如下:
<!DOCTYPE html>
<html>
...
H5应用框架内容
<!-- 内嵌逻辑页: home -->
<script type="text/template" id="tpl_home">
逻辑页链接的JS文件: home.js
逻辑页内容: home.html
</script>
其它内嵌逻辑页...
</html>
优化策略:
- 选取最常用到页面内嵌到主页中,减少了对服务端的访问次数,显示这些页面时更快。
- 内嵌页面时,将页面模板保存在script标签中,避免应用加载时使用过多的内存。
注意:webcc支持生成使用H5 template标签的代码,但由于目前兼容性还不理想,所以默认生成的代码是使用script标签,且将内部嵌套的script改成了__script__
. - 其它不常用的页面在用到时动态加载,避免应用加载所有逻辑页费时费流量的问题。