腾讯干货!从四个方面帮你做好移动页面性能优化

随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。

随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。

首先,为什么要最移动页面进行优化?

纵观目前移动网络的现状:

腾讯干货!从四个方面帮你做好移动页面性能优化

移动页面布局越来越复杂,效果越来越炫,直接导致了文件越来越大,下载和运行速度越来越低,而速度低会造成不良影响,据统计:

腾讯干货!从四个方面帮你做好移动页面性能优化

71%的用户期望移动页面跟PC页面一样快,74%的用户能容忍的响应时间为5秒,所以我们必须保证移动端页面有足够的速度。

移动页面的速度跟三个因素有关,分别是:移动网络带宽速度,设备性能(CPU,GPU,浏览器),页面本身。

目前主流的移动网络制式为3G:

腾讯干货!从四个方面帮你做好移动页面性能优化

今年,我们还看到了4g网络制式在快速发展,这再一次提升了移动页面的加载速度;

而移动设备本身,截止到目前,以iPhon6/三星Note4等设备为首,智能设备已经变得比以往屏幕更大,CPU、GPU、内存更靠谱。

腾讯干货!从四个方面帮你做好移动页面性能优化

而与其同时,浏览器产商也为提升页面的速度做出了不可磨灭的努力。

网络制式供应商,手机制造商,浏览器产商如此给力,我们呢?我们能做什么。

我们能做得是对移动端页面本身优化,这也是我们专业价值的体现,所以我们必须做移动端页面性能优化。

该怎么做移动端页面优化呢?

在说这个前,要提一下PC常用的优化手段:

  1. 代码优化(css、html、js优化)
  2. 减少HTTP请求(雪碧图,文件合并…)
  3. 减少DOM节点
  4. 无阻塞(内联CSS,JS置后…)
  5. 缓存

这些手段大部分适用于移动端,这都是一些耳熟能详的手段,今天这里就讲了,有兴趣可以参考PDI课程《网站性能优化》。

今天要讲的主要是一些适用于移动端的优化手段,现在进入正题。

首先我们得关注一下一个页面从开始到呈现完毕需要经历什么阶段,主要有四个阶段:

腾讯干货!从四个方面帮你做好移动页面性能优化

每个阶段的主要工作如上图所示,而我们的优化目标是:

腾讯干货!从四个方面帮你做好移动页面性能优化

下面我们来针对上面的几个阶段细说一下都有哪些优化手段。

首先,来看看加载中有哪些优化手段:

1. 预加载

预加载方式有两种:

A. 显性加载

腾讯干货!从四个方面帮你做好移动页面性能优化

类似这种用户能明显感知的,我把它称为显性加载,互动页面都建议加上这种加载方式,它一方面能增加页面的趣味性,另一方面能让后续页面体验更流畅。

B. 隐性加载

腾讯干货!从四个方面帮你做好移动页面性能优化

这种在加载第一张图片的时候已经预先加载了第二张图片,从而使得页面体验更流畅的方式,我把它称为隐性加载,这种方式的好处是节省流量之余又能使得体验增强。

2. 按需加载

按需加载是不可或缺的优化手段,主要有以下两种方式:

腾讯干货!从四个方面帮你做好移动页面性能优化

对于这种方式,在首屏加载的时候把首屏的内容加载尽量,而位于首屏之外的元素都只在出现在首屏时才加载,很大程度地节省了流量,提升了首次加载时间。

腾讯干货!从四个方面帮你做好移动页面性能优化

这种叫响应式加载方式,意思是利用JS 或者CSS 判断分辨率,从而选择不同尺寸的图片进行引入,这种的好处显而易见,同样可以加快加载速度和节省流量。

3. 压缩图片

对于压缩图片,首先要提的是jpg文件:

腾讯干货!从四个方面帮你做好移动页面性能优化

对于移动端的JPG 文件,有这样的结论:

  1. 使用大尺寸大有损压缩比的jpg
  2. 使用jpegtran进行无损压缩

腾讯干货!从四个方面帮你做好移动页面性能优化

而对于png有以下结论:

  1. 多彩图片使用png24
  2. 低彩图片使用png8
  3. 推荐使用pngquant
  4. 尽量避免重定向

为什么要尽量避免重定向呢?因为如图:

腾讯干货!从四个方面帮你做好移动页面性能优化

这是一个同一网速下的测试结果,重定向之所以会比较慢,是因为它重复了域名查找,tcp链接,发送请求。

5. 使用其他方式代替图片

有两种方式,第一种是:依靠CSS 3绘制图片:

腾讯干货!从四个方面帮你做好移动页面性能优化

第二种:使用iconfont代替图片

腾讯干货!从四个方面帮你做好移动页面性能优化

但iconfont不一定比图片好,这里做了个实验:

腾讯干货!从四个方面帮你做好移动页面性能优化

对于大图片,iconfont并不比雪碧图好,建议单侧小尺寸图标才使用iconfont.

然后,针对脚本执行中有哪些优化手段,这里只提两点:

1. 尽量避免DataURI

DataUri在移动端并不如它在pc端吃香,因为:

腾讯干货!从四个方面帮你做好移动页面性能优化

经测试,DataURI要比简单的外链资源慢6倍,生成的代码文件相对图片文件体积没有减少反而增大,而且浏览器在对这种base64解码过程中需要消耗内存和cpu,这个在移动端坏处特别明显。

2. 点击事件优化

在移动端请适当使用touchstart,touchend,touch等事件代替延迟比较大的Click 事件。Click之所以慢是因为mousedown导致的:

腾讯干货!从四个方面帮你做好移动页面性能优化

然后,针对渲染阶段中有哪些优化手段,这里也只提两点:

1. 动画优化

a)尽量使用css3动画

优点:

  1. 不占用js主线程
  2. 可利用硬件加速
  3. 浏览器可对动画做优化

缺点:

不支持中间状态监听

b)适当使用canvas动画

优点:

可规避渲染树的计算渲染更快

缺点:

开发成本高,维护较麻烦。

通过对CSS 3动画和Canvas 动画对比:

腾讯干货!从四个方面帮你做好移动页面性能优化

得到结论:5个元素以内使用css3动画,5个以上使用canvas动画。

c)合理使用RAF(requestAnimationFrame)

优点:

  1. 能解决脚本问题引起的丢帧,卡顿问题
  2. 支持中间状态监听

缺点:

兼容问题

腾讯干货!从四个方面帮你做好移动页面性能优化

通过RAF动画与settimeout动画对比:

腾讯干货!从四个方面帮你做好移动页面性能优化

得到结论:不需要兼容android 4.3浏览器的情况下,请使用RAF制作脚本动画

2. 高频事件优化

腾讯干货!从四个方面帮你做好移动页面性能优化

类似touchmove,scroll这类的事件可导致多次渲染,对于这种事件可以通过以下手段进行优化:

  1. 使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染
  2. 增加响应变化的时间间隔,减少重绘次数。

最后,针对合成/绘制只提一个优化手段:

GPU加速

触发GPU加速的方式有:

  1. CSS3 transitions
  2. CSS3 3D transforms
  3. WebGL 3D 绘制
  4. Video

使用GPU加速前有对比实验:

腾讯干货!从四个方面帮你做好移动页面性能优化

GPU加速实际上是大幅减少了合成/绘制时间,从而大大地提高了页面速度,但GPU加速有自己的缺点:

过多的GPU层会带来性能开销,主要原因是使用GPU加速其实是利用了GPU层的缓存,让渲染资源可以重复使用,所以一旦层多了,缓存增大,就会引起别的性能问题。

总结

腾讯干货!从四个方面帮你做好移动页面性能优化

本文针对页面呈现的四个阶段提出了比较典型的优化手段,到最后,再提醒读者一下:其实优化是双刃剑。

  • 按需加载提升速度,但可能导致大量重绘;
  • Touch响应快,但很多场景不适合;
  • GPU加速效率高,但内存开销大等等
  • Loading会让整体体验流畅,但容易造成用户流失
  • 图片压缩让带宽成本降低,但可能会导致视觉效果变差

类似这样的矛盾点还有很多,请结合业务按照实际情况进行优化。

 

原文地址:tgideas.qq

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30125/

(0)
CatherineCatherine
上一篇 2017-05-27 07:08
下一篇 2017-05-27 09:22

相关推荐

  • APP框架之提示框架

    某日和iOS开发聊天,说到iOS规范里没有安卓中的Toast形式的提示。我有点惊讶,仔细回忆iOS的交互规范,似乎是有。后来找来书确认了下,竟然是没有。遂把这个框架整理了下,在文中同时也强调下Android的交互规范的差…

    2016-09-29
  • 如何建立用户评价模型,量化用户体验

    在互联网趋势盛行的当下​,我们不得不思考: 用户体验是个很重要的事情,要真正领会其精髓并将其发挥到极致, 绝不是通过简单的模仿就能实现的。同样, 一个网站受欢迎的程度远不只与精美程度相关,更重要的是用户在登陆网站的过程中是否能够得到愉悦的体验。

    2017-06-02
  • 2017 年你应该尝试的:七个最有前景的设计工具

    随着新工具的发布,现有工具版本的更新迭代,2016 年显然是设计类工具蓬勃发展的一年。在本文中,我挑选了一些在 2017 年值得我们关注的设计工具。这些工具在设计工具类的社区中都拥有着大量的人气,所以挑选出来与大家一同分享。Have Fun!注:本文版权归原作者所有,仅用于学习与交流。

    2017-05-08
  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31
  • 商业化的产品设计方向

    商业型产品顾名思义面向的都是企业级用户,这是与消费型产品的最大不同,消费级产品关注的是个人用户,所以在产品角色分析上商业型与消费型就存在很大的不同,但在一定程度上产品设计又是相通的,可能很多人已经比较了解消费级产品了,所以我现在就剖析一下商业型产品。

    2015-01-06
  • 超出预期的才叫用户体验

    什么是用户体验?我认为,用户体验其实就是一种心理感觉。拿最简单的吃饭这件事来打一个比方。我在饭店,吃饭付账,这个过程叫作体验吗?肯定谈不上。用户体验,肯定是特殊的,肯定是不正常的,肯定是在你的预期之外的。超出预期才形成用户体验如果做跟别人一样的东西,那这些功能并不叫体验。很多人在抄袭别人产品的时候,经常说某某公司做了什么功能,老板说照着做一个,但是你想没想过,如果做得跟别人一样,是没有机会的。当年我们做的是免费杀毒。当时所有其他品牌的杀...

    2018-04-08
  • 微信公众号哪些细节会影响用户体验?

    公众开发运营官网公众运营平台微信公众号哪些细节会影响用户体验?在微信公众号里面,哪些细节会影响大家对公众号的体验呢?下面小编就来为大家讲解一下这些细节,快来看看吧。1.无意义的自定义菜单内容第一个就是毫无意义的自定义菜单内容,很多企业公众号费心费力通过了企业认证,好像不用这个自定义菜单挺可惜的,然后就非得放些东西进去,但是并没有考虑目标用户是否需要。如果把公众号视作一个小应用的话,自定义菜单的功能可以类比App里的Tabbar,主要是实...

    2018-02-12
  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03
  • 经验总结|品牌视觉改版要如何开始做?

    一个成功的视觉改版是靠30%的探索流程+70%设计师水平。探索品牌感觉 → 发现提取关键词 → 寻找对应素材创建情绪板 → 指导设计发现提取关键词(我们自己) → 寻找对应素材创建情绪板 → 探索品牌感觉(让用户)→ 指导设计请问您觉得目前我们产品的视觉风格怎么样?

    2017-05-03
  • 设计师的像素眼是怎样炼成的?

    传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,想要练就一双迷人的像素眼,除了常年累月的经验之外,还是有些技巧可以快速掌握的。今天分享7个像素眼的常用场合,按图索骥,用心观察,你也可以修炼成功!

    2017-06-02