关于H5在移动端架构的优化设计总结
各⼤互联⽹公司采取的策略
⼀、百度移动前端⾸页
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加载⽅案
3.1 把WebView启动和发送请求改成并⾏
3.2 Socket通道
3.3 ⼆次进⼊速度优化
3.4 E-Tag和Cache-Offline判断页⾯内容是否需要更新和离线缓存
3.5 优化后的雏形
1.
1.
1.
1. 并⾏加载；
2. HTML改成Socket通道去传输；
3. WebView的HTML页⾯缓存管理；
    3.6 增量更新和动静分离⽅案
    3.7 QQ空间最终版
      H5的整体架构

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。