星乐优化帮你做好移动页面性能优化

网络市场的竞争越来越激烈。随着移动互联网的发展，我们应该更加重视移动页面的性能优化。今天，伊诺互联网将和你谈谈这件事。

首先，为什么要移动页面进行优化？

审视移动网络的现状:

移动页面布局越来越复杂，效果越来越刺眼，直接导致文件越来越大，下载运行速度越来越低，速度慢会造成不良影响。据统计；

1%的用户期望移动页面和PC页面一样快，74%的用户可以容忍5秒的响应时间，所以要保证移动页面有足够的速度。

移动页面的速度与三个因素有关，即移动网络的带宽速度、设备(CPU、GPU、浏览器)的性能以及页面本身。

目前主流移动网络标准是3g；

今年我们也看到了4g网络标准的快速发展，再次提高了移动页面的加载速度；

至于移动设备，到目前为止，iphone 6/三星Note4等设备是第一，智能设备也变得比以前更大，CPU、GPU、内存更可靠。

同时，浏览器厂商也为提高页面速度做出了不可磨灭的努力。

互联网标准供应商，手机厂商，浏览器厂商那么厉害，我们呢？我们能做的。

我们能做的就是优化移动页面本身，这也是我们专业价值的体现，所以我们需要优化移动页面性能。

怎么做手机页面优化？

在谈这个之前，我们先提一下PC常用的优化方法:

1.代码优化(css、html、js优化)

2.减少HTTP请求(精灵，文件合并...)

3.减少DOM节点

4.无阻塞(内嵌CSS，JS后...)

5.高速缓存

6.……

这些方法大多适用于移动终端，这是大家熟悉的手段。

今天，我们将讨论一些适用于移动终端的优化方法，让我们进入正题。

首先，我们必须注意一个页面从开始到演示结束需要经历哪些阶段。主要有四个阶段:

1.加载(发送请求，加载)

2.脚本执行(脚本事件)

3.渲染(重新计算样式，计算布局)

4.绘图/合成(绘图(绘制设置/绘制(大小))合成层)

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

优化目标(加载、脚本执行、渲染、绘图/合成)

下面我们来阐述一下以上阶段的优化方法。

首先，让我们来看看加载中的优化方法:

1.预加载荷

有两种预加载方式:

A.显式加载

类似于这种用户感知，我称之为显式加载。建议将这种加载方法添加到交互式页面中。一方面可以增加页面的趣味性，另一方面可以让后续页面体验更流畅。

B.隐式加载

这种提前加载1号图片的方式，让页面体验更流畅，我称之为隐式加载。这种方式的好处是节省流量，提升体验。#p#分页标题#e#

2.按需加载

按需加载是一种不可或缺的优化方法，主要有以下两种方式:

1.加载第一屏时，尽量加载第一屏的内容，而第一屏以外的元素只在第一屏出现时才加载，大大节省了流量，提高了加载时间。

2.响应式加载就是用JS或者CSS来判断分辨率，这样可以选择不同大小的图片进行介绍。好处是显而易见的，还可以加快加载速度，节省流量。

3.压缩图片

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

对于移动端的JPG文件，有这样一个结论:

1.使用大尺寸和大有损压缩率的jpg

2.使用jpegtran的无损压缩

对于巴布亚新几内亚，有以下结论:

1.使用png24制作彩色图片

2.低色彩图片使用png8

3.建议使用pngquant

4.尽量避免重定向

为什么要尽量避免重定向？

这是相同网速下的测试结果。重定向很慢，因为它重复域名查找，tcp链接和发送请求。

5.用其他方法代替图片

有两种方式，第一种是:用CSS画图3:

第二种:用图标字体代替图片

优点；加载性能好，CSS风格支持，兼容性好，矢量

缺点；仅支持单色图标，并且存在生成的字体文件大于生成的子画面文件的情况

但是iconfont不一定比图片好。这里有一个实验:

Iconfont对于大图并不比Sprite好，建议一侧小尺寸图标使用iconfont。

那么针对脚本执行中的优化方法，这里只提两点:

1.尽量避免数据URI

数据Uri在移动端不如在pc端受欢迎，因为:

经过测试，DataURI比简单的外部链接资源慢6倍，生成的代码文件比图片文件大，浏览器在解码这个base64的过程中需要消耗内存和cpu，在移动端尤为糟糕。

2.点击事件优化

在移动端，请正确使用touchstart、touchend、touch等事件，而不是延迟比较大的Click事件。由于鼠标按下，点击变慢:

那么针对渲染阶段的优化方法，这里只提两点:

1.动画优化

a)尽量使用css3动画

优点:

1.不要占用js主线程

2.硬件加速可用

3.浏览器可以优化动画

缺点:

不支持中间状态监听

b)画布动画的适当使用

优点:

可以避免渲染树的计算渲染速度更快

缺点:

开发成本高，维护麻烦。

c)合理使用RAF(requestAnimationFrame)

优点:

1.可以解决因脚本问题导致的丢帧和堵塞问题

2.支持中间状态监控

缺点:

兼容性问题

将RAF动画与settimeout动画进行比较:

1.STO动画(fps: 54)

2.raf动画(fps: 60)

得到结论:如果不需要兼容安卓4.3浏览器，请使用RAF制作脚本动画

2.高频事件优化

触摸移动和滚动等事件会导致多个渲染，可通过以下方式进行优化:

1.使用requestAnimationFrame监控帧的变化，以便可以在正确的时间执行渲染#p#分页标题#e#

2.增加响应更改的时间间隔，减少重绘的次数。

第三，对于合成/渲染，仅提出一种优化方法:

GPU加速

触发GPU加速的方法有:

1.CSS3过渡

2.CSS3 3D转换

3.三维绘图

4.录像

5.……

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

其实GPU加速大大减少了合成/渲染时间，从而大大提高了页面速度，但是GPU加速也有其自身的缺点:

GPU层数过多会带来性能开销。主要是使用GPU加速实际上是利用了GPU层的缓存，所以渲染资源是可以重用的。所以一旦层数多了，缓存就会增加，会造成其他性能问题。

总结

针对页面呈现的四个阶段提出了一些典型的优化方法，提醒读者优化其实是一把双刃剑。

按需加载提升速度，但可能会导致大量重绘；

Touch反应快，但很多场景不适合；

GPU加速效率高，但是内存开销大等等

加载会使整体体验流畅，但容易造成用户流失

图像压缩降低了带宽成本，但可能导致视觉效果不佳

类似这样的矛盾很多，请根据实际情况进行优化。

伊诺互联网由专业的建设团队组成，配备了相当成熟的网站建设者，依托公司自主开发的后台管理系统的技术优势，确保网站程序能够稳定投入使用。数百个程序已经过测试和升级，使您的网站更加安全！

北京专业网站建设企业的选择可以满足您定制网站开发的需求。