PWA 時(shí)代的移動(dòng)端圖片優(yōu)化新思路

zhaofeihao 發(fā)布于2019-08-23 10:39 / 583人閱讀

摘要：是一個(gè)注冊(cè)在指定源和路徑下的事件驅(qū)動(dòng)。移動(dòng)端方面的支持度較好，從版本開始支持。作為提出的一項(xiàng)技術(shù)，在端有很好的支持，但目前的兼容性還無法在移動(dòng)端網(wǎng)頁中廣泛使用。從而達(dá)到向后兼容式的優(yōu)化。

圖片通常是移動(dòng)端網(wǎng)頁中最占流量的資源。在很多類型的網(wǎng)站中（比如電商、社區(qū)），圖片占據(jù)了網(wǎng)頁的大部分空間。優(yōu)化圖片的質(zhì)量和加載速度成為提高用戶體驗(yàn)的重要途徑。

傳統(tǒng)方案的弊端

目前有一些被廣泛應(yīng)用的方案，例如選擇壓縮比更高的圖片格式、使用雪碧圖、HTTP2、CDN等。5年前的一條知乎回答前端開發(fā)中，對(duì)圖片的優(yōu)化技巧有哪些？ - 賀師俊的回答 - 知乎現(xiàn)在依然有效，這些方案在各大網(wǎng)站中仍然發(fā)揮著重要的作用。

隨著移動(dòng)端興起，各種移動(dòng)設(shè)備帶來了豐富的機(jī)型尺寸和像素密度，逐漸暴露出以上方案共同的問題，即都是基于網(wǎng)站粒度的通用方案。我們無法保證在每種機(jī)型上都達(dá)到最優(yōu)的效果，只能通過一些取舍來達(dá)到較均衡的方案，從而滿足大部分用戶的體驗(yàn)需求。（雖然通過Media Query等方式可以對(duì)不同的屏幕進(jìn)行一定程度的定制，但粒度較粗且功能有限，書寫起來也比較復(fù)雜。）

傳統(tǒng)方案帶來的弊端主要有：

為了兼容舊版瀏覽器，使用新版瀏覽器的用戶無法享受新技術(shù)帶來的更優(yōu)體驗(yàn)。(例如無法使用具有更高壓縮比的WebP格式。)

通常采用的2x圖方案對(duì)小屏幕尺寸是一種浪費(fèi)，而在三倍屏上效果又不夠好。

追求用戶體驗(yàn)的道路沒有止境。為了解決第一個(gè)問題，一些CDN廠商開始提供自適應(yīng)的WebP圖片轉(zhuǎn)換技術(shù)，針對(duì)支持WebP的瀏覽器提供WebP格式圖片（例如花瓣網(wǎng)使用的又拍云CDN）。

而Service Worker作為PWA核心技術(shù)，為我們帶來了一些新的思路。

Service Worker

Service Worker是一個(gè)注冊(cè)在指定源和路徑下的事件驅(qū)動(dòng)Worker。它采用JavaScript控制關(guān)聯(lián)的頁面或者網(wǎng)站，攔截并修改訪問和資源請(qǐng)求，細(xì)粒度地緩存資源。你可以完全控制應(yīng)用在特定情形（最常見的情形是網(wǎng)絡(luò)不可用）下的表現(xiàn)。MDN

下圖是Service Worker的支持情況。移動(dòng)端方面Android的支持度較好，iOS Safari從11.3版本開始支持。總體支持度在84%（受地域和目標(biāo)用戶群體等方面的因素，經(jīng)過統(tǒng)計(jì)，我們產(chǎn)品的設(shè)備支持度為63%）。

Service Worker的具體使用方法這里不再贅述。接下來將重點(diǎn)介紹如何使用Service Worker對(duì)圖片請(qǐng)求做更細(xì)粒度的控制，達(dá)到漸進(jìn)式優(yōu)化的目標(biāo)。

使用WebP

WebP是一種新的圖像格式，它為Web中的圖像提供更好的無損壓縮和有損壓縮。使用WebP可以創(chuàng)建更小、更豐富的圖像。
WebP無損圖像的尺寸比PNG小26%，有損圖像比相同SSIM指數(shù)的JPEG圖像小25-34%。Google

下圖是WebP的兼容性一覽。作為Google提出的一項(xiàng)技術(shù)，WebP在Android端有很好的支持，但目前的兼容性還無法在移動(dòng)端網(wǎng)頁中廣泛使用。默認(rèn)情況下，我們?nèi)匀恍枰鶕?jù)實(shí)際情況選用恰當(dāng)?shù)膱D片格式，在PNG/GIF/JPEG中進(jìn)行取舍（例如，對(duì)于無透明度且色彩豐富的圖片，通常會(huì)選用壓縮比較高的JPEG格式）。

而在使用Service Worker的網(wǎng)站中，由于我們可以攔截和修改網(wǎng)絡(luò)請(qǐng)求，因此可以針對(duì)支持WebP格式的瀏覽器，修改為請(qǐng)求對(duì)應(yīng)的WebP圖片鏈接；而在不支持的瀏覽器中依然請(qǐng)求原鏈接。從而達(dá)到向后兼容式的優(yōu)化。

// sw.js
self.addEventListener("fetch", (event) => {
  const req = event.request.clone()
  let newUrl = req.url
  if (!isImgRequest(newUrl)) {
    return
  }
  // 如果瀏覽器支持webp格式，則請(qǐng)求webp格式的圖片
  const acceptHeader = req.headers.get("accept")
  const supportWebp = acceptHeader && acceptHeader.includes("webp")
  if (supportWebp) {
    newUrl = getWebpUrl(newUrl)
  }
  // 請(qǐng)求處理過的圖片鏈接
  event.respondWith(
    fetch(newUrl, {
      mode: "no-cors"
    })
  )
})

function isImgRequest(url) {
  // 根據(jù)url判斷當(dāng)前是否是需要優(yōu)化的圖片請(qǐng)求
}

function getWebpUrl(url) {
  // 根據(jù)圖片url獲取到對(duì)應(yīng)的webp格式url（一般的圖片服務(wù)器都會(huì)提供獲取圖片格式轉(zhuǎn)換參數(shù)）
}

有關(guān)DPI自適應(yīng)的思考

對(duì)于使用rem方案來實(shí)現(xiàn)自適應(yīng)布局的網(wǎng)站來說，圖片的展示寬高也會(huì)根據(jù)實(shí)際情況進(jìn)行縮放。但由于圖片通常采用固定的實(shí)際尺寸（例如使用2x圖），當(dāng)圖片被縮放時(shí)，在小屏幕上會(huì)產(chǎn)生浪費(fèi)，在大屏中效果卻被打了折扣。如果我們能夠根據(jù)不同機(jī)型，獲取匹配實(shí)際物理分辨率的圖片進(jìn)行展示，則可針對(duì)每種設(shè)備最大程度的優(yōu)化用戶體驗(yàn)。

假設(shè)網(wǎng)站使用的圖片存儲(chǔ)服務(wù)提供了針對(duì)圖片的縮放接口（例如，圖片https://domain/key可以通過添加參數(shù)來將寬/高像素?cái)?shù)減少到原來的0.6倍：https://domain/key/thumbnail/!60p）。針對(duì)支持Service Worker的瀏覽器，就可以根據(jù)設(shè)備的分辨率修改圖片請(qǐng)求的縮放參數(shù)，從而達(dá)到設(shè)備粒度的圖片尺寸定制。

這里需要注意的是Service Worker作為一種特殊的Worker不能直接操作DOM，全局作用域（通過self關(guān)鍵字訪問）上也只有部分和window對(duì)象相同的屬性和方法。因此我們需要通過Service Worker與網(wǎng)頁之間的通信來獲取到當(dāng)前設(shè)備的屏幕尺寸和DPI等信息。代碼示例如下：

// 網(wǎng)頁代碼
navigator.serviceWorker.controller.postMessage({ deviceWidth: window.screen.width * window.devicePixelRatio })

// sw.js
const TRIPLE_PIXEL = 1242 // 3x橫向像素?cái)?shù)
let deviceWidth = 0

self.addEventListener("fetch", (event) => {
  const req = event.request.clone()
  let newUrl = req.url
  if (!isImgRequest(newUrl)) {
    return
  }
  // 如果有屏幕分辨率信息，為請(qǐng)求url添加縮放參數(shù)
  if (deviceWidth) {
    const ratio = Math.round(deviceWidth / TRIPLE_PIXEL * 100)
    if (ratio > 0 && ratio < 100) {
      newUrl = getThumbnailUrl(newUrl, ratio)
    }
  }
  // 請(qǐng)求處理過的圖片鏈接
  event.respondWith(
    fetch(newUrl, {
      mode: "no-cors"
    })
  )
})

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

function getThumbnailUrl(url, ratio) {
  // 返回添加縮放參數(shù)的圖片url
}

除了使用縮放參數(shù)，我們也可以分別導(dǎo)出1x/2x/3x圖（默認(rèn)使用2x圖），根據(jù)DPI信息將圖片請(qǐng)求替換為對(duì)應(yīng)的x圖即可。

總結(jié)

Service Worker的功能如此強(qiáng)大，目前常用的情形已經(jīng)有離線訪問、構(gòu)建App Shell等。期待未來Service Worker以及其它PWA技術(shù)能夠不斷帶給我們新的思路。