移动web性能优化篇-图片的加载
控制图片加载
在移动浏览器打开网页，经常能感觉到明显的卡顿。造成卡顿的原因除了页面 DOM 结构复杂、CSS 过多地触发 Layout/Paint/Composite、存在复杂 JS 逻辑等等，也可能是没有控制图片的加载时机。
通常浏览器会并发加载 6 个同域名图片，如果做了域名散列，那很可能在打开页面后的短短几秒内，几十个图片都在加载。这些连接带来的 TCP、带宽、CPU、内存等开销，很容易让页面卡顿。所以在移动端，我们要让图片加载变得可控。
- 按需加载图片。 在 PC 端，我们基本都会做图片 Lazy Load，这个优化策略在移动端同样适用。由于移动端性能有限、带宽昂贵，Lazy Load 更为重要。实际上不光是图片可以做 Lazy Load，页面所有资源包括 DOM 节点都应该做成按需加载。通常在移动端，我们只加载页面可视区域及其下方一定距离内的资源。
- 顺序加载图片。 在 PC 端，由于硬件性能和带宽足够，并行加载更多的图片通常是最好的选择。而在移动端，人为控制图片加载顺序，例如使其从上到下、从左到右逐个加载，有时可以带来更好的体验。
- 不要在页面滚定时加载图片。 按需加载图片逻辑需要监听页面滚动事件，根据页面当前可视区域决定加载哪些图片。在移动端滚动页面本来就很耗费性能，如果这时候还要加载图片，非常容易造成页面卡顿。在页面滚定停止之后才开始载入图片，能有效减少这种卡顿。