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

zhaofeihao 发布于2019-08-23 10:39 / 538人阅读

摘要：是一个注册在指定源和路径下的事件驱动。移动端方面的支持度较好，从版本开始支持。作为提出的一项技术，在端有很好的支持，但目前的兼容性还无法在移动端网页中广泛使用。从而达到向后兼容式的优化。

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

传统方案的弊端

目前有一些被广泛应用的方案，例如选择压缩比更高的图片格式、使用雪碧图、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代码优化思路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96560.html

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

摘要：是一个注册在指定源和路径下的事件驱动。移动端方面的支持度较好，从版本开始支持。作为提出的一项技术，在端有很好的支持，但目前的兼容性还无法在移动端网页中广泛使用。从而达到向后兼容式的优化。图片通常是移动端网页中最占流量的资源。在很多类型的网站中（比如电商、社区），图片占据了网页的大部分空间。优化图片的质量和加载速度成为提高用户体验的重要途径。传统方案的弊端目前有一些被广泛应用的方案...

RaoMeng 2019-08-29 16:16 评论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