H5开发小技巧二、性能优化

基础部分：

1.图片压缩

1）前端压缩：

ps存图：



大图或者色彩比较丰富的图片一般存为jpg格式



小图，色彩比较单一的图片、需要透明背景的图片存为png



如果不太确定，可以分别选择这两种格式，对比下大小；

上线前可以使用tinyPNG对png图片进行压缩：可以压缩到原图的20%-30%左右，并且清晰度可以保证。

tinyPNG地址：https://tinypng.com/

2）.后端返回数据中的图片，需要符合我们需要的尺寸（比如在640宽的UI图上，这张图是400px宽，那就需要后端返回400px宽的图）

如果图片很少 && 图片宽不大于640px的情况下，也可以不用单独缩图；

如果有大量图片（比如相册之类的），一定要麻烦后端缩图，不然会非常耗流量！！！这是友拍标签分享页在缩图前后的流量和速度对比：





2.按照普通3G速度测算，首屏加载资源超过500KB就要看下能够优化减少请求了，最大一定不要超过1024KB。

3.按需加载，减少首页请求数。

4.减少使用float布局，渲染时计算量比较大。

5.减少dom节点，优化html结构。

6.动画元素使用绝对定位（absolute或者fixed），减少不必要的元素渲染。

7.使用tap事件代替click事件。

8.能用css完成的尽量不要用js。

9.使用sprite图代替多个小图（微信中调用尺寸不要超过1000*1000，大于这个尺寸，页面缩放会有问题，同时容易页面崩溃）。