为什么要最移动页面进行优化？

纵观现在移动网络的现状：

移动页面布局越来越杂乱，作用越来越炫，直接导致了文件越来越大，下载和运转速度越来越低，而速度低会形成不良影响，据统计：

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. 缓存
6. ……

首要咱们得重视一下一个页面从开端到出现结束需求阅历什么阶段，首要有四个阶段：

每个阶段的首要作业如上图所示，而咱们的优化方针是：

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

首要，来看看加载中有哪些优化手法：

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
5. ……

运用GPU加快前有比照试验：

GPU加快实际上是大幅削减了组成/制造时刻，然后大大地提高了页面速度，但GPU加快有自己的缺陷：

过多的GPU层会带来功能开支，首要原因是运用GPU加快其实是运用了GPU层的缓存，让烘托资源能够重复运用，所以一旦层多了，缓存增大，就会引起其他功能问题。

总结

本文针对页面出现的四个阶段提出了比较典型的优化手法，到最终，再提示读者一下：其实优化是双刃剑。

按需加载提高速度，但或许导致许多重绘；

Touch呼应快，但许多场景不适合；

GPU加快效率高，但内存开支大等等

Loading会让全体体会流通，但简单形成用户丢失

图片紧缩让带宽本钱下降，但或许会导致视觉作用变差

相似这样的对立点还有许多，请结合事务依照实际情况进行优化。