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

移动端性能主要影响因素

移动端与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方面的实践