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

移动端性能主要影响因素

移动端与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存储数据，增加一个网络请求；增加开发难度

<