? ????? ?? ????? ?? ?? ??? ???? ?? ?????? ???? ????? ??? ???????. ???? ??? ??? ????.

????? ?? ???? ??? ???? ????? ??? ?????. ??? ???? ???? ???? ??? ??? ???? ? ? ?????. ?? ????? ?????? ?? ?? ??, ?? ?? ??, ?? ?? ?? ?? ?? ?? ?? ??? ?? ??? ????. ?? ?? ???? ???? ??? ??? ?? ?? ??? ?? ??? ??? ?? ??? ??? ???? ??? ????. [?? ?? ?? : ?? ???? ?? ????]

??? ???

?? ??? ???? ?? ? ??? ??? ?? ??? ????? ?? ?? ??? ??? ??? ????? ??? ?????? ??? ??? ??????. ??? ??? ???? ?? ??? ???? ?? ??? ??? ?? ???? ?? ? ????. ????? ???? ????? ??? ???? ??????.

??? ??? ?? ??

?? ?? ???? ? ??? ???? JPEG/JPG, PNG, GIF, WebP, Base64, SVG ?? ????. ??? ???? ??? ??? ????. :

??? ??? ??? ???? ????? ??? ??? ??? ??? ? ???, ??? ???? ???? ??? ??? ??? ?? ?? ??? ??? ?? ? ????.

???? ?? ??

???? ??? ?? ??, ??? ?? ??, ?? ??, ??? ???, ??? ???? ?? ??? ??? ?? ??? ???? Tencent Cloud Image Server? ?????. ? ??. ??? ??? ??? URL? ??? ????? ???? ??? ? ???, ??? ??? ???? ??? ?? ???? ?? ??? ? CDN ??? ?????. ?? ??? ?? ??? ?? ????. 圖片縮放、圖片降質(zhì)，格式轉(zhuǎn)換，圖片裁剪、圖片圓角等功能。這些功能可以通過(guò)在圖片URL中添加規(guī)定參數(shù)就能實(shí)現(xiàn)，圖片服務(wù)器會(huì)根據(jù)參數(shù)設(shè)置提前將圖片處理完成并保存到CDN服務(wù)器，這樣大大的減少圖片傳輸大小。

目前后臺(tái)接口下發(fā)返回的圖片 URL 都是未設(shè)置圖片參數(shù)預(yù)處理，比如一張 800x800 尺寸高清的商品圖，體積大概300k 左右，這樣就很容易導(dǎo)致圖片加載和渲染慢、用戶(hù)流量消耗大，嚴(yán)重影響了用戶(hù)體驗(yàn)。所以我們結(jié)合騰訊云的圖片處理功能，網(wǎng)絡(luò)圖片加載前，先檢測(cè)是否是騰訊云域名的圖片URL，如果域名匹配，對(duì)圖片URL進(jìn)行預(yù)處理，預(yù)處理包括添加縮放參數(shù)，添加降質(zhì)參數(shù)，添加WebP參數(shù)的方式減少圖片網(wǎng)絡(luò)傳輸大小

我們先看一張通過(guò)圖片服務(wù)器是騰訊云圖片處理能力，通過(guò)設(shè)置圖片縮放/降質(zhì)/WebP，一張尺寸800x800，體積246KB圖片，最后輸出生成25.6KB，圖片體積足足減少了80%，效果顯著。

圖片縮放

目前業(yè)務(wù)后臺(tái)都是原圖上傳，原始圖尺寸可能比客戶(hù)端實(shí)際顯示的尺寸要大，一方面導(dǎo)致圖片加載慢，另一方面導(dǎo)致用戶(hù)流量的浪費(fèi)，其中如果是一張很大尺寸圖片加載也會(huì)影響渲染性能，會(huì)讓用戶(hù)感覺(jué)卡頓，影響用戶(hù)體驗(yàn)。通過(guò)添加縮放參數(shù)的方式，指定圖片服務(wù)器下發(fā)更小和更匹配實(shí)際顯示size的圖片尺寸。

圖片降質(zhì)

圖片服務(wù)器支持圖片質(zhì)量，取值范圍 0-100，默認(rèn)值為原圖質(zhì)量，通過(guò)降低圖片質(zhì)量可以減少圖片大小，但是質(zhì)量降低太多也會(huì)影響圖片的顯示效果，網(wǎng)絡(luò)默認(rèn)降圖片質(zhì)量參數(shù)設(shè)置為85，同時(shí)通過(guò)小程序提供的：wx.getNetworkType、wx.onNetworkStatusChange、offNetworkStatusChange的接口監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化來(lái)獲取當(dāng)前用戶(hù)的網(wǎng)絡(luò)類(lèi)型networkType，比如用戶(hù)當(dāng)前使用的4G網(wǎng)絡(luò)，則圖片質(zhì)量會(huì)動(dòng)態(tài)設(shè)置為80，對(duì)于大部分業(yè)務(wù)情況，一方面可以大幅減少圖片下載大小和保證用戶(hù)使用體驗(yàn)，另一方面節(jié)省用戶(hù)瀏覽 ，目前添加圖片降質(zhì)參數(shù)至少可以減少30-40%

?? ??? ??????? ??? ??? URL? ?? ??? ???? ???? ????. ?? ?? 800x800 ??? ??? ?? ???? ??? ? 300k???. , ??? ?? ?? ??? ?? ? ??? ??? ???? ??? ??? ??? ???? ??? ??? ??? ??? ?? ? ????. ??? Tencent Cloud? ??? ?? ??? ???? ???? ???? ???? ?? ?? Tencent Cloud ??? ??? ??? URL?? ??? ?????. code>? ???? ??? URL ? ?? ?? ???? ??, ?? ?? ???? ?? ? WebP ???? ??? ???? ?? ??? ?????. code>? ???? ??? ???? ?? ??? ????. ???? ?? ?? ??? ?? Tencent Cloud? ?? ?? ??? ???? ??? ???????. ?? ?? ??/??/WebP? ???? ?? ??? <code>800x800 ? <code>246KB ??, ?? ??? 25.6KB, ??? ??? 80% ???? ??? ??? ????. ?? ??. ??????

????? ?? ????

???? ???? ???? ?? ???? ?????, ????? ?? ??? ??? ?????? ???? ?? ???? ? ? ????. ??? ??? ???, ????? ?? ???? ????? ??? ???? ????? ???. ???? ???? ??? ??? ??? ??? ????. ?? ?? ????? ???? ??? ??? ? ?? ?? ????? ??? ? ??? ??? ??? ????? ?????. ??

???? ?? ????

???? ??? ?? ??? ???? ? ??? 0-100?? ???? ?????. ??, ??? ??? ?? ??? ??? ?? ? ???, ??? ?? ?? ??? ???? ?? ???? ??? ????. ?? ???? ??? ?? ?? ????? 85? ???? ????. ?? ????? ?? ?????: wx .getNetworkType, wx.onNetworkStatusChange ? offNetworkStatusChange? ?????? ???? ?? ??? ?????? ?? ??? ?????. ???? ???? ?? networkType(?: user) ?? ???? 4G ????? ?? ??? ??? ???? ???? ???? ???? 80?? ?????. , ????? ??? ???? ??? ?? ??? ??? ??? ??? ? ???, ?? ????? ??? ???? ??? ?? ??? ??? ??? ??? ? ????. ????? ??? ?? ??? ??? ? ????. ?? ??? ?? ????? ???? ??? ??? ??? 30-40% ?? ? ????. ??

/**
 * 設(shè)置網(wǎng)絡(luò)情況
 */
const setNetwork = (res: Record<string, any>) => {
  const { isConnected = true, networkType = &#39;wifi&#39; } = res;

  this.globalData.isConnected = isConnected;
  this.globalData.networkType = networkType.toLowerCase();
  this.events.emit(EventsEnum.UPDATE_NETWORK, networkType);
};

wx.getNetworkType({ success: (res) => setNetwork(res) });
wx.offNetworkStatusChange((res) => setNetwork(res));
wx.onNetworkStatusChange((res) => setNetwork(res));

/**
 * 根據(jù)網(wǎng)絡(luò)環(huán)境設(shè)置不同質(zhì)量圖片
 */
const ImageQuality: Record<string, number> = {
  wifi: 85,
  &#39;5g&#39;: 85,
  &#39;4g&#39;: 80,
  &#39;3g&#39;: 60,
  &#39;2g&#39;: 60,
};

/**
 * 獲取圖片質(zhì)量
 */
export const getImageQuality = () => ImageQuality[getApp().globalData.networkType ?? &#39;wifi&#39;];

WebP ??

??? ??? ???? ??? ??, ?? ? ?? ????? ????. WebP ??? ??? ?? ?? ? ??? ?? ??? ??? ?????. Google ?? ???? ??? PNG? ???? WebP ??? ???? ???? 26% ????, WebP ??? ?? ???? ??? JPG ????? ???? 25-34% ????. ??? ????(Taobao), ????(JD.com), ????(Meituan) ? ?? ??? ??? ??? ???? ??.

WebP 圖片格式提供有損壓縮與無(wú)損壓縮的圖片格式。按照Google官方的數(shù)據(jù)，與PNG相比，WebP無(wú)損圖像的字節(jié)數(shù)要少26％，WebP有損圖像比同類(lèi)JPG圖像字節(jié)數(shù)少25-34％?，F(xiàn)如今各大互聯(lián)網(wǎng)公司的產(chǎn)品都已經(jīng)使用了，如淘寶、京東和美團(tuán)等。

這里放一個(gè) WebP 示例鏈接（GIF、PNG、JPG 轉(zhuǎn) Webp），直觀感受 WebP 在圖片大小上的優(yōu)勢(shì)。

在移動(dòng)端中 WebP的兼容性，大部分?jǐn)?shù)用戶(hù)都已經(jīng)支持了 Can I use... Support tables for HTML5, CSS3, etc，

針對(duì)png/jpg圖片格式，自動(dòng)添加WebP參數(shù)，轉(zhuǎn)成WebP圖片格式。雖然WebP相比png/jpg圖片解碼可能需要更長(zhǎng)時(shí)間，但相對(duì)網(wǎng)絡(luò)傳輸速度提升還是很大。目前 ios 13系統(tǒng)版本有不少用戶(hù)量的占比，小程序端獲取當(dāng)前系統(tǒng)版本，降級(jí)處理不添加WebP參數(shù)。

// 檢查是否支持webp格式
const checkSupportWebp = () => {
  const { system } = wx.getSystemInfoSync();
  const [platform, version] = system.split(' ');

  if (platform.toLocaleUpperCase() === PlatformEnum.IOS) {
    return Number(version.split('.')[0]) > IOS_VERSION_13;
  }

  return true; // 默認(rèn)支持webp格式
};

提示：由于目前圖片服務(wù)器并不支持、SVG、GIF轉(zhuǎn)WebP，并沒(méi)有做處理

優(yōu)化效果

測(cè)試我們小程序首頁(yè)列表接口加載圖片，來(lái)對(duì)比優(yōu)化前后的效果

WebP ?? ??(GIF, PNG, JPG to Webp), WebP? ??? ??? ???? ????? ?????.

優(yōu)化前	圖片數(shù)	不支持 WebP	支持 WebP
2300K	10	523K (降低 77%+)	315K (降低 86%+)
248M	100	69M (降低 72%+)	38M (降低 84%+)??? ?? ?????

??? ?????? WebP ?????? ?? ???? ???? ???? ??????? ? ???... HTML5, CSS3 ?? ?? ???,

??

?? png/jpg ??? ??? ?? WebP ????? ???? ???? WebP ??? ???? ?????. WebP? png/jpg ????? ????? ? ??? ? ?? ?? ? ??? ???? ???? ?? ??? ??? ?? ?????. ?? ios 13 ??? ??? ?? ???? ???? ???, ???? ?? ??? ??? ???? ?????? ??? ?? WebP ????? ???? ????.

import IntersectionObserver from 'utils/observer/observer';

const ob = new IntersectionObserver({
  selector: '.goods-item', // 指定監(jiān)聽(tīng)的目標(biāo)節(jié)點(diǎn)元素
  observeAll: true, // 是否同時(shí)觀測(cè)多個(gè)目標(biāo)節(jié)點(diǎn)
  context: this, // 小程序 this 對(duì)象實(shí)例
  delay: 200, // 調(diào)用 onFinal 方法的間隔時(shí)間，默認(rèn) 200ms
  onEach: ({ dataset }) => {
    // 每一次觸發(fā)監(jiān)聽(tīng)調(diào)用時(shí)，觸發(fā) onEach 方法，可以對(duì)數(shù)據(jù)進(jìn)行一些過(guò)濾處理
    const { key } = dataset || {};
    return key;
  },
  onFinal: (data) => {
    // 在觸發(fā)監(jiān)聽(tīng)調(diào)用一段時(shí)間 delay 后，會(huì)調(diào)用一次 onFinal 方法，可以進(jìn)行埋點(diǎn)上報(bào)
    if (!data) return;
    console.log('module view data', data);
  },
});

// 內(nèi)置函數(shù)方法，如下：
ob.connect(); // 開(kāi)始監(jiān)聽(tīng)
ob.disconnect(); // 停止監(jiān)聽(tīng)
ob.reconnect(); // 重置監(jiān)聽(tīng)

???: ?? ??? ??? SVG, GIF? WebP? ???? ?? ???? ???? ??? ???? ????

????? ????

???? ???? ????? ?? ??????? ??? ??? ????? ??? ?? ?? ??? ??????

< table>??? ??? ?? WebP? ???? ??< th align="left">WebP ????2300K??10??523K(77%+ ??)??315K (86%+ ??) ????248M??100??69M (72%+ ??)??3,800? (84%+ ??)????????

經(jīng)過(guò)我們通過(guò)使用騰訊云圖片服務(wù)器的圖片處理功能，以及動(dòng)態(tài)處理圖片格式的方式，減少圖片體積，提高圖片加載速度，帶來(lái)的收益比非常可觀的

圖片懶加載

懶加載是一種性能優(yōu)化的方式，將頁(yè)面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動(dòng)到可視區(qū)域后再去加載，對(duì)于頁(yè)面加載性能上會(huì)有很大的提升，也提高了用戶(hù)體驗(yàn)。

實(shí)現(xiàn)原理

使用小程序提供Intersection Observer API，監(jiān)聽(tīng)某些節(jié)點(diǎn)是否可以被用戶(hù)看見(jiàn)、有多大比例可以被用戶(hù)看見(jiàn)。這樣我們就能判斷圖片元素是否在可是范圍中，進(jìn)行圖片加載。

我們基于小程序的Intersection Observer API，封裝一個(gè)監(jiān)聽(tīng)模塊曝光 IntersectionObserver函數(shù)工具，提供以下用法

import IntersectionObserver from 'utils/observer/observer';

const ob = new IntersectionObserver({
  selector: '.goods-item', // 指定監(jiān)聽(tīng)的目標(biāo)節(jié)點(diǎn)元素
  observeAll: true, // 是否同時(shí)觀測(cè)多個(gè)目標(biāo)節(jié)點(diǎn)
  context: this, // 小程序 this 對(duì)象實(shí)例
  delay: 200, // 調(diào)用 onFinal 方法的間隔時(shí)間，默認(rèn) 200ms
  onEach: ({ dataset }) => {
    // 每一次觸發(fā)監(jiān)聽(tīng)調(diào)用時(shí)，觸發(fā) onEach 方法，可以對(duì)數(shù)據(jù)進(jìn)行一些過(guò)濾處理
    const { key } = dataset || {};
    return key;
  },
  onFinal: (data) => {
    // 在觸發(fā)監(jiān)聽(tīng)調(diào)用一段時(shí)間 delay 后，會(huì)調(diào)用一次 onFinal 方法，可以進(jìn)行埋點(diǎn)上報(bào)
    if (!data) return;
    console.log('module view data', data);
  },
});

// 內(nèi)置函數(shù)方法，如下：
ob.connect(); // 開(kāi)始監(jiān)聽(tīng)
ob.disconnect(); // 停止監(jiān)聽(tīng)
ob.reconnect(); // 重置監(jiān)聽(tīng)

然后在我們的FreeImage圖片組件，添加可視區(qū)域加載圖片的功能，以下是部分代碼

import IntersectionObserver from 'utils/observer';

Component({
  properties: {
    src: String,
    /**
     * 是否開(kāi)啟可視區(qū)域加載圖片
     */
    observer: {
      type: Boolean,
      value: false,
    },
    ....
  },

  data: {
    isObserver: false,
    ...
  },

  lifetimes: {
    attached() {
      // 開(kāi)啟可視區(qū)域加載圖片
      if (this.data.observer) {
        this.createObserver();
      }
    },
  },
  methods: {
    ...

    /**
     * 監(jiān)聽(tīng)圖片是否進(jìn)入可視區(qū)域
     */
    createObserver() {
      const ob = new IntersectionObserver({
        selector: '.free-image',
        observeAll: true,
        context: this,
        onFinal: (data = []) => {
          data.forEach((item: any) => {
            this.setData({
              isObserver: true,
            });
            ob.disconnect(); // 取消監(jiān)聽(tīng)
          });
        },
      });

      ob.connect(); // 開(kāi)始監(jiān)聽(tīng)
    }
  }
})

<free-image observer  />

優(yōu)化效果

測(cè)試我們小程序首頁(yè)列表，使用圖片懶加載的效果

通過(guò)使用圖片懶加載的功能，減少圖片數(shù)量的加載，有效提高頁(yè)面加載性能。在上述我們已經(jīng)對(duì)圖片體積進(jìn)行優(yōu)化過(guò)，所以在我們小程序中，只有在網(wǎng)絡(luò)情況較差的情況下，才會(huì)自動(dòng)開(kāi)啟圖片懶加載功能。

優(yōu)化請(qǐng)求數(shù)

我們項(xiàng)目中有很多本地圖片資源，比如一些 icon 圖標(biāo)、標(biāo)簽類(lèi)切圖、背景圖、圖片按鈕等。而小程序分包大小是有限制：整個(gè)小程序所有分包大小不超過(guò) 20M，而單個(gè)分包/主包大小不能超過(guò) 2M。所以為了減輕小程序體積，本地圖片資源需要進(jìn)行調(diào)整，比如圖片壓縮、上傳到 CDN 服務(wù)器。這樣能減少了小程序主包大小，而大部分圖片都在騰訊云 CDN 服務(wù)器中，雖然可以加速資源的請(qǐng)求速度，當(dāng)頁(yè)面打開(kāi)需要同時(shí)下載大量的圖片的話(huà)，就會(huì)嚴(yán)重影響了用戶(hù)的使用體驗(yàn)。

針對(duì)此問(wèn)題，需要找到權(quán)衡點(diǎn)來(lái)實(shí)現(xiàn)來(lái)優(yōu)化請(qǐng)求數(shù)，首先我們把圖片資源進(jìn)行分類(lèi)，以及使用場(chǎng)景，最后確定我們方案如下：

• 較大體積的圖片，選擇上傳到 CDN 服務(wù)器
• 單色圖標(biāo)使用 iconfont 字體圖標(biāo)，多彩圖標(biāo)則使用svg格式
• 標(biāo)簽類(lèi)的圖片，則生成雪碧圖之后上傳到 CDN 服務(wù)器
• 圖片體積小于10KB，結(jié)合使用場(chǎng)景，則考慮base64 ，比如一張圖片體積為3KB的背景圖，由于小程序css background不支持本地圖片引入，可以使用 base64 方式實(shí)現(xiàn)

其他策略

大圖檢測(cè)

實(shí)現(xiàn)大圖檢測(cè)機(jī)制，及時(shí)發(fā)現(xiàn)圖片不符合規(guī)范的問(wèn)題，當(dāng)發(fā)現(xiàn)圖片尺寸太大，不符合商品圖尺寸標(biāo)準(zhǔn)時(shí)會(huì)進(jìn)行上報(bào)。在小程序開(kāi)發(fā)版/體驗(yàn)版中，當(dāng)我們?cè)O(shè)置開(kāi)啟Debug模式，圖片組件FreeImage會(huì)自動(dòng)檢測(cè)到大圖片時(shí)，顯示當(dāng)前圖片尺寸、以及設(shè)置圖片高亮/翻轉(zhuǎn)的方式提醒運(yùn)營(yíng)同學(xué)和設(shè)計(jì)同學(xué)進(jìn)行處理

加載失敗處理

使用騰訊云圖片處理功能，URL預(yù)處理轉(zhuǎn)換后得新 URL，可能會(huì)存在少量圖片不存在的異常場(chǎng)景導(dǎo)致加載失敗。遇到圖片加載失敗時(shí)，我們還是需要重新加載原始圖片 URL, 之后會(huì)將錯(cuò)誤圖片 URL 上報(bào)到監(jiān)控平臺(tái)，方便之后調(diào)整 URL 預(yù)處理轉(zhuǎn)換規(guī)則，同時(shí)也發(fā)現(xiàn)一部分錯(cuò)誤的圖片 URL 推動(dòng)業(yè)務(wù)修改。

這是我們圖片組件FreeImage 處理圖片加載失敗，以下是部分代碼

onError(event: WechatMiniprogram.TouchEvent) {
  const { src, useCosImage } = this.data;

  this.setData({
    loading: false,
    error: true,
    lazy: 'error',
  });

  // 判斷是否騰訊云服務(wù)的圖片
  if (useCosImage) {
    wx.nextTick(() => {
      // 重新加載原生圖片
      this.setData({
        formattedSrc: src, // src 是原圖地址
      });
    });
  }

  // 上報(bào)圖片加載失敗
  app.aegis.report(AegisEnum.IMAGE_LOAD_FAIL, {
    src,
    errMsg: event?.detail.errMsg,
  });

  this.triggerEvent('error', event.detail);
}

圖片請(qǐng)求數(shù)檢查

使用小程序開(kāi)發(fā)者工具的體驗(yàn)評(píng)分功能，體驗(yàn)評(píng)分是一項(xiàng)給小程序的體驗(yàn)好壞打分的功能，它會(huì)在小程序運(yùn)行過(guò)程中實(shí)時(shí)檢查，分析出一些可能導(dǎo)致體驗(yàn)不好的地方，并且定位出哪里有問(wèn)題，以及給出一些優(yōu)化建議。

通過(guò)體驗(yàn)評(píng)分的結(jié)果，可以分析我們存在短時(shí)間內(nèi)發(fā)起太多的圖片請(qǐng)求，以及存在圖片太大而有效顯示區(qū)域較小。所以根據(jù)分析的結(jié)果，開(kāi)發(fā)需要合理控制數(shù)量，可考慮使用雪碧圖技術(shù)、拆分域名或在屏幕外的圖片使用懶加載等。

上傳壓縮

圖片在上傳前在保持可接受的清晰度范圍內(nèi)同時(shí)減少文件大小，進(jìn)行合理壓縮?，F(xiàn)如今有很多不錯(cuò)的圖片壓縮插件工具，就不在詳情介紹了。

推薦一個(gè)比較優(yōu)秀的圖片壓縮網(wǎng)站：TinyPNG使用智能有損壓縮技術(shù)將您的 WebP, PNG and JPEG 圖片的文件大小降低

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)??！

? ??? ?? ?????? ???? ????? ??? ?? ?? ?? ???? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!