PWA 時代的移動端圖片優化新思路

RaoMeng 發布于2019-08-29 16:16 / 404人閱讀

摘要：是一個注冊在指定源和路徑下的事件驅動。移動端方面的支持度較好，從版本開始支持。作為提出的一項技術，在端有很好的支持，但目前的兼容性還無法在移動端網頁中廣泛使用。從而達到向后兼容式的優化。

圖片通常是移動端網頁中最占流量的資源。在很多類型的網站中（比如電商、社區），圖片占據了網頁的大部分空間。優化圖片的質量和加載速度成為提高用戶體驗的重要途徑。

傳統方案的弊端

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

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

傳統方案帶來的弊端主要有：

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

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

追求用戶體驗的道路沒有止境。為了解決第一個問題，一些CDN廠商開始提供自適應的WebP圖片轉換技術，針對支持WebP的瀏覽器提供WebP格式圖片（例如花瓣網使用的又拍云CDN）。

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

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信息將圖片請求替換為對應的x圖即可。

總結

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

云服務器 GPU云服務器 webrtc移動端傳輸優化移動端js圖片打包 H5移動端上傳圖片 java代碼優化思路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113639.html

PWA 時代的移動端圖片優化新思路

摘要：是一個注冊在指定源和路徑下的事件驅動。移動端方面的支持度較好，從版本開始支持。作為提出的一項技術，在端有很好的支持，但目前的兼容性還無法在移動端網頁中廣泛使用。從而達到向后兼容式的優化。圖片通常是移動端網頁中最占流量的資源。在很多類型的網站中（比如電商、社區），圖片占據了網頁的大部分空間。優化圖片的質量和加載速度成為提高用戶體驗的重要途徑。傳統方案的弊端目前有一些被廣泛應用的方案...

zhaofeihao 2019-08-23 10:39 評論0 收藏0
鳥瞰前端 , 再論性能優化

摘要：前端性能優化的涉及點從服務器到協議再到宿主環境本身都要有比較深刻的認識，業界目前主要還是以雅虎總結出來條前端性能優化的黃金軍規為參考。歡迎大家前往騰訊云技術社區，獲取更多騰訊海量技術實踐干貨哦~ 導語 : 從事前端有6年+的時間了，從最開始的美工到重構再到偏向js邏輯開發的前端開發，一直在前端這個行業里面摸索和學習，我現在將自己這些年的一個心得體會來個系統性的梳理寫成一篇關于性能優化...

voidking 2019-08-29 13:47 評論0 收藏0
前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
前端每周清單半年盤點之 PWA 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于...

崔曉明 2019-08-20 19:01 評論0 收藏0
Vue全家桶商城全站升級之引入HTTPS,PWA,錯誤監控,持續構建。

摘要：免費升級到升級到后，服務器可以開啟版本，對比性能和緩存各方面要更好，還有其他新特性，可以啟動功能，更好的進行離線緩存，更好的離線體驗。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機掃描二維碼查看: showImg(http...

zengdongbao 2019-08-23 10:22 評論0 收藏0