关于H5在移动端架构的优化设计总结

柔光的暖阳◎ 2022-01-26 07:17 230阅读 0赞

## 各大互联网公司采取的策略 ##

一、百度移动前端首页

1. 对于首屏的静态文件css/js,在上线前全部编译直出到HTML文件中；整个首页的渲染只需要一次请求；

2.使用缓存；把不变的js/css/html全部存储到localstorage中去，然后根据cookie中添加版本号的MD5值判断是从服务器中更新还是本地获取；

3.对于更多业务需求的js/css等静态文件，通过一个接口全部返回；

4.DOM也缓存，我们的模板和数据，也会被缓存至localstorage中；

5.使用iconfont

6.卡片的异步加载与缓存

7.不在首屏的就要异步化,采用按需加载，而不是伴随首页一起加载

8.少量静态文件的域名，节省了DNS的解析

9.极小的图片base64化，对于小于1k的图片，我们将其变为base64编码，并融入到css中，一起换存到localstorage中去

二、美团WebView性能优化

1. 定义全局webView，减少webView初始化时间同时并发在Native本地去请求HTML页面内容；

2.DNS解析优化，DNS采用和客户端API相同的域名,DNS会在系统级别进行缓存;

3.同步渲染采用chunk编码；

4.页面框架渲染；

5.其它

三、苏宁易购Hybrid架构设计方案

1.针对图片的处理

1.  1.  1.  1.    样式背景图片处理和iconfont，以及base64图片转化的支持的
            2.    商品图片处理,使用webp格式图片

2.首屏

通用的处理方案：

*   *   *   *  域名收敛
             *  html 文档压缩
             *  静态资源合并
             *  首屏以外业务延迟加载，资源按需加载，图片懒加载
             *  雅虎军规常规优化

3.开发方式对优化的影响

3.1   服务端输出数据方式 ：所谓的服务端输出数据方式就是页面的html 源码包含了页面所有的数据

3.2   接口数据渲染方式 ：我们把 html 看做一个模板，只有静态的数据容器，所有的动态数据调用第三方接口利用 js 渲染成页面；同时采用使用客户端提供的原生方式请求接口，同时因为页面是一个静态模板容器，可以把页面引用的静态资源打成 zip 包动态更新至客户端，并支持增量更新的能力，当页面模板或者模板内引用的静态资源改变时，客户端会提前下载增量包，html 模板和内嵌的静态资源会提前通过客户端下载到本地，用户访问页面时就会从本地获取加载资源，极大的减少了白屏的概率。

4.  兜底防灾

5.   性能监控

四、QQ空间移动时代Hybrid架构设计

1.   从加载速度来看Native比H5好在两个地方 ：

1.1    首次加载速度可能相对比较快

1.2     二次加载体验机制可以完爆H5，这里主要原因其实我们也看到就是缓存的逻辑

2.    H5要赶超Native速度主要有两个点：

1.1     首次进入的时候如何去提速；

1.2     有缓存的情况（例如你以前进入过了），怎么实现秒开的体验，马上能够出来内容。

3.     传统H5加载方案

![949019-20170629165726852-1673268506.png][]

3.1 **把WebView启动和发送请求改成并行**

![949019-20170629165802274-221663252.png][]

3.2 **Socket通道**

![949019-20170629165847149-1516822334.png][]

3.3 二次进入速度优化

![949019-20170629165915789-1942765523.png][]

3.4 E-Tag和Cache-Offline判断页面内容是否需要更新和离线缓存

![949019-20170629165939743-447252892.png][]

3.5 优化后的雏形

1.  1.  1.  1.  并行加载；
            2.  HTML改成Socket通道去传输；
            3.  WebView的HTML页面缓存管理；

![949019-20170629170015180-1544039904.png][]

3.6 增量更新和动静分离方案

![949019-20170629170133524-1255238652.png][]

![949019-20170629170208383-301845890.png][]

3.7 QQ空间最终版

H5的整体架构

![949019-20170629170249133-1997787398.png][]

四、手机QQHybrid架构设计

1.传统方式

![949019-20170629170326008-997167556.png][]

问题:

![949019-20170629170348649-1808103084.png][]

2.静态直出+离线预推

![949019-20170629170421743-532520316.png][]

![949019-20170629170450164-906225031.png][]

问题表现：

产品经理肯定是在dataServer上配置最新数据信息，但CDN上的页面内置的数据有可能仍处于上一版本，更差的情况是离线包服务器和offlineServer生成的HTML又是另外一个版本。当用户本地的缓存和server同步不及时即常见的缓存刷新问题，很有可能存储的数据又是另外一份

统一数据静态文件直出：

![949019-20170629170517368-1845524581.png][]

关于offlineServer:

我们offlineServer内部分为流控和offline计算两部分。当一个页面的所有资源需要进行离线包计算打包的时候，offline计算这部分除了把所有的资源打包，内部也会存储之前所有的历史版本，同时根据历史版本和最新版本生成所有的diff，即每个离线包的差样部分。

![949019-20170629170547899-149143829.png][]

3.动态配置

3.1 动态缓存

我们在这中间加上之前提到地类似offlineCache的中间层sonicBridge，这个中间层首先会从Node.js服务器下载完整的HTML给WebView，同时会把下载回来的内容在本地完整地做缓存。

![949019-20170629170607243-1072671626.png][]

3.2  减少传输数据  Node.js服务器并不会返回整个HTML给sonicBridge，而是返回给我们称为data数据的部分。

![949019-20170629170624008-1425185201.png][]

3.3 减少提交页面数据

![949019-20170629170646821-72092587.png][]

![949019-20170629170710227-46928368.png][]

![949019-20170629170734852-99550180.png][]

4.QQHybrid架构

我们在WebScope的前端开发同学做了一部分工作；2. 我们的native层终端开发同学做了bridge桥接，3.我们后台的同学做了很多的自动集成和offlineServer推送等工作。

![949019-20170629170808649-1683034473.png][]

5.图片优化

1.大家都比较熟悉WebP，而且Android对其支持也比较好，而QQ团队内部自己研发了叫SharpP的图片格式，在文件大小上能比WebP节省10%左右的体积。下面是抽取我们CDN服务器上已有图片进行的数据比对。

2.针对不同的机型返回不同的图片的大小

![949019-20170629170826118-1821691598.png][]

![949019-20170629170842211-1436247335.png][]

![949019-20170629170910961-275768557.png][]

6.前端部署流程

![949019-20170629170932899-414594872.png][]

![949019-20170629170954649-1408249746.png][]

![949019-20170629171014993-248845497.png][]

五、手机淘宝架构设计

1.传统优化

1.1   请求数优化

1.2   首屏多个动态接口合并请求

1.3    禁止重定向

1.4  图片优化

1.4.1 使用webp图片格式

1.4.2  根据q值 图片锐化值 DPI返回对应的图片大小和图片优化处理

1.4.3  Sprite图片

2.Native端的性能优化

2.1  HTTPDNS

2.2  SSL+SPDY协议

2.3   域名收敛

2.3.1  域名最终形态（建议）

*   *   *   *   *   *   *  页面请求 域名一个
                         *  静态资源（css，js） 一个
                         *  图片资源 一个
                         *  动态数据一个
                         *  数据统计一个

2.4   动态数据复用状态

2.5   预加载和离线化方案

2.6   统计方案优化

3.渲染优化

3.1禁止使用iframe （阻塞父文档onload事件）

3.2禁止使用GIF图片实现Loading 效果 （降低CPU消耗，提升渲染性能）[视频][Link 1]。

六、移动端架构H5优化总结

1.web端优化总结

1.1   请求数优化，首屏多个动态接口合并请求  ,禁止重定向,禁止使用iframe，禁止使用GIF图片实现Loading 效果 （手淘）

1.2   通用优化方案 （苏宁）

*   *   *   *   *  域名收敛
                 *  html 文档压缩
                 *  静态资源合并
                 *  首屏以外业务延迟加载，资源按需加载，图片懒加载
                 *  雅虎军规常规优化

1.3  使用webp格式和iconfont等图片优化方案 （手淘）

1.4 拆分页面结构（动态数据和静态存储数据）充分使用localStorage存储相关的数据；根据相关的版本MD5更新对应需要的动态模块数据;  （百度和手Q)

1.5  兜底容灾

1.6 性能监控 + 测速监控

1.7 数据监控

2.Native端优化

2.1 添加本地Cache缓存策略，存储对应的本地HTML/CSS/JS资源/图片资源等；

2.2 全局WebView同时并发请求对应的H5首屏数据；

2.3 httpDNS,域名收敛 降低DNS解析的时间；

2.4 动态数据增量更新合并（手Q）

3.服务器端优化

3.1   添加nodeJS自动化构建服务,JS/CSS直出到HTML内容，同时服务器端渲染

3.2   采用socket通道以数据包的方式+离线预推的方式，将增量更新的数据提前下发到APP.然后app组装好对应数据，供webView使用 (QQ空间)

文献参考：

1.[WebView性能和体验分析报告    ][WebView_]

2. [70%以上业务由H5开发,手机QQ Hybrid的架构如何优化演进？][70_H5_QQ Hybrid]

3.[手淘H5性能最佳实践][H5]

4.[QQ空间面向移动时代Hybrid架构设计\[视频+演讲稿\]][QQ_Hybrid]

5.[QQ空间前端工程师如何做首屏优化][QQ]

6. [聊一聊百度移动前端速度那些事  ][Link 2]

7.[【前端】移动端电商类展示页面性能优化实战][Link 3]

作者: [lolDragon][]

出处: [http://www.cnblogs.com/lolDragon/][lolDragon]

[949019-20170629165726852-1673268506.png]: /images/20220126/b09f798954374e8e962ccd81c2474d1a.png
[949019-20170629165802274-221663252.png]: /images/20220126/3b628810d22d412591b757c6f4622074.png
[949019-20170629165847149-1516822334.png]: /images/20220126/539f58b0ff8e43188a3d360a8d9e5ae4.png
[949019-20170629165915789-1942765523.png]: /images/20220126/e3e8edee59504cc1b6ced83ec9ffec20.png
[949019-20170629165939743-447252892.png]: /images/20220126/4764c9a3559f40fb81421a155c0c0ef0.png
[949019-20170629170015180-1544039904.png]: /images/20220126/f7b9a8ac69f74d63b6aedc6d658d9b83.png
[949019-20170629170133524-1255238652.png]: /images/20220126/ffd94f0b241e4690ad80db2039844be3.png
[949019-20170629170208383-301845890.png]: /images/20220126/793829eb74f04896a97d40dc16e27afd.png
[949019-20170629170249133-1997787398.png]: /images/20220126/e02b0d1f2d414f79b1aa62a289af0d2d.png
[949019-20170629170326008-997167556.png]: /images/20220126/6352d3cde83d457abe24de961a2de7bf.png
[949019-20170629170348649-1808103084.png]: /images/20220126/596fff72374b49b69adb1ffb386721bc.png
[949019-20170629170421743-532520316.png]: /images/20220126/228c16ee019045efa54b1cd68aa12cae.png
[949019-20170629170450164-906225031.png]: /images/20220126/d6a24c47b48b47f5b652f0bc7c524cef.png
[949019-20170629170517368-1845524581.png]: /images/20220126/540c1db437c147bbb73dc6c11ebac0c3.png
[949019-20170629170547899-149143829.png]: /images/20220126/6bd5325e195c492093af34eef8f83f7e.png
[949019-20170629170607243-1072671626.png]: /images/20220126/b468d50e15834af58ef32b0d135c978f.png
[949019-20170629170624008-1425185201.png]: /images/20220126/27e027db36234c0c8541d86dd8e83612.png
[949019-20170629170646821-72092587.png]: /images/20220126/06525523bc8d43e5929fa44eead9421e.png
[949019-20170629170710227-46928368.png]: /images/20220126/735e1c13467a4c99b642814d6d758433.png
[949019-20170629170734852-99550180.png]: /images/20220126/3edaf541abe543669b2923922461d32a.png
[949019-20170629170808649-1683034473.png]: /images/20220126/f62bd8ff55d94197b221d949c98cd5c0.png
[949019-20170629170826118-1821691598.png]: /images/20220126/e1144f6ba6e84a23bfe454ff4aa2f9c0.png
[949019-20170629170842211-1436247335.png]: /images/20220126/658b2a8f6d0b4bda83ce64f738b5cb41.png
[949019-20170629170910961-275768557.png]: /images/20220126/75aaa94e17564fc5bb59ce465e7a4c29.png
[949019-20170629170932899-414594872.png]: /images/20220126/658f41db546143d9bb951ce4e96553cc.png
[949019-20170629170954649-1408249746.png]: /images/20220126/69ef22cc684942818b3f9529b94af8fb.png
[949019-20170629171014993-248845497.png]: /images/20220126/4047670c6dbd4b048ae143f422db142a.png
[Link 1]: http://v.youku.com/v_show/id_XODY2OTI5NzI4.html
[WebView_]: http://tech.meituan.com/WebViewPerf.html
[70_H5_QQ Hybrid]: https://mp.weixin.qq.com/s/evzDnTsHrAr2b9jcevwBzA
[H5]: https://www.kancloud.cn/kancloud/posts/84269
[QQ_Hybrid]: http://chuansong.me/n/487634724468
[QQ]: http://chuansong.me/n/322665751359
[Link 2]: https://segmentfault.com/a/1190000005882953
[Link 3]: http://www.ita1024.com/eventlist/view/id/125
[lolDragon]: http://www.cnblogs.com/lolDragon/