关于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.针对图片的处理
样式背景图片处理和iconfont,以及base64图片转化的支持的
商品图片处理,使用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 优化后的雏形
并行加载;
HTML改成Socket通道去传输;
WebView的HTML页面缓存管理;
3.6 增量更新和动静分离方案
3.7 QQ空间最终版
H5的整体架构
四、手机QQHybrid架构设计
1.传统方式
问题:
2.静态直出+离线预推
问题表现:
产品经理肯定是在dataServer上配置最新数据信息,但CDN上的页面内置的数据有可能仍处于上一版本,更差的情况是离线包服务器和offlineServer生成的HTML又是另外一个版本。当用户本地的缓存和server同步不及时即常见的缓存刷新问题,很有可能存储的数据又是另外一份
统一数据静态文件直出:
关于offlineServer:
我们offlineServer内部分为流控和offline计算两部分。当一个页面的所有资源需要进行离线包计算打包的时候,offline计算这部分除了把所有的资源打包,内部也会存储之前所有的历史版本,同时根据历史版本和最新版本生成所有的diff,即每个离线包的差样部分。
3.动态配置
3.1 动态缓存
我们在这中间加上之前提到地类似offlineCache的中间层sonicBridge,这个中间层首先会从Node.js服务器下载完整的HTML给WebView,同时会把下载回来的内容在本地完整地做缓存。
3.2 减少传输数据 Node.js服务器并不会返回整个HTML给sonicBridge,而是返回给我们称为data数据的部分。
3.3 减少提交页面数据
4.QQHybrid架构
我们在WebScope的前端开发同学做了一部分工作;2. 我们的native层终端开发同学做了bridge桥接,3.我们后台的同学做了很多的自动集成和offlineServer推送等工作。
5.图片优化
1.大家都比较熟悉WebP,而且Android对其支持也比较好,而QQ团队内部自己研发了叫SharpP的图片格式,在文件大小上能比WebP节省10%左右的体积。下面是抽取我们CDN服务器上已有图片进行的数据比对。
2.针对不同的机型返回不同的图片的大小
6.前端部署流程
五、手机淘宝架构设计
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消耗,提升渲染性能)视频。
六、移动端架构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空间)
文献参考:
2. 70%以上业务由H5开发,手机QQ Hybrid的架构如何优化演进?
4.QQ空间面向移动时代Hybrid架构设计[视频+演讲稿]
关于H5在移动端架构的优化设计总结的更多相关文章
- 带你使用h5开发移动端小游戏
带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...
- H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例
H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例 (转载:https://blog.csdn.net/weixin_38787928/article/details/86741227 ...
- 支付宝H5 与网页端支付开发
在日常生活中,我们基本上都是进行微信与支付宝的支付方式尽心支付,这种方式确实大大便利了我们的生活,那么如何在我们的产品中进行微信与支付宝支付的植入开发呢? 我们先进行支付宝的H5与网页端支付开发,这里 ...
- uni-app - 支付(app支付、小程序支付、h5(微信端)支付)
App支付.小程序支付.h5(微信端)支付 APP支付(内置) appPay.js /** * 5+App支付,仅支持支付宝以及微信支付 * * 支付宝Sdk集成,微信sdk未集成 * * @para ...
- 1年内4次架构调整,谈Nice的服务端架构变迁之路
Nice 本身是一款照片分享社区类型的应用,在分享照片和生活态度的同时可以在照片上贴上如品牌.地点.兴趣等tag. Nice从2013.10月份上线App Store到目前每天2亿PV,服务端架构经过 ...
- 从服务端架构设计角度,深入理解大型APP架构升级
随着智能设备普及和移动互联网发展,移动端应用逐渐成为用户新入口,重要性越来越突出.但企业一般是先有PC端应用,再推APP,APP 1.0版的功能大多从现有PC应用平移过来,没有针对移动自身特点考虑AP ...
- h5页面苹果端浮动问题
最近在开发一个h5的app端,前端同事写好页面,我们后端java动态化页面,测试的时候发现安卓端什么浏览器都正常如下图1,可是苹果端无论什么浏览器都出现了底部菜单缺少了两个下图2图一:正常显示 图2, ...
- Linux云计算高端架构师+DevOps高级虚拟化高级进阶视频
课程大纲 1.开班典礼(1)_rec.mp4 2.开班典礼(2)_rec.mp4 3.开班典礼(3)_rec.flv 4.Linux操作系统系统安装及启动流程(1)_rec.flv 5.Linux操作 ...
- http服务端架构演进
摘要 在详解http报文相关文章中我们介绍了http协议是如何工作的,那么构建一个真实的网站还需要引入组件呢?一些常见的名词到底是什么含义呢? 什么叫正向代理,什么叫反向代理 服务代理与负载均衡的差别 ...
随机推荐
- 集群下Dubbo负载均衡配置
在集群负载均衡时,Dubbo提供了4种均衡策略,默认为Random(随机调用) 负载均衡策略: 1).Random LoadBalance(随机,按照权重的设置随机概率) 2).RoundRobin ...
- dataTable插件锁表头和锁列的教程
源代码下载 我的同事让我帮忙给弄个锁头锁列的插件.结果找到大名鼎鼎的jquery dataTable插件. 今天我们来介绍不常用的功能:dataTable插件锁表头和锁前两列 由于是移动前端.我们不考 ...
- Windows Server2008各版本区别
Windows Server 2008 是专为强化下一代网络.应用程序和 Web 服务的功能而设计,是有史以来最先进的 Windows Server 操作系统.拥有 Windows Server 20 ...
- 转载:Java高并发,如何解决,什么方式解决
原文:https://www.cnblogs.com/lr393993507/p/5909804.html 对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了.而并 ...
- 关于XMLHttpRequest状态的讨论及处理方法
今天主要是讨论下XMLHttpRequest的响应状态问题.我们知道,XMLHttpRequest的响应阶段有5个,分别是: 请求未初始化 服务器连接已建立 请求已接收 请求处理中 请求已完成,且响应 ...
- shell expect权威指南和实战
一.概述 我们通过Shell可以实现简单的控制流功能,如:循环.判断等.但是对于需要交互的场合则必须通过人工来干预,有时候我们可能会需要实现和交互程序如telnet服务器等进行交互的功能.而expec ...
- CentOS7图形界面与命令行界面切换
1.如果在命令行模式,按Ctrl+Alt+F1,可以进入图形界面: 2.如果在图形界面下,按:Ctrl+Alt+F2,可以进入命令行模式:
- python----多继承C3算法
https://blog.csdn.net/fmblzf/article/details/52512145
- python+selenium十:基于原生selenium的二次封装
from selenium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom selenium ...
- PyCharm 新建文件时默认添加作者时间等
将内容添加到Python Script 右侧的文本框中: 路径: File → Setting → Editor → File and Code Templates → Python Script # ...