H5移动应用的发布优化（三）逻辑页优化

最新推荐文章于 2024-01-03 12:49:08 发布

天笑2001

最新推荐文章于 2024-01-03 12:49:08 发布

阅读量572

点赞数

分类专栏：筋斗云文章标签：移动应用优化发布应用

本文链接：https://blog.csdn.net/skyshore/article/details/53611152

版权

筋斗云专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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__.
其它不常用的页面在用到时动态加载，避免应用加载所有逻辑页费时费流量的问题。