PWA 时代的移动端图片优化新思路

时间 2019-12-20 标签 pwa 时代移动端图片优化新思路

图片一般是移动端网页中最占流量的资源。在不少类型的网站中（好比电商、社区），图片占据了网页的大部分空间。优化图片的质量和加载速度成为提升用户体验的重要途径。javascript

传统方案的弊端

目前有一些被普遍应用的方案，例如选择压缩比更高的图片格式、使用雪碧图、HTTP二、CDN等。5年前的一条知乎回答前端开发中，对图片的优化技巧有哪些？ - 贺师俊的回答 - 知乎如今依然有效，这些方案在各大网站中仍然发挥着重要的做用。html

随着移动端兴起，各类移动设备带来了丰富的机型尺寸和像素密度，逐渐暴露出以上方案共同的问题，即都是基于网站粒度的通用方案。咱们没法保证在每种机型上都达到最优的效果，只能经过一些取舍来达到较均衡的方案，从而知足大部分用户的体验需求。（虽然经过Media Query等方式能够对不一样的屏幕进行必定程度的定制，但粒度较粗且功能有限，书写起来也比较复杂。）前端

传统方案带来的弊端主要有：java

为了兼容旧版浏览器，使用新版浏览器的用户没法享受新技术带来的更优体验。(例如没法使用具备更高压缩比的WebP格式。)
一般采用的2x图方案对小屏幕尺寸是一种浪费，而在三倍屏上效果又不够好。

追求用户体验的道路没有止境。为了解决第一个问题，一些CDN厂商开始提供自适应的WebP图片转换技术，针对支持WebP的浏览器提供WebP格式图片（例如花瓣网使用的又拍云CDN）。web

而Service Worker做为PWA核心技术，为咱们带来了一些新的思路。shell

Service Worker

Service Worker是一个注册在指定源和路径下的事件驱动Worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。你能够彻底控制应用在特定情形（最多见的情形是网络不可用）下的表现。 MDN

下图是Service Worker的支持状况。移动端方面Android的支持度较好，iOS Safari从11.3版本开始支持。整体支持度在84%（受地域和目标用户群体等方面的因素，通过统计，咱们产品的设备支持度为63%）。
浏览器

Service Worker的具体使用方法这里再也不赘述。接下来将重点介绍如何使用Service Worker对图片请求作更细粒度的控制，达到渐进式优化的目标。缓存

使用WebP

WebP是一种新的图像格式，它为Web中的图像提供更好的无损压缩和有损压缩。使用WebP能够建立更小、更丰富的图像。
WebP无损图像的尺寸比PNG小26%，有损图像比相同SSIM指数的JPEG图像小25-34%。 Google

下图是WebP的兼容性一览。做为Google提出的一项技术，WebP在Android端有很好的支持，但目前的兼容性还没法在移动端网页中普遍使用。默认状况下，咱们仍然须要根据实际状况选用恰当的图片格式，在PNG/GIF/JPEG中进行取舍（例如，对于无透明度且色彩丰富的图片，一般会选用压缩比较高的JPEG格式）。服务器

而在使用Service Worker的网站中，因为咱们能够拦截和修改网络请求，所以能够针对支持WebP格式的浏览器，修改成请求对应的WebP图片连接；而在不支持的浏览器中依然请求原连接。从而达到向后兼容式的优化。网络

// sw.js
self.addEventListener('fetch', (event) => {
  const req = event.request.clone()
  let newUrl = req.url
  if (!isImgRequest(newUrl)) {
    return
  }
  // 若是浏览器支持webp格式，则请求webp格式的图片
  const acceptHeader = req.headers.get('accept')
  const supportWebp = acceptHeader && acceptHeader.includes('webp')
  if (supportWebp) {
    newUrl = getWebpUrl(newUrl)
  }
  // 请求处理过的图片连接
  event.respondWith(
    fetch(newUrl, {
      mode: 'no-cors'
    })
  )
})

function isImgRequest(url) {
  // 根据url判断当前是不是须要优化的图片请求
}

function getWebpUrl(url) {
  // 根据图片url获取到对应的webp格式url（通常的图片服务器都会提供获取图片格式转换参数）
}

有关DPI自适应的思考

对于使用rem方案来实现自适应布局的网站来讲，图片的展现宽高也会根据实际状况进行缩放。但因为图片一般采用固定的实际尺寸（例如使用2x图），当图片被缩放时，在小屏幕上会产生浪费，在大屏中效果却被打了折扣。若是咱们可以根据不一样机型，获取匹配实际物理分辨率的图片进行展现，则可针对每种设备最大程度的优化用户体验。

假设网站使用的图片存储服务提供了针对图片的缩放接口（例如，图片https://domain/key能够经过添加参数来将宽/高像素数减小到原来的0.6倍：https://domain/key/thumbnail/!60p）。针对支持Service Worker的浏览器，就能够根据设备的分辨率修改图片请求的缩放参数，从而达到设备粒度的图片尺寸定制。

这里须要注意的是Service Worker做为一种特殊的Worker不能直接操做DOM，全局做用域（经过self关键字访问）上也只有部分和window对象相同的属性和方法。所以咱们须要经过Service Worker与网页之间的通讯来获取到当前设备的屏幕尺寸和DPI等信息。代码示例以下：

// 网页代码
navigator.serviceWorker.controller.postMessage({ deviceWidth: window.screen.width * window.devicePixelRatio })

// sw.js
const TRIPLE_PIXEL = 1242 // 3x横向像素数
let deviceWidth = 0

self.addEventListener('fetch', (event) => {
  const req = event.request.clone()
  let newUrl = req.url
  if (!isImgRequest(newUrl)) {
    return
  }
  // 若是有屏幕分辨率信息，为请求url添加缩放参数
  if (deviceWidth) {
    const ratio = Math.round(deviceWidth / TRIPLE_PIXEL * 100)
    if (ratio > 0 && ratio < 100) {
      newUrl = getThumbnailUrl(newUrl, ratio)
    }
  }
  // 请求处理过的图片连接
  event.respondWith(
    fetch(newUrl, {
      mode: 'no-cors'
    })
  )
})

self.addEventListener('message', ({ data }) => {
  deviceWidth = data.deviceWidth
})

function getThumbnailUrl(url, ratio) {
  // 返回添加缩放参数的图片url
}

除了使用缩放参数，咱们也能够分别导出1x/2x/3x图（默认使用2x图），根据DPI信息将图片请求替换为对应的<n>x图便可。

总结

Service Worker的功能如此强大，目前经常使用的情形已经有离线访问、构建App Shell等。期待将来Service Worker以及其它PWA技术可以不断带给咱们新的思路。