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

一、百度移动前端首页

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. 样式背景图片处理和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. 并行加载;

        2. HTML改成Socket通道去传输;

        3. 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空间)

文献参考:

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

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

3.手淘H5性能最佳实践

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

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

6. 聊一聊百度移动前端速度那些事

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

关于H5在移动端架构的优化设计总结的更多相关文章

  1. 带你使用h5开发移动端小游戏

    带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...

  2. H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例

    H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例 (转载:https://blog.csdn.net/weixin_38787928/article/details/86741227 ...

  3. 支付宝H5 与网页端支付开发

    在日常生活中,我们基本上都是进行微信与支付宝的支付方式尽心支付,这种方式确实大大便利了我们的生活,那么如何在我们的产品中进行微信与支付宝支付的植入开发呢? 我们先进行支付宝的H5与网页端支付开发,这里 ...

  4. uni-app - 支付(app支付、小程序支付、h5(微信端)支付)

    App支付.小程序支付.h5(微信端)支付 APP支付(内置) appPay.js /** * 5+App支付,仅支持支付宝以及微信支付 * * 支付宝Sdk集成,微信sdk未集成 * * @para ...

  5. 1年内4次架构调整,谈Nice的服务端架构变迁之路

    Nice 本身是一款照片分享社区类型的应用,在分享照片和生活态度的同时可以在照片上贴上如品牌.地点.兴趣等tag. Nice从2013.10月份上线App Store到目前每天2亿PV,服务端架构经过 ...

  6. 从服务端架构设计角度,深入理解大型APP架构升级

    随着智能设备普及和移动互联网发展,移动端应用逐渐成为用户新入口,重要性越来越突出.但企业一般是先有PC端应用,再推APP,APP 1.0版的功能大多从现有PC应用平移过来,没有针对移动自身特点考虑AP ...

  7. h5页面苹果端浮动问题

    最近在开发一个h5的app端,前端同事写好页面,我们后端java动态化页面,测试的时候发现安卓端什么浏览器都正常如下图1,可是苹果端无论什么浏览器都出现了底部菜单缺少了两个下图2图一:正常显示 图2, ...

  8. Linux云计算高端架构师+DevOps高级虚拟化高级进阶视频

    课程大纲 1.开班典礼(1)_rec.mp4 2.开班典礼(2)_rec.mp4 3.开班典礼(3)_rec.flv 4.Linux操作系统系统安装及启动流程(1)_rec.flv 5.Linux操作 ...

  9. http服务端架构演进

    摘要 在详解http报文相关文章中我们介绍了http协议是如何工作的,那么构建一个真实的网站还需要引入组件呢?一些常见的名词到底是什么含义呢? 什么叫正向代理,什么叫反向代理 服务代理与负载均衡的差别 ...

随机推荐

  1. 集群下Dubbo负载均衡配置

    在集群负载均衡时,Dubbo提供了4种均衡策略,默认为Random(随机调用) 负载均衡策略: 1).Random LoadBalance(随机,按照权重的设置随机概率) 2).RoundRobin  ...

  2. dataTable插件锁表头和锁列的教程

    源代码下载 我的同事让我帮忙给弄个锁头锁列的插件.结果找到大名鼎鼎的jquery dataTable插件. 今天我们来介绍不常用的功能:dataTable插件锁表头和锁前两列 由于是移动前端.我们不考 ...

  3. Windows Server2008各版本区别

    Windows Server 2008 是专为强化下一代网络.应用程序和 Web 服务的功能而设计,是有史以来最先进的 Windows Server 操作系统.拥有 Windows Server 20 ...

  4. 转载:Java高并发,如何解决,什么方式解决

    原文:https://www.cnblogs.com/lr393993507/p/5909804.html 对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了.而并 ...

  5. 关于XMLHttpRequest状态的讨论及处理方法

    今天主要是讨论下XMLHttpRequest的响应状态问题.我们知道,XMLHttpRequest的响应阶段有5个,分别是: 请求未初始化 服务器连接已建立 请求已接收 请求处理中 请求已完成,且响应 ...

  6. shell expect权威指南和实战

    一.概述 我们通过Shell可以实现简单的控制流功能,如:循环.判断等.但是对于需要交互的场合则必须通过人工来干预,有时候我们可能会需要实现和交互程序如telnet服务器等进行交互的功能.而expec ...

  7. CentOS7图形界面与命令行界面切换

    1.如果在命令行模式,按Ctrl+Alt+F1,可以进入图形界面: 2.如果在图形界面下,按:Ctrl+Alt+F2,可以进入命令行模式:

  8. python----多继承C3算法

    https://blog.csdn.net/fmblzf/article/details/52512145

  9. python+selenium十:基于原生selenium的二次封装

    from selenium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom selenium ...

  10. PyCharm 新建文件时默认添加作者时间等

    将内容添加到Python Script 右侧的文本框中: 路径: File → Setting → Editor → File and Code Templates → Python Script # ...