SVG又卡又慢？計育韜老師6個專業優化策略：
自 2016 年微信團隊與 JZ Creative Studio 共同制定并推出《微信下 SVG AttributeName 白名單》以來，數以萬計的設計師、開發者、低代碼平臺已生成了百億級 PV 的 SVG 作品。
但對于更多頂端開發力量而言，SVG 形式的日益豐富也同時帶來了對手機性能的極限壓榨。SVG 超級作品不僅可能加載緩慢運行卡頓，甚至會導致手機嚴重發燙以及微信 APP 閃退……那么作為行業一線研究機構主理人，本期計老師將結合部分交付案例，和廣大從業者聊一聊合理的優化策略，幫助你們盡可能地擺脫 SVG 作品卡頓問題，創作更絲滑的交互設計。
1.素材壓縮
最基本也往往最有效的優化策略，分第三方壓縮法、編輯器壓縮法、640 壓縮法 3 種。
第三方壓縮法：在確保素材本身清晰度得當的情況下（參考《公眾號圖片模糊？「無損」上傳秘訣在此。》），將你的 PNG-24 1080 尺寸素材在一些專業第三方網站中進一步處理，比如 TINYPNG.COM 就是我們比較推薦的工具，可以將圖片進一步以肉眼基本不可見的有損形式再壓縮 20%-70% 的體積不等。
編輯器壓縮法：譬如頭部品牌目前主流使用的E2.COOL 黑科技 SVG 編輯器，開啟「壓縮圖片」功能后會以 Go 語言幫助用戶進行圖片壓縮處理，這樣既完成了素材壓縮工作也實現了 SVG 交互開發本身。
640 壓縮法：這里請先觀察一下 Apple 公眾號的情況。圖片又多又大的 Apple 推文內，圖像一般不引用公眾號素材庫內原圖地址，而是均轉為一種「640」結尾的圖床地址——
《3 題辛辣拷問，Mac 請接招。》
這是為什么呢？
測試將同一張圖上傳至公眾號，重新下載地址中的圖片和640尾綴的圖片，對比會發現它們一般有 5%-10% 的體積差距，這其中與官方圖床 webp 格式的轉制有關——那么在操作層面，將圖片結尾的 0?wx_fmt=XXX 改為 640 即可。
2.圖片寬度的質因數分解
隨心所欲的圖片尺寸設計，也會額外增加圖文加載時候的圖形渲染工作量。
我注意到很多新入行的設計師并不理解顯示終端物理分辨率和圖像分辨率之間的關系，在制圖過程中采用一些詭異而隨意的畫板寬度開展工作。由于任何圖像在手機中進行展示，圖像信號都必須經過轉換生成符合面板輸出的物理分辨率（具體硬件工作原理有多種形式），那么質因數分解效果不佳的圖片被處理后會帶來更嚴重的內容損失。輕者存在感官上的畫質降低，重者在 SVG 運動中（包括 CSS 滑動）產生渲染刷新卡頓出現縫隙等問題。
不妨來看幾個比較典型的移動端設計圖寬度值：1280/1080/750 等，他們的質因數分解分別是——
1280：2*2*2*2*2*2*2*2*5
1080：2*2*2*3*3*3*5
750：2*3*5*5*5
對比之下有的設計師制圖寬度竟然可以產生 11、13 之類的質因數分解結果，這尤其給 SVG 動畫的刷新渲染增加了大量無意義的額外硬件運行負荷。
3.高階渲染（3D/混合模式等）
《上海的朋友，人人都可以領一束專屬花！》
目前 perspective 3D 作為熱門的公眾號排版模式，以其醉人的空間沉浸感頻現各大頭部品牌。而在實際開發過程中，我其實經常遇到滑動時緩存溢出，圖文強制刷新的問題亟需調試，且 3D 懸浮體包含 <img> 彈出圖的情況下這一現象更為常見。解決方案是主動拉開三維空間中不同渲染要素的距離，避免同屏內大量堆疊 3D 排版結構。
這里分享幾個近期我和同事們參與制作的 3D 案例，如果你注意到仍然有刷新問題歡迎私信告知我：
2.???????????????????? ???????????????????????? ???????? ????????????????????????
6.如何詮釋東方美學才不流于表面？勁霸男裝的答案是______
此外混合模式也同樣是圖形渲染一霸，雖然與 perspective 3D 相比它對硬件的要求低了很多，但計老師還是建議大家避免在一篇圖文里大面積且高密度的應用到它。
4.代碼壓縮
沒錯，對金字塔頂端的開發者來說，代碼也是需要壓縮的。當你代碼寫得足夠多，公眾號草稿會出現一個代碼不能超過「20M」的警告，而在實際操作過程中，代碼行數也有大約 2W 行的限制……
這些限制都要求我們這些超級開發者盡可能優化 SVG 代碼的體積，比如避免路徑轉曲式創作、更多采用 <foreignObject>、格式化等。
這里重點提一下「多叉樹遍歷」型 SVG 測試題的開發類型——一般不建議「真」遍歷，而是通過一些分叉的合并將結果盡量控制在 120 種內，否則無論代碼體積還是涉及的結果頁素材體積都過于逼近圖文展示的極限。
5.倒序加載
有的卡頓并不是代碼本身造成的，而是交互設計意識的不足導致感官上出現了閱讀障礙——比如「倒序加載」就是一個非常容易被開發者忽略的典型問題。
以計老師主持開發的喜茶《王，榨，油，柑，BANG！》為例，從代碼順序層面來講層層撥開遮罩后的結果頁會先行加載，有一定幾率被讀者先看到。所以我將底層-中層-頂層的 opacity 都設置為 0，賦予分別從 0.9、0.6、0.3 秒開始的透明度 to=1 動畫。
《王，榨，油，柑，BANG！》
由此「謎底」就不會先于「謎面」展示了。而這一問題頻繁出現在有大量同屏互動的 SVG 作品中，一旦開發者遺漏對它的處理，就會使得第一次打開圖文的用戶面對長時間的畫面倒序加載，誤認為 SVG 卡住，直接破壞了原文的敘事結構。
6.等待設計
《注意：CIIE高能傳送門，即將開啟》
注意到開場的「傳送門正在加載中……」了嗎？今年計老師一如既往地參加了GE中國的進博會全媒體工作，其中這篇《注意：CIIE高能傳送門，即將開啟》的開場需要預加載動態圖和 SVG 內容，因此置入一個加載提示的「等待設計」。
當用戶網絡環境較差，無法確保 GIF 和 SVG 動畫同步啟動時，這句提示就會逗留于畫面中央直到后續內容加載準備就緒。
開發細節并不復雜，通過自動 translate 控制它的移除和主畫面的移入即可。包括前文案例提到過的 Apple 公眾號圖文《3 題辛辣拷問，Mac 請接招。》也有一個為 GIF 預加載而存在的等待設計——而在此之前，Apple 公眾號在這方面的 SVG 設計是非常欠缺的，所以其圖文一直以「第一次打開什么也看不到」而著稱。
7.更多策略
在許多精彩的行業作品中，計老師還看到過諸如 GIF 接續控制法、動靜分離法、雪碧圖等值得一提的優化策略。如果你想自主學習更多行業 SVG 作品的開發技巧，歡迎訪問 SVG 作品公益搜索引擎（http://www.isvg.com/）。在這個站點內，你還會了解到更多超級開發者們的天馬行空的 SVG 創意和精妙絕倫的代碼邏輯。
-END-
合作聯系 微信號 Zhuoya_Work
咨詢致電 021 37218818
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）