一文看懂為蘋果Vision Pro開發(fā)應(yīng)用程序
譯者 | 布加迪審校 | 重樓蘋果的Vision Pro是一款混合現(xiàn)實(shí)（MR）頭戴設(shè)備。Vision Pro結(jié)合了虛擬現(xiàn)實(shí)（VR）和增強(qiáng)現(xiàn)實(shí)（AR）的沉浸感。其高分辨率顯示屏、先進(jìn)的傳感器和強(qiáng)大的處理能力
圖片
方案架構(gòu).png
如圖所示，圖片加載部分支持分辨率、格式自適應(yīng)以及懶加載、穩(wěn)定性布局等特性，其中涉及到圖片處理部分基于火山引擎veImageX 服務(wù)實(shí)現(xiàn)，如圖片轉(zhuǎn)碼、縮放、壓縮等。SDK 側(cè)生成當(dāng)前環(huán)境下最佳的圖片格式和分辨率，從服務(wù)獲取相應(yīng)的圖片 URL，借助云端處理能力在運(yùn)行時(shí)動(dòng)態(tài)生成所需的圖片。
數(shù)據(jù)監(jiān)控部分可分為加載耗時(shí)監(jiān)控、圖片詳情監(jiān)控、畫質(zhì)評估、大圖監(jiān)控、云控配置幾部分，監(jiān)控 SDK 收集相關(guān)數(shù)據(jù)，根據(jù)云端下發(fā)的配置上報(bào)數(shù)據(jù)，火山引擎veImageX 服務(wù)對數(shù)據(jù)做清洗后可在控制臺側(cè)查看數(shù)據(jù)大盤。
常見的圖片格式有 PNG、JPEG、GIF、WebP、AVIF、HEIC 等，其中 WebP、AVIF、HEIC 等高壓縮率圖片格式可顯著減小圖片體積。但由于不同瀏覽器對高壓縮率格式的支持情況不同，因此在應(yīng)用時(shí)需要考慮圖片加載的環(huán)境。三種高壓縮率格式在 Web 側(cè)的兼容性如下：
圖片
圖片
圖片
在 APP 端，對于不支持的圖片格式可采用 SDK 軟解的方式進(jìn)行解碼、渲染，Native 側(cè)的性能可保證圖片解碼的耗時(shí)和流量的節(jié)省都能有不錯(cuò)的收益。在 Web 側(cè)，由于瀏覽器性能限制，veImageX 內(nèi)部性能測試表明，SDK 軟解在圖片整體耗時(shí)方面的收益并不明顯，尤其是多圖場景下，因此在 Web 側(cè)更適合走格式自適應(yīng)的方案，即根據(jù)瀏覽器的支持性加載相對最優(yōu)的圖片格式。
常見的做法是采用標(biāo)簽以實(shí)現(xiàn)格式的自適應(yīng)，標(biāo)簽有相對不錯(cuò)的兼容性，支持包含零或多個(gè)元素和一個(gè) 元素來為不同的瀏覽器環(huán)境提供圖片版本，瀏覽器會(huì)自上而下選擇可以被渲染的圖片，若沒有匹配的，則選擇 元素當(dāng)中的圖片作為兜底。加載 SDK 最初也采用了該方案，如下：
<picture> <source srcset="image1.webp" type="image/webp" /> <img src="image1.jpg" decoding="async" loading="lazy"/></picture>但由于瀏覽器版本眾多，在實(shí)際應(yīng)用中，可能會(huì)出現(xiàn)很多預(yù)期以外的情況，比如：
為了保證圖片加載成功率，因此在實(shí)際應(yīng)用中無法直接使用標(biāo)簽，加載 SDK 目前采用格式探測 +相結(jié)合的方式來解決該問題。同時(shí)，由于 HEIC 支持率太低，格式自適應(yīng)目前只做了 WebP 和 AVIF 的自適應(yīng)，同等質(zhì)量下，WebP 相比 JPEG 可減少 30% 的圖片體積，AVIF 則可在 WebP 的基礎(chǔ)上再減少 20%；
分辨率自適應(yīng)指的是客戶端根據(jù)實(shí)際渲染的寬高獲取相應(yīng)分辨率的圖片，從而減小圖片體積。常見的做法是我們可以借助 HTML 中原生的 srcset 屬性來定義圖像集，以及每個(gè)圖像應(yīng)用的場景。由以下三部分組成：
window.devicePixelRatio可查詢顯示器像素密度sizes 則定義了一組媒體條件，比如：屏幕寬度。并且指明當(dāng)媒體條件為真時(shí)最佳的圖片尺寸。每個(gè)條件由以下三部分組成：
max-width:480px，表示可視窗口的寬度不超過480像素時(shí)可以將標(biāo)簽和 srcset 屬性相結(jié)合，實(shí)現(xiàn)格式和分辨率的自適應(yīng)，如下：
<picture> <source srcset="image1.webp 200w, image2.webp 600w" sizes="100vw" type="image/webp" /> <img srcset="image1.jpg 200w, image2.jpg 600w" sizes="100vw" decoding="async" loading="lazy" /></picture>然而在實(shí)際中又會(huì)面臨一些問題，如：
在實(shí)際應(yīng)用中，某些情況下可以提前知道圖片渲染大小或者圖片所在區(qū)域的大小，結(jié)合方案內(nèi)置的幾種布局方式以及設(shè)備像素密度等信息，加載 SDK 內(nèi)部可以分析并選擇出當(dāng)前模塊渲染的最佳分辨率。
Web 側(cè)通?；?CLS（Cumulative Layout Shift，累積布局偏移）指標(biāo)用于衡量頁面布局的視覺穩(wěn)定性。當(dāng)可見元素的位置在頁面生命周期內(nèi)發(fā)生了變化時(shí)，就會(huì)產(chǎn)生布局偏移。
導(dǎo)致布局偏移的因素有很多（如：動(dòng)態(tài)插入元素、iframe加載），無尺寸的圖片是影響 CLS 指標(biāo)的重要因素之一。例如下面兩個(gè)頁面中，右側(cè)指定了圖片寬高的頁面要比左側(cè)沒有指定圖片寬高的頁面穩(wěn)定性更好。
圖片
數(shù)據(jù)監(jiān)控.png
數(shù)據(jù)監(jiān)控的整體鏈路為：
圖片
圖片
方案致力于為 Web 場景提供極致的圖片加載體驗(yàn)，同時(shí)在穩(wěn)定性和場景覆蓋上也在不斷提升。
上面提到在某些瀏覽器下會(huì)存在部分 WebP、AVIF 圖片加載失敗的場景，在監(jiān)控到此類場景后加載 SDK 基于格式探測的方式最低成本的解決了此類問題，同時(shí)保證了性能。
例如：在 iOS 14.3 & 14.4 版本下的 Safari 瀏覽器加載部分的 WebP 失敗，而標(biāo)簽并不會(huì)對 WebP 的支持性做檢測，其對于傳入的 WebP 格式是全盤接收的，且 SDK 也無法對所有傳入的圖片做檢測，因此只能通過構(gòu)造特定圖片，在業(yè)務(wù)圖片加載前對其進(jìn)行檢測從而規(guī)避該問題，如下：
const checkWebP = () => { const pro: Promise<boolean> = new Promise<boolean>((resolve) => { if(typeof window === 'undefined') resolve(false); if (window['__support_webp__'] !== undefined) { resolve(!!window['__support_webp__']); } else { const img = new Image(); img.onload = () => { window['__support_webp__'] = true; resolve(true); }; img.onerror = () => { window['__support_webp__'] = false; resolve(false); }; img.src = 'error image'; } }); return pro;};目前方案支持了 React、Vue2、Vue3 以及小程序，為了保證體驗(yàn)的一致性、降低維護(hù)成本，加載 SDK 做了分層的設(shè)計(jì)，將核心的 Core 層抽離出來給到各個(gè)框架使用，并對各項(xiàng)能力做了插件化。
場景覆蓋.png
隨著方案的迭代，我們也在嘗試覆蓋更多的業(yè)務(wù)場景，比如：加密圖渲染、Hybrid HEIC 渲染等，火山引擎veImageX 希望給客戶帶來全面、穩(wěn)定、流暢的圖片體驗(yàn)，同時(shí)給業(yè)務(wù)帶來極致的成本收益。
我們將如上能力封裝成簡單的webSDK，向行業(yè)輸出，并可以免費(fèi)獲取和使用此SDK，更高級的能力也可以配合veImageX來使用；
本文鏈接：http://www.tebozhan.com/showinfo-26-12676-0.htmlveImageX 演進(jìn)之路：Web 圖片加載提速50%
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號