移动端学习总结——性能优化

原创 2016年08月31日 13:20:42

移动端性能主要影响因素

移动端与PC端的性能影响因素的差异还是比较大的。其主要差别如下

  • 移动端的带宽速度较小。4G网络的出现提升了移动页面的加载速度,但是相对于PC端,带宽的限制也是需要考虑的因素之一。
  • 移动端的设备性能与PC端的差异巨大。移动端的CPU、内存等设备的性能相比于PC端还是有很大限制的
  • 页面本身的问题
    在了解移动端的性能优化之前,让我们先看一看PC端的性能优化

PC的性能优化

PC端的性能优化主要考虑以下几个因素

  • 代码优化(css、html、js优化)
  • 减少HTTP请求数量(雪碧图、文件合并、缓存)
  • 减少HTTP请求数据量(压缩文件)
  • 减少DOM操作(使用innerHTML、createDocumentFragment()、事件委托)
  • 减少阻塞(css文件放在头部 js文件放在body的底部)
  • 图片的处理(压缩、预加载、懒加载)
  • 减少DNS查询(CDN)

移动端性能优化

这里写图片描述
图片来自移动H5前端性能优化指南

按需加载

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

  • 在首屏加载的时候把首屏的内容先加载,位于首屏之外的元素都只在出现在首屏时才加载,很大程度上节省了流量,提升了首次加载时间。
  • 利用JS或CSS判断分辨率,从而选择不同尺寸的图片进入,加快加载速度和节省流量

webP

智图网站是一个压缩图片的网站,它可以根据要压缩的图片智能的选择压缩后的图片格式,压缩后的图片格式可以为jpg、png、webP等。
相对于JPG,WebP格式的图片谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。但WebP是一种有损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。
但是webP格式的图片存在兼容性问题
这里写图片描述
检测浏览器是否支持WebP的主要方法是黑名单和使用JacaScript检测
黑名单 假设我们维护一个黑名单,当检测到用户的UA在黑名单中,则使用jpg格式的图片,其他的浏览器则使用webP格式的图片
JavaScript检测 请求一个 WebP 格式的图片。因为图片在加载的时候会触发 onload 或者 onerror 事件。当浏览器成功加载该图片的时候会触发 onload 事件,否则会触发 oneror 的事件。所以,我们会先将检测结果保存起来,在用户下一次访问页面的时候提供对应格式的图片。

方案优势缺陷
黑名单可在服务端进行切换;实现难度低不可扩展;几乎不可测试;严重一开黑白名单的正确性,不靠谱;使用cdn后,用户的UA不方便获得
JavaScript检测比较靠谱,能力判断优于类型判断需要使用cookie存储数据,增加一个网络请求;增加开发难度

采用JavaScript检测方法主要实现 方法

function hasWebp () {
    // 查看 Cookie,如果没有则进行以下逻辑
    var img = new Image();
    img.onload = handleSupport;
    img.onerror = handleNotSupport;
    img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
    // 否则根据 Cookie 执行handleSupport或者handleNotSupport
}
function handleSupport() {
    setCookie('swebp', 'true', 2592000); // 30天过期
}
function handleNotSupport () {
    setCookie('swebp', 'false', 2592000);
}

为了不使用cookie,将查询信息存储到本地,为了减少src请求,将图片进行base64编码。优化结果如下

function detectWebp () {
    if (!window.localStorage || typeof localStorage !== 'object') return;

    var name = 'webpa'; // webp available
    if (!localStorage.getItem(name) || (localStorage.getItem(name) !== 'available' && localStorage.getItem(name) !== 'disable')) {

        var img = document.createElement('img');

        img.onload = function () {
            try {
                localStorage.setItem(name, 'available');
            } catch (ex) {
            }
        };

        img.onerror = function () {
        try {
                localStorage.setItem(name, 'disable');
            } catch (ex) {
            }
        };
        img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAsAAAABBxAREYiI/gcAAABWUDggGAAAADABAJ0BKgEAAQABABwlpAADcAD+/gbQAA==';
    }
}

srcset属性

srcset属性目的是旨在为使用不同分辨率的不同浏览器用户提供适合其浏览环境的图片大小的解决方案。其浏览器支持程度如下图所示
这里写图片描述
从图中可以看出,除了opera浏览器,现有的主流浏览器最新版本都已支持。

<img src="low-res.jpg" srcset="high-res.jpg 2x"> 

srcset属性的目的在于允许开发者为某个图片的属性指定一系列的来源,其中这些图片的来源是要根据客户显示屏的像素分辨率而设定的,比如:

<img src="low-res.jpg" srcset="high-res.jpg 2x"> 

其中指出了使用图片作为在低分辨率的显示屏上显示的默认图片以及不能识别srcset属性的浏览器中也会使用该图片;而srcset中指定的图片,则会在能识别srcset属性的浏览器中同时是高分辨率屏幕中显示。可以看到,其语法类似于苹果对Retina-ready图形卡的定义:开发人员只需提供一个备用的文件名(alternate filename)和倍数放大(resolution multiplier),比如1x、2x或4x。”Resolution Multiplier”是用来衡量”多少个物理像素组成’一个’像素点的方法”,例如iPhone 5的屏幕分辨率为1136x640,但”显示分辨率”为568x320。这意味着4个物理像素组成了一个”显示像素”,或称”4x multiplier”。

这样其中的一个好处是,持有高分辨率显示设备的用户(典型的如苹果设备的用户)能很轻松得浏览那些能提供高质量图片的网站,从而带来很好的用户体验。与此同时,那些使用普通显示分辨率的用户也不会因为网络带宽等问题而懊恼浏览高分辨率图片较多的网站,因为这些网站能提供适合他们观看的图片。

requestAnimationFrame

屏幕每秒刷新60次,所以每一帧的时间大概是16ms。用户是非常关注动画的,当动画失帧很容易引起用户察觉。
requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API。setInterval、setTimeout是开发者主动要求浏览器去绘制,但是由于种种问题,浏览器可能会漏掉部分命令。 requestAnimationFrame 就是浏览器什么要开始绘制了浏览器自己知道,通过requestAnimationFrame 告诉开发者,这样就不会出现重复绘制丢失的问题了。目前已在多个浏览器得到了支持,包括IE10+,Firefox,Chrome,Safari,Opera等,在移动设备上,ios6以上版本以及IE mobile 10以上也支持requestAnimationFrame,唯一比较遗憾的是目前安卓上的原生浏览器并不支持requestAnimationFrame,不过对requestAnimationFrame的支持应该是大势所趋了,安卓版本的chrome 16+也是支持requestAnimationFrame的。

总的来说,requestAnimationFrame的主要特点如下

(1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧
(2)隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。
(3)requestAnimationFrame也会像setTimeout一样有一个返回值ID用于取消,可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调

canvas动画与css3动画

  • 尽量使用css3动画(不占用JS主线程 通常不阻塞 可利用硬件加速 但是不支持中间状态的监听)
  • 适当使用canvas动画(规避渲染树的计算渲染更快 但是开发成本较高 维护较麻烦)
  • 5个元素以内使用css3动画,5个以上使用canvas动画。

关于GPU加速

如何开启GPU加速
* transform属性
* opacity属性
* filter属性
如何强制使用GPU渲染

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
//或者
webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

GPU加速的缺点

  • 如果GPU加载了大量的纹理,很容易发生内存问题。这一点在移动端非常明显。所以,一定要牢记不要在页面的每个元素都使用硬件加速

参考文献:移动H5前端性能优化指南
CSS动画之硬件加速
移动前端系列——移动页面性能优化.
美团在webp方面的实践

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

web移动端页面性能优化方案

众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端。比如淘宝双11,在移动端支付的接近7成。这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑...

Android应用开发性能优化完全分析

1 背景其实有点不想写这篇文章的,但是又想写,有些矛盾。不想写的原因是随便上网一搜一堆关于性能的建议,感觉大家你一总结、我一总结的都说到了很多优化注意事项,但是看过这些文章后大多数存在一个问题就是只给...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

移动终端CPU、GPU浅析

探梦方寸间——移动终端;ARM是谁?;CPU、GPU浅析;我们对传统PC市场的CPU如数家珍,英特尔、AM;指令是CPU能听懂的语言,正如人类的语言一样,词;CISC强大高效,RISC简洁容易,这本是...

移动游戏性能优化技术干货分享——CPU篇

性能优化是游戏项目开发过程中一个永恒的话题。玩家的需求和项目的要求永远在不停增长,同屏人数、屏幕特效和场景复杂度永远在向着“榨干”硬件的趋势逼近。所以,无论硬件设备发展到何种程度,无论研发团队有多么丰...

移动游戏性能优化技术干货分享——CPU篇

性能优化是游戏项目开发过程中一个永恒的话题。玩家的需求和项目的要求永远在不停增长,同屏人数、屏幕特效和场景复杂度永远在向着“榨干”硬件的趋势逼近。所以,无论硬件设备发展到何种程度,无论研发团队有多么丰...

极光开发者沙龙 JIGUANG MEETUP —— 移动应用性能优化实践

活动背景移动互联网时代,各大互联网公司都已将自己的产品和服务全面移动化,各类新产品功能都会优先在移动 App 上尝试。 应用性能作为影响用户体验最重要的因素,在开发过程中显得尤为重要。 - 用户网...
  • jpush
  • jpush
  • 2017-05-16 10:30
  • 244

移动端Web界面滚动性能优化: Passive event listeners

移动端Web界面滚动性能优化: Passive event listeners今晚在阅读VueJS2的源码时,发现了下面的一段代码,感觉自己瞬间知识储备不够用了,所以决定深入研究一下,故总结得出此文。...

H5 缓存机制浅析 移动端 Web 加载性能优化

1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web 应用可进...

H5移动端性能优化

加载优化减少HTTP请求因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个), 所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。 a) 合并CSS、J...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)