移动端页面性能优化方案

　　【移动端页面性能优化方案】众所周知，在互联网行业里，移动端占有的比例越来越高了，尤其实在电商领域，用户购物大部分在移动端。比如淘宝双11，在移动端支付的接近7成。这就要求我们产品质量越来越高，那对于我们前端工程师来说也是一个挑战，如何让我们所开发的页面能有更好的体验，就是我们今天讨论的话题：移动端页面性能优化方案。

　　手机作为我们生活中不可或缺的设备，应用也是越来越广泛，而且移动端的用户体检也会越来越重要，那么怎么来做好移动端的性能优化呢，它的影响因素有哪些?

　　1、移动端的带宽速度较小

　　4G网络的出现提升了移动页面的加载速度，但是相对于PC端，带宽的限制也是需要考虑的因素之一。

　　2、移动端的设备性能与PC端的差异巨大

　　移动端的CPU、内存等设备的性能相比于PC端还是有很大限制的

　　3、页面本身的问题

　　接下来让我们一起来看下移动端优化的几个主要方面：

　　一、加载优化

　　对于移动端的网页来说，加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点，当然，手机站的其他前端要素优化也是不能忽略的。

　　二、减少HTTP请求

　　因为手机浏览器同时响应请求为4个请求(Android支持4个，iOS 5后可支持6个)，所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个，马海祥建议的优化要点为以下2点：

　　1、合并CSS、JavaScript

　　2、合并小图片，使用雪碧图

　　三、缓存

　　使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。

　　1、缓存一切可缓存的资源

　　2、使用长Cache(使用时间戳更新Cache)

　　3、使用外联式引用CSS、JavaScript

　　四、压缩HTML、CSS、JavaScript

　　减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip。

　　1、压缩(例如，多余的空格、换行符和缩进)

　　2、启用GZip

　　五、无阻塞

　　写在HTML头部的JavaScript(无异步)，和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载

　　六、使用首屏加载

　　首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。

　　七、按需加载

　　将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量。

　　1、LazyLoad

　　2、滚屏加载

　　3、通过Media Query加载

　　对于访问量大的网站来说，前端的优化是必须的，即使是优化1KB的大小对其影响也很大，下面马海祥就带大家来看看移动手机平台的HTML5前端优化，或许对你有帮助和启发。